Website Style Guide - Image Galleries

There are several gallery options available to you after creaing your Image Gallery Asset.

Default Gallery

This gallery appears when inserting an Asset in a content area (no special code required). 


Image Grid Gallery

This gallery allows for larger thumbnails (set in the Asset options) and displays the image description & link(s).

Implementation Instructions

Implement this gallery with the following steps:

  • It is recommended to add space above and below where you want to add the gallery, as the text editor makes it hard to break out of the code block once created
  • Inset Snippet (the puzzle icon in the toolbar) called “GALLERY – Image Grid”
  • Highlight “REPLACE THIS TEXT…” and then Insert Asset (the cycling arrows icon in the toolbar) of the gallery you want

Thumbnail dimensions must be set to 500x500.

The link format must be the following:

  • http://www.example.com|LINK TEXT||http://www.example2.com|LINK TEXT2
  • The | is a pipe character (shift+backslash); use two to create multiple links 

 

 


Linked Images with Hover Effects

This gallery displays the image description & link(s).

Implementation Instructions

Implement this gallery with the following steps:

  • It is recommended to add space above and below where you want to add the gallery, as the text editor makes it hard to break out of the code block once created
  • Inset Snippet (the puzzle icon in the toolbar) called “Linked Images with Hover Effects”
  • Highlight “REPLACE THIS TEXT…” and then Insert Asset (the cycling arrows icon in the toolbar) of the gallery you want

The link format must be the following:

  • http://www.example.com

 

 


Linked Images with Hover Effects (Style 2)

This gallery displays the image description & link(s).  

Implementation Instructions

Implement this gallery with the following steps:

  • It is recommended to add space above and below where you want to add the gallery, as the text editor makes it hard to break out of the code block once created
  • Inset Snippet (the puzzle icon in the toolbar) called “Linked Images with Hover Effects”
  • Highlight “REPLACE THIS TEXT…” and then Insert Asset (the cycling arrows icon in the toolbar) of the gallery you want

The link format must be the following:

  • http://www.example.com

 

 


Image Slider

This gallery displays the image description & link(s).

Implementation Instructions

Implement this gallery with the following steps:

  • It is recommended to add space above and below where you want to add the gallery, as the text editor makes it hard to break out of the code block once created
  • Inset Snippet (the puzzle icon in the toolbar) called “Image Slider”
  • Highlight “REPLACE THIS TEXT…” and then Insert Asset (the cycling arrows icon in the toolbar) of the gallery you want

The link format must be the following:

Please see the banner asset instructions page for formatting options related to formatting the text and text box.

 

 


Classic Image Rotator

This gallery displays a rotation of images and descriptions

Implementation Instructions

Implement this gallery with the following steps:

  • It is recommended to add space above and below where you want to add the gallery, as the text editor makes it hard to break out of the code block once created
  • Inset Snippet (the puzzle icon in the toolbar) called “Image Rotator”
  • Highlight “REPLACE THIS TEXT…” and then Insert Asset (the cycling arrows icon in the toolbar) of the gallery you want
  • The Thumbnail size in the Asset must be set to 300x400.