WiscWebCMS - Responsive Template (rst) - Adding and Using Image Gallery

This document will walk you through adding and using Image Gallery in your responsive template CMS site.

The Image Gallery allows you to display a series of images as thumbnails. Users that click on a thumbnail will be taken to a full-size image gallery that they can scroll through. It is a great way to showcase:

  • An event
  • Art
  • Research

Adding Image Gallery

  1. Navigate to the page to which you want to add the Image Gallery.
  2. Click on Open Page for Editing.
  3. Click on Manage Main Content.
  4. Click on Create and Connect Page.
  5. Choose Image Gallery from the list.
  6. Give the page a headline. We recommend following the format of "Image Gallery - (Page Name)" where (Page Name) is the name of the page to which you are adding the Image Gallery.

Using Image Gallery

  1. Navigate to the page where you added the Image Gallery.

  2. Click on Open Image Gallery.

  3. The following options are available in the Image Gallery:

    image-gallery-options

    • Block title: Allows you to enter a title for your Image Gallery that will appear above it. If you do not want a title, leave the field blank.
    • Photos per row: Allows you to set the number for images per row. The more images per row you have, the smaller the thumbnails will be.
    • Show on small, medium, large screens: Allows you to toggle whether the images appear on small (phone), medium (tablet), and large (laptop, desktop) screens.

  4. To add a new photo, click on Manage images. Choose to Create and Connect page, and then give the page a headline. We recommend the following format "Image Gallery - (Page Name) - (Image Name)" where (Page Name) is the name of the page on which you have inserted the Image Gallery, and (Image Name) is a descriptive name for the image. For example, Image Gallery - First Day of Class 2014 - Bucky with Books.

  5. A new blank page gets added to the Image Gallery. Click on Open Image and then Edit Image.

    new-image

  6. The following options are available for your images:

    image-details

    • Headline: Allows you to alter your headline.
    • Full size image: Click on the pencil icon to add your full-size image. This will appear when a user clicks on the thumbnail.
    • Alt attribute: Allows you to add text that screen readers will read to users with accessibility issues. The first alt attribute field is only for the full size image.
    • Thumbnail: An image that will appear in the Image Gallery, linking to the larger image above. We recommend not using the same image as above, and instead saving a smaller sized image as a thumbnail, or cropping the image so that just a part of it shows in the thumbnail.
    • Alt attribute: Allows you to add text that screen readers will read to users with accessibility issues. The second alt attribute field only is for the thumbnail.
    • Caption: Allows you to add a caption. It will only appear under the full size image.



Keywords:thumbnail crop   Doc ID:44510
Owner:Ryan H.Group:WiscWeb CMS
Created:2014-10-28 09:13 CDTUpdated:2014-12-02 12:34 CDT
Sites:DoIT Help Desk, WiscWeb CMS
Feedback:  0   0