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
Adding Image Gallery
- Navigate to the page to which you want to add the Image Gallery.
- Click on Open Page for Editing.
- Click on Manage Main Content.
- Click on Create and Connect Page.
- Choose Image Gallery from the list.
- 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
- Navigate to the page where you added the Image Gallery.
- Click on Open Image Gallery.
- The following options are available in the Image Gallery:
- 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.
- 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.
- A new blank page gets added to the Image Gallery. Click on Open Image and then Edit Image.
- The following options are available for your images:
- 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.