Media Library

  1. Adding media to your Media Library
  2. Image Editor
  3. Media Fast Tagging
  4. File Types Supported
  5. Optimal File Sizes
  6. Media Library Search
  7. Image API

The media library allows you to store your images and files in Butter with an easy-to-use interface with several ways to help organize and manage everything.

Media Library Image.png

Adding media to your Media Library

1. Click on the Upload Media button.

undefined

2. You can add one or multiple files to your Media Library at once from almost anywhere, including your computer, other sites on the internet, Dropbox, Box, Facebook account, Github, Google Drive, Flickr, etc.

undefined

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

Row 24.gif

3. Edit your images in the ButterCMS Media Library before saving them to the Media Library.

undefined

4. You can choose to display the media items in a grid format as thumbnail images or view the images as a list. They can be arranged by Name, Date Created or Editor who uploaded it, which is efficient for teams with multiple contributors to their blog or website.

undefined

Image Editor

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!

undefined

Media Fast Tagging

You'll want to have organized your files in a way that you can easily recall them. For this, we have Fast Tags.

1. In the Media Library, click on the tag next to a file, start typing and push Enter.  You can add multiple tags to your media this way.

undefined

Note: You can add as many tags as you want to each of the media and this allows you to organize a mass amount of media anyway that you'd like. Once you have tags applied, you can just click on a tag to filter images by that tag.

File Types Supported

The ButterCMS Media Library accepts all modern file types, MS Word Docs, Excel Files, Presentations, PDFs, Audio Files, Zip Files and Video Files (for Enterprise customers). We put it all onto our CDN so it makes it really fast for your customers to download those assets as needed. 

Here is a full list of all supported formats:

image types video types audio types other types
image/jpeg video/mp4 audio/webm application/ogg
image/gif video/h264 audio/mpeg3 application/octet-stream
image/png video/quicktime audio/mp3
image/svg video/webm audio/mpeg
image/webp video/x-msvideo audio/mpeg
video/x-flv audio/mpeg
video/mpeg audio/pcma
video/ogg audio/pcma
video/avi audio/pcma-wb
video/x-ms-wmv audio/pcmu
video/x-matroska audio/pcmu-wb
video/x-ms-wma audio/wave
video/3gp audio/wav
video/x-m4v audio/x-wav
video/mp2t audio/ogg
video/mts audio/mp4
video/vnd.dlna.mpeg-tts audio/aac
video/mov audio/m4a
audio/x-m4a
audio/x-ms-wma
audio/x-matroska
audio/x-mpeg-3
audio/vorbis
audio/amr
audio/amr-wb
audio/amr-wb+

Optimal File Sizes 

For optimal page speed and appearance, here are some helpful tips about your media files:

  • Large images or full-screen background images should be no more than 1 MB.
  • Resize images to 1200 pixels or less
  • Compress your image with a free program like TinyPNG or TinyJPG before adding to the Media Library. Both will significantly reduce your file size without interfering with the quality.
  • For other single file uploads such as audio files, zip files, etc., keep it below 150 MB.

Media Library Search

To find media within the media library, simply search for file names, file types (.doc, .pdf, etc.), and by Fast Tags to narrow down the items shown in your media library in order to find exactly what you need.

Image API

We have an integration with Filestack image API that enables a lot of optimization and transformation capability for your images by modifying the URL. Here are some of the things you can achieve using our image API and our integration with Filestack:

  • Image resizing
  • Compression of images
  • File conversions

All stored files in your application are available over the ButterCMS CDN, and each file’s URL can be modified with processing “tasks” that modify the requested resource. Each task has its own set of parameters.

Processing tasks can be chained together in the same URL by separating them with forward slashes. All tasks follow the structure of TASK=option:value, where option:value pairs are comma-separated.

Quick Example:

For example, our uploaded file has the following URL:

https://cdn.buttercms.com/Lvv0MCF0QhCoKLSuEJzD

ButterCMS Logo.jpg

In order to resize it, we can simply add resize task to the URL. Like this:

https://cdn.buttercms.com/resize=height:300/Lvv0MCF0QhCoKLSuEJzD

ButterCMS Logo.jpg

Note: Resizing the image does change the URL to be of smaller files size to help with performance.

Still have a question?

Our Customer Success team is standing by to help.