Add & Adjust Media Files in Posts & Pages

1. Adding Media to your Posts
2. Image Editor
3. Image Resizing within WYSIWYG Field
4. Image Alignment within WYSIWYG Field
5. Adding Captions / Alt Text to Media
6. Embedding PDF files
7. Embedding Videos
8. Embedding Powerpoint presentations and Infographics from an outside sources
9. Embedding Tweets

A key way to make your blog posts and articles engaging is to break up the content with images and videos.  Adding media files to your posts is super easy. Here's a quick guide to show you how it's done in Butter.

Adding media to your posts

Within a blog post, you'll be adding media within the body of the post, the WYSIWYG field.  The media library allows you to insert images and files (Word docs, Powerpoint presentations, Excel, PDFs, audio files and even zip files) into Butter with an easy-to-use interface.

1. Click on the Insert from Media Library button on your WYSIWYG toolbar.

2. Choose the file you would like to add to your post.  If you have uploaded it previously it will show up in your Media Library. Otherwise, upload a new one by clicking on the Upload Media button.

You can also drag & drop your files into your media fields:

Image Editor

The in-app image editor available in Small Business Plans and up gives you a powerful editing experience right within your Butter dashboard. When you go into the media library and choose any of your images, you will see the Launch Image Editor button that gives you a powerful editing experience right within your Butter dashboard. What you can do with it is limitless as far as image manipulation and editing. You don't have to worry about reformatting or doing any editing before you upload an image into Butter. Instead, you take a raw image, upload it into Butter, and then make any modification that you want to it afterward.

• Transform: Flip, Rotate, Resize, Crop
• Filters: Sepia, Black, and White, Polaroid, etc.
• Adjustments: Blur, Brightness, Contrast, Gamma, Hue, Noise, Pixelate, Saturation
• Text: Font, Font size, Bold, Italic, Underline, Text alignment
• And more!

Image Resizing within WYSIWYG Field

Images can be resized directly from the WYSIWYG field.

Image Alignment within WYSIWYG Field

Once you've added media to a WYSIWYG field, you may need to align it within the text of the field.

1. Simply click on any image in your post and use the alignment controls (left, center, and right alignment) on the toolbar to adjust it according to your preference.

Note: Your developer may need to define the proper CSS styling to make the image float: left or float: right. If that's the case you can have them review this: https://buttercms.com/docs/api-client/other#BloggingCSS

Adding Captions / Alt Text to Media

To add a Caption / Alt Text to an Image. Click on the image and then click on the Insert from Media Library button in the toolbar. That will bring up the modal where you can:

• Provide an Image Description
• Indicate if Caption is needed

When checking the box next to Caption, you'll then be able to add any caption to the image in the post.

Embedding PDF Files

When inserting a PDF into your WYSIWYG field, you will see a PDF Preview.

Embedding videos from an outside source

For videos, we recommend hosting them on YouTube or Vimeo, since these services specialize in video compression and have excellent video players.

1. Click on the Insert/edit media button on your WYSIWYG toolbar.

2. Enter the link to your media in the Source field.

Another way to accomplish this is to simply paste the embed code from your video into the Embed tab.  This may be practical if you want the video to begin at some delayed time.

1. Go to your video on YouTube or Vimeo to copy the embed code. (The below example is a video from YouTube.)

2. Paste the embed code into the Embed tab of the Insert/edit media modal.

3. Your video will now be embedded into your post.

Note: Uploading native videos right into Butter is only available for Enterprise accounts at the moment.

Embedding Powerpoint presentations and Infographics from an outside source

For Powerpoint Presentations, we recommend uploading it to Slideshare first so you can embed it into Butter.

1. Go to your Powerpoint Presentation on Slideshare to copy the embed code. (The below example is a presentation from Slideshare)

2. Paste the embed code into the Embed tab of the Insert/edit media modal.

3. Your presentation will now be embedded into your post.

Embedding tweets

1. Locate the tweet in your Twitter newsfeed or on the Twitter user's profile then click the downward-facing arrow icon and choose 'Embed tweet.'

2. Copy the code that appears and paste it into your WYSIWYG field's source code:

3. Click the Ok button and you should see the tweet embedded in your post.