Add Images

Images add visual/aesthetic appeal to the information on a web page, helping to maintain viewer interest and attention. Images may also help to create visual structure for information and links on the page.

There are several steps to inserting an image into your web page: first you upload the image to the server and then you insert it into the web page via the page edit mode.

Demo: Image Sizes

1

Upload an Image

  1. Scroll down to the Photo section. 
  2. Click Choose File to browse to the image file you would like to use.

    3. Photo section
  3. Fill in Alternative text for the image. A brief description of the image is needed to make the image accessible. See the Adding Alt Text to Images tutorial for more information about writing meaningful alternative text.

    4. Add alternative text
  4. Click Upload.

Note: Provide proper alternative text when you first upload an image. You may change it later but you will need to reinsert the image in order for the new alternative text to be updated in the page code. See our Accessibility Tutorials to learn more about Alternative Text.

2

Insert the Image

  1. Next to the image that you just uploaded, choose the desired image size from the Style drop-down (see "Image Sizes" in Step 3 for more information on sizing).

    2. Select image style
  2. Scroll up to the Body area and place your cursor in the content where you would like the image to appear.
  3. Scroll back down to the photo area and click on Insert.
  4. To align the image, click on the image in the content area to select it, then use the align tools in the WYSIWYG content editor to align the image right or left.
3

Image Sizes

To preview size examples, click Image Preview under the uploaded image.Image Preview

*Colorbox small: 300 px
*Colorbox small square: 70 px
*Colorbox small thumbnail: 100 px
*Colorbox square: 180 px 

Automatic: the uploaded size
Hero: 1500 px
Large: 960 px
Large-square-thumbnail: 320 x 320 px
Large-wide-thumbnail: 320 x 160 px
Medium: largest side resized to 480 px
Slider: 960 x 360 px
Small: largest side resized to 240 px
Small square thumbnail: 70 px
Square thumbnail: 180 x 180 px
Thumbnail: 100 x 66 px

*Note: You can add lightbox functionality to an image by using the colorbox image styles. Lightbox is a JavaScript library that displays images by filling the screen, and dimming out the rest of the web page.

Related: See the Image Sizes tutorial for examples of image sizes.

Related Articles