Crop, rotate, and scale embedded images

When you upload images into the default WYSIWYG editor, you can't edit the image beyond scaling. This might require you to use an external image editor before uploading the image to your site. By enabling the Media: image editing module, you can access editing features through the WYSIWYG editor or the Media Library to rotate, crop, and scale images, making it faster and easier to get your pictures looking the way you want, without having to use an external image editor.

Enabling the module

To edit images in the WYSIWYG editor, enable the Media: image editing module. For information about how to enable a module, see Adding features to your site.

After you enable the module, an image editor becomes available on your site. The editor interface provides you with various options for modifying pictures on your site.

Image editor

When you upload images to the WYSIWYG editor, the image editor opens automatically. To edit an image that was already uploaded, right-click the image to open its properties menu, and then click Image Crop Settings.

Crop - Example 1.png

Rotating images

Sometimes an image that you upload is upside-down or sideways. Using the image editing interface, you can rotate the picture to the correct orientation.

To rotate an image:

  1. In the image editor, click the icons below the picture.

    Image editor - Rotate 1.png

  2. Click one of the rotate icons.

    Image editor - Rotate 2.png

    The picture rotates 90 degrees in the direction indicated.

    Image editor - Rotate 3.png

  3. When the picture has the alignment you want, click Submit.

Cropping images

Images are sometimes larger than you need. The image editing interface allows you to crop the picture, making it smaller and focused on the section you want.

To crop an image:

  1. In the image editor, click the icons below the picture.

    Image editor - Crop 1 .png

  2. Click on the picture and drag the cursor over the area to crop. Use the handles to adjust the cropping area's size.

    Image editor - Crop 2.png

    The pixel size of the cropping area displays in the text boxes below the picture. You can also set these sizes manually.

  3. Click on the center of the cropping area and drag it over the area you want crop.

    Image editor - Crop 3.png

  4. When the cropping is ready, click Submit.

    The cropped picture loads into the WYSIWYG editor.

    Image editor - Crop 4.png

Scaling images

If an image is too large for your website, but you don't want to crop the image, you can change scale of image by entering a new image height or width.

Note: Changing an image's scale to a larger image size can cause the image to appear blurry.

To scale an image:

  1. In the image editor, click the icons below the picture.

    Image editor - Scale 1.png

  2. In the Scale section, enter a new width or height in pixels for the image.

    Image editor - Scale 2.png

    Note: If you enter values in both fields, be sure to manually maintain the image's display ratio for the values, or the image can display distorted.

  3. When the image has the scaling you want, click Submit.

The image editor scales the image to the size you chose.

Image editor - Scale 3.png

Using the image editor with styles

You can assign styles to your pictures in the Image styles section of the image editor. Styles are pre-configured settings that help you standardize images for a particular use on your site. For example, if you plan to use several images in your blog, you can create a blog image style that makes all blog images the same dimensions, regardless of the original picture's size.

The image editor applies image styles when the picture is added to the WYSIWYG editor. When you select a style, the preview image does not change.

To use an image style:

  1. In the image editor, select Combine with image style.

    Image editor - Style 1.png

  2. In the Image style list, click the name of the style that you want to use.

    Image editor - Style 2.png

    The image editor updates the link to display the selected image style. The picture in the image editor remains the same.

  3. When your image is ready, click Submit.

The image editor loads the picture into the WYSIWYG editor and applies the image style that you selected.

Image editor - Style 3.png

Note

If an image style also includes crop and rotation effects, users may experience unexpected results. For example, the image style's rotation effect will be applied over any modifications performed by the Media: Image editing feature. Generally, an image style works transparently to end users when the image style effects do not change image dimensions, such as desaturation.

If you must use crop and rotation effects at the image style level, the following examples result in predictable outcomes:

  • A single rotation (90, 180, 270 degrees in either direction)
  • A single crop

    Media Crop - Crop style.png

  • A single rotation followed by a single crop

    Media Crop - Rotate Crop style.png

For more information about image styling, see Image styles.

Feedback