Edit Image

This article explains how to edit an image from the visual editor.

Moving an image

While in the visual editor, you can simply drag your image from one place in the content to another.

Resizing an image

  1. Click on your image. Note the small grey boxes that become visible around its edges.
  2. Hover your mouse over one of the grey boxes. Note that it turns black, and your cursor changes into a double ended arrow  (outlined in red, below left).
  3. While your cursor is a double ended arrow, click and drag to a new position. As you’re dragging, you’ll see a dashed outline of the new dimensions of the image, as well as its new pixel size in a tooltip (orange arrow, below).
  4. Stop dragging to finish the resizing process.

resize-imgresize-img2

Image toolbar

When you click on your image, a icon based menu will appear (outlined in red below).

tinymce-img-menu

The first 4 icons affect how the image interacts with the other elements on the page (a.k.a. its alignment). The image’s current alignment will be highlighted in the toolbar. To switch to a different alignment, click one of the other alignment icons.

img-menu-alignleft  Alignment:left (text wraps around the right side of the image)
img-menu-aligncenter  Alignment: center
img-menu-alignright  Alignment: right (text wraps around the left side of image)
img-menu-alignnone Alignment: none
img-menu-edit Edit the image’s details (explained in the next section).
 img-menu-delete  Deletes the image from the page/post, but not the image library.

Edit image details

This will bring you to another screen, shown below. Most of these fields can be filled out when you upload the image, and are explained in the Add an Image documentation.

edit-img-details

Advanced Options

The advanced options (red arrow above) allow you to fine-tune the HTML of your image and associated link. These options are rarely used, but there are 2 tricks worth mentioning:

  • By default, images are not given titles, but if you supply a “Image Title Attribute”, the user will see it in a tooltip when they hover over an image.
  • You can use the Link CSS Class to have your image or video open in a fancybox.

Don’t forget to click the blue “Update” button at the bottom of the Image Details window after making any changes.

Edit Original

Brings you to another screen where you can crop, resize, rotate, and flip your image.

Replace

This is functionally the equivalent of deleting your image from the page, then adding a different one in the same place.