Skip to main content

​
Image editor overview

When you access the Media Library and select any image, you’ll see the Launch Image Editor button. This gives you a powerful editing experience right within your Butter dashboard. Image Editor
The Image Editor is available on all paid plans (Basic, Advanced, Professional, and Enterprise).

​
Editing capabilities

The image editor offers extensive manipulation and editing features:

​
Transform

  • Flip - Mirror images horizontally or vertically
  • Rotate - Rotate images to any angle
  • Resize - Change image dimensions
  • Crop - Trim images to specific areas or aspect ratios

​
Filters

Apply artistic filters to your images:
  • Sepia
  • Black & White
  • Polaroid
  • And more!

​
Adjustments

Fine-tune your images with:
  • Blur - Add blur effects
  • Brightness - Adjust light levels
  • Contrast - Enhance or reduce contrast
  • Gamma - Adjust gamma correction
  • Hue - Shift color tones
  • Noise - Add or reduce noise
  • Pixelate - Create pixel effects
  • Saturation - Adjust color intensity

​
Text overlay

Add text to your images with customizable:
  • Font selection
  • Font size
  • Bold, Italic, Underline styles
  • Text alignment

​
Image resizing in WYSIWYG

Images can be resized directly from the WYSIWYG field when editing content: Image Resizing in WYSIWYG

​
Image alignment in WYSIWYG

Once you’ve added media to a WYSIWYG field, you can align it within the text:
  1. Click on any image in your post
  2. Use the alignment controls (left, center, right) on the toolbar to adjust according to your preference
Image Alignment
Your developer may need to define CSS styling for image alignment (e.g., float: left or float: right) in your site styles.

​
Adding captions and alt text

To add a caption or alt text to an image in your content:
  1. Click on the image in the editor.
  2. Use the image properties dialog that appears to add Image Description (alt text).
  3. Enable Caption to show a caption below the image.
Adding Captions

​
Image API transformations

ButterCMS integrates with Filestack’s Image API for advanced image optimization and transformation capabilities through URL modification.

​
How it works

All stored files are available over the ButterCMS CDN. Each file’s URL can be modified with processing “tasks” that transform the requested resource. Tasks can be chained together by separating them with forward slashes. All tasks follow the structure: TASK=option:value, where option:value pairs are comma-separated. Image API Structure

​
Quick example

Original file URL: 
https://cdn.buttercms.com/Id7NsgqgQeKd8PLF0rqe
Original Image To resize it, add the resize task to the URL: 
https://cdn.buttercms.com/resize=height:300/Lvv0MCF0QhCoKLSuEJzD

​
Responsive images

You can dynamically create image assets sized for specific screen sizes: Responsive Images
Resizing images via URL parameters changes the actual file size delivered to users, improving performance for your website.

​
Editing workflow

1

Access Media Library

Navigate to the Media Library in your ButterCMS dashboard
2

Select image

Click on the image you want to edit
3

Launch editor

Click the Launch Image Editor button
4

Make edits

Use the tools to transform, filter, adjust, or add text
5

Save changes

Click Save to apply your changes

​
Image transformations (Image API)

ButterCMS integrates with Filestack image API that enables optimization and transformation capability for your images by modifying the URL. 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. Image transformation URL structure

​
Resize example

Original URL: 
https://cdn.buttercms.com/Id7NsgqgQeKd8PLF0rqe
Resized to 300px height: 
https://cdn.buttercms.com/resize=height:300/Lvv0MCF0QhCoKLSuEJzD
Responsive image sizes

​
Common transformations

TransformationURL FormatExample
Resize by widthresize=width:VALUEresize=width:800
Resize by heightresize=height:VALUEresize=height:600
Fit dimensionsresize=width:W,height:H,fit:cropresize=width:400,height:300,fit:crop
Qualityquality=value:VALUEquality=value:80
Format conversionoutput=format:FORMAToutput=format:webp

​
Responsive images example

<picture>
  <!-- WebP for modern browsers -->
  <source
    type="image/webp"
    srcset="
      https://cdn.buttercms.com/resize=width:400/output=format:webp/abc123 400w,
      https://cdn.buttercms.com/resize=width:800/output=format:webp/abc123 800w,
      https://cdn.buttercms.com/resize=width:1200/output=format:webp/abc123 1200w
    "
  />
  <!-- Fallback for older browsers -->
  <img
    src="https://cdn.buttercms.com/resize=width:800/abc123"
    srcset="
      https://cdn.buttercms.com/resize=width:400/abc123 400w,
      https://cdn.buttercms.com/resize=width:800/abc123 800w,
      https://cdn.buttercms.com/resize=width:1200/abc123 1200w
    "
    sizes="(max-width: 600px) 400px, (max-width: 1000px) 800px, 1200px"
    alt="Product image"
  />
</picture>