Image Set

View the example page to see this paragraph-type in action.

Image Set example

Guidelines for use

  1. This block is always used at 100% width of the page container (not the browser window).
  2. If the heading and description fields are filled in, then the links will stack into two columns. If the heading and description fields are left empty, then the links will go to a 4 width column layout.
  3. You can put an unlimited amount of images.
  4. Images will display in order from left to right in the same order they are input into the editor window.

  1. Use this paragraph to add linked images in a row or grid
  2. Try not to mix internal site links with links out to other sites in the same image set paragraph.
  3. Though the number of images is unlimited, a giant set starts to pose usability issues - i.e. a long list can be hard to sift though. If you have more than 10-12 items in a set, introduce categories/headings to break your content into separate lists.

Elements

Title: An optional <h2> heading (required when "Description" text field is filled). Maximum character count: 100.

Description: Optional <p> paragraph text. Maximum character count: 500

Image: Optional. Uses a Font Awesome icon picker tool.

Link: Optional. Add a URL that the image should link to. The link text field will not be be used. 

Some websites may wish to list a set of images, such as the logos of affiliated groups, and link end users to additional information. 

Use of this Image Set paragraph is most appropriate for linking users to information using an image for context. For example, an image set might be used to link users to the external websites of advertised partners or affiliates.

 

Images will stack on mobile.

How to implement

  1. Create a Basic Page.

  2. Scroll down to the Paragraphs section, click the drop-down arrow, and click "Add Image Set".
    paragraph list with image set highlighted

  3. Proceed to the Overview of a Image Set section of this guide below. 
    Image set paragraph fields

  4. Once you've added your Image Set content, choose your publishing options and click Save at the bottom of the page.

Template options

  1. Click and drag the crosshairs handle to rearrange your paragraphs.
  2. Remove this entire paragraph.
  3. (Optional) Title - this title appears to the left of the images. Restricted to 100 characters
  4. (Optional) Body - this body appears to the left of the links. Restricted to 500 characters
  5. Click and drag the crosshairs handle to rearrange your images.
  6. Remove this individual image set.
  7. Image – you can either upload a file directly to the page, or open the file browser to upload the file to the site's central file repository. It is recommended that you open the file browser to upload, so that you can reuse the image in the future. Once the image is uploaded be sure to descriptive text to the Alternative Text field.
  8. URL – add the link that users should be directed to when clicked.
  9. Link text – although this field appears, it will not be used. You can leave this field blank.
  10. Add another image set.