Add Images to pages

Add Images from Images Tab

To add an image to a page using the image tab:
  1. Click on the image tab to open it.
  2. Click Help CMS Add Image to add a new image from the image library.
    If the image you wish to add is not yet in the image libray, you will need to add it. There are two ways to add an image:
    • Access the image library and upload the image using Add Image, instructions here.
    • or by clicking on Upload Image from the left hand panel in the choose image pop-up.
  3. Scroll through the image library and find the image you wish to add.
  4. Click Add.
    Add as many images as needed using this method.
  5. When finished adding images, click Close to exit the Choose an Image window.
Help CMS Images Add Help CMS Add Image from Tab
  1. Use Liquid Markup to add the images from the images tab to the page. Add images using a For Loop as shown below:

{{ for image in page.images }}
   {{ image.thumb.['150x150'] }}
   {{ image.title }}
{{ endfor }}

Change the image size by changing the dimensions within the brackets.

Add additional content associated with the images within the for loop using these liquid helpers:

Helper Markup Function
Image Title {{ page.title }} Adds the Image title to the page.
Image Link to URL {{ image.link_to_url }} Add a the Image URL to the page.
Image Description {{ image.description }} Add the Image description to the page.
Image Thumb {{ image.thumb }} Add the full-size thumbnail of the Image to the page. To change the size, modify the markup to include the height and width dimensions: {{ image.thumb.['150x150'] }}
Image Grayscale {{ image.grayscale }}
Image Tag {{ image.tag }}

For additional information on using Liquid Syntax, see the Liquid Helpers help page.

Add Images from Image Library

Images can be added to a page using the "add image" button in the format toolbar. This button opens the image library where the available images can be searched and inserted.

To insert images from the image libary with HTML tags:

  1. Place cursor in the location within the page where you want to insert the image.
  2. Click on the button located in the format bar above the page editor.
  3. In the popup window that opens, search or scroll to find the desired image.
  4. Select the image size you wish to add. (200x200, 640x480, 1024x768, or Original File)

    Image HTML format will appear as:

Help CMS Choose Image

If using a preset image size,
<img src="/cms/media/640x480/2013/09/18/11_26_05_903_image_name.png" alt="Alternate Title" />
To change the image dimensions, replace the 640x480 with the desired width x height dimensions.


If using the original file,
<img src="/cms/2013/09/18/11_26_05_903_image_name.png" alt="Alternate Title" />

Add Images with HTML

Images can be inserted into a page using the HTML image tag.

HTML image tags should follow this format:

<img src="image.gif" alt="Alternative Text" height="50" width="50"> >

Attribute Value Description
src URL URL for the image (This attribute is required)
alt text Alternative text for an image (This attribute is required)
height pixels Height of the image
width pixels width of the image

For more information on the HTML image tag, see here.