Adding and adjusting media in your blog posts

  1. Adding media to your posts
  2. Image Alignment within WYSIWYG Field
  3. Adding Captions / Alt Text to Media
  4. Embedding videos from an outside source

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.

undefined

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.

undefined

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.

undefined

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 Image 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.

undefined

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.

undefined

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

undefined

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.)

YouTube Video Embed Code
YouTube Embed Code for your Video

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

embed video copy paste.JPG

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

undefined

Still have a question?

Our Customer Success team is standing by to help.