Adding Images

Insert photos or graphics on a page.

Looking for photos you can use on your site?

Before you upload an image:

Crop it to the right size, touch it up or color correct, optimize it for web, and save it with a descriptive file name.
 

How to add images

Insert image using the default editor or Tailor

  • Go to the page or post where you’re adding the image. If editing in Tailor, use a Content element to insert the image.
  • In the content editor, place your cursor where you want the image to appear.
  • Click the Add Media button above the content editor.

Upload image file

Skip this step if inserting an image you already added to the Media Library.

  • In the window that appears, click on the Upload Files tab in the top left corner, next to Media Library.
  • Drag and drop the file from your computer onto the window, or click Select Files to browse your computer for the file.

screenshot of media upload and media library

Select an image

In the Media Library tab, select the image you wish to insert.

A blue checkmark in the top right corner of the image indicates that it is selected.

Add metadata

Check these properties on the right, in the Attachment Details section:

  • Title
    Displays when you mouse over an image in some browsers, including Firefox and Opera. WordPress uses the filename as the default title; editing it is optional. Avoid personal identifiers that violate HIPAA or FERPA.
  • Caption
    Displays only for non-featured images. In addition to describing who or what the image shows, you can credit the photographer or illustrator; eg, Photo: Annie Leibovitz.
  • Alt Text
    Used in place of an image, such as by screenreaders or if an image is unable to load. Make it succinct and descriptive. Though critical for accessibility, the alt text may be redundant if the caption or other content provides a description. Leave blank if details would annoy rather than assist users. (The theme will insert an empty or null alt attribute if left blank.) Visit WebAIM to learn more about optimizing the alt attribute for accessibility.
  • Description
    Optional and typically unnecessary. The description is visible and searchable within your Media Library, but it is not publicly visible on your website.

Set alignment

At the bottom right of the window, set the alignment.

  • Smaller images (thumbnail or medium):
    Align left or right so text wraps cleanly around them.
  • Larger images: 
    Select no alignment if you’d like the image to span the entire page width (if it’s large enough). Images with no alignment sit left, but text does not wrap.

Choose whether to link the image

In general, we recommend the default option: None.

Select size

The theme has several pre-set display sizes, which you can choose in the bottom right of the attachment details:

  • Large: Spans full width of body content. Ideal for horizontal images.
  • Medium: Sizes to about half-width. Ideal for vertical images.
  • Thumbnail: 150 x 150. Use for headshots.

Insert the image (finally!)

In the bottom right corner of the image window, click the blue Insert into Post button.

 

Editing images

To edit an image you’ve inserted, click on the image then click the Pencil icon in the popup toolbar.

Make your changes, then click the blue Update button in the bottom right corner.

 

 

RELATED TUTORIALS