Image module

The Image module allows you to add, size & style single images as well as multiple images in a gallery/slideshow, list or grid. Each image can have a unique title, caption & link.

Display options:  Single image • Gallery / Slideshow • List • Grid

Operations:  Adding images • Managing images

Add the Image module to your page, then:

1. Optional: add a heading. This uses your site's Heading 2 styling
2. Select the Image Display: Single, Gallery/Slideshow, List or Grid
3. see the examples below for adjusting the images settings

Single image 

This will display a single image in it's native aspect ratio, as large as the host column will allow.

• Alignment - useful when the host column is wider than the image
• Style - shadow & border options

Usage tips:

• Page-width 'hero' images are easily added with this module when placed in a one column section. The module won't stretch or distort images, so the original dimensions have to be wide enough to fill the space. Usually, images 1000 pixels wide will be fine, but some site designs require even larger image dimensions. 

Single Image video demo

This will display a group of images in either a fixed aspect ratio, or in their native dimensions

• Aspect Ratio - selects a frame size, or allows the image(s) to maintain the native dimensions
• Style - shadow, border, and Crop option to force the image(s) to fill the frame. The Crop option is unavailable when the aspect ratio is not specified. 
• Function - with 'auto-rotation' on, images will change every 5 seconds.
  - with 'click to fullscreen...' on, images will enlarge and captions will appear once the image is clicked

Usage tips: 

• Avoid combining unframed vertical & horizontal images in the same gallery. If combined, any page content which appears below the gallery will shift up or down on the screen each time the image size changes.
• Vertical image galleries are best used without a specified aspect ratio. This allows the images to fill the host column.
• When the aspect ratio is specified, images will look their best if they match the ratio, or when the gallery is also utilizing the Crop to Fill option.
• Slideshows work well for rotating banner ads when all of the images are sized identically.

List 

This will display a single column of multiple images in a 1:1 aspect ratio

• Size - medium size is equal to 1/3 of the page width; large size is equal to half the page width.
• Alignment - defines the positioning of the list within the host column
• Style - shadow & border options
• Function - with 'click to fullscreen...' on, images will enlarge and captions will appear once the image is clicked 

Grid 

This will display rows of multiple images in a 1:1 aspect ratio

• Size - medium size is equal to 1/3 of the page width; large size is equal to half the page width.
• Alignment - defines the positioning of the grid within the host column
• Style - shadow & border options
• Function - with 'click to fullscreen...' on, images will enlarge and captions will appear once the image is clicked 

List & Grid video demo

Adding images

• Click ADD FILES... to select the image(s) from your computer.
• Click START UPLOAD and all the images will begin transferring, or you can transfer them one-at-a-time with the START button next to each name.
• After uploading is finished, Close the window.

Managing images

Click on an image to add details or make modifications:

• title is optional
• you can change the image or crop it
• caption is optional
• link is optional - it can go to a internal or external web URL, or to an email address (ideal for creating a staff page)
• check the box if you want the link to open in a new window
• Save