- Adding media to your Media Library
- Image Editor
- Media Fast Tagging
- File Types Supported
- Optimal File Sizes
- Media Library Search
- 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.
Adding media to your Media Library
1. Click on the Upload Media button.
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.
You can also drag & drop your files into your media fields:
3. Edit your images in the ButterCMS Media Library before saving them to the Media Library.
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.
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!
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.
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.
|image types||video types||audio types||other types|
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.
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
option:value pairs are comma-separated.
For example, our uploaded file has the following URL:
In order to resize it, we can simply add resize task to the URL. Like this:
Note: Resizing the image does change the URL to be of smaller files size to help with performance.