How to Create a Responsive Image Gallery
An Image gallery allows you to easily upload photos from an event into an album. The images will automatically be resized into thumbnails and when the image is clicked on, it will expand to full size. Captions can also be added for individual photos.
A Caption can be added to each individual photo so that it displays when the user hovers over the image or when they click on the image, the image will expand to full size and the text will be displayed under the image.
To Create a New Image Gallery
- Go into Pages from the Dashboard
- In the Content Tree decide where you would like to create the Image Gallery
- Click on the Page
- Click on the New (+) button located at the top of the Content Tree
- Click on Responsive Image Gallery page type
The only thing that needs to be added at this time is
- Name: type in the Name of the image gallery
All the fields (including the Image Gallery Name) can be modified in the future using the FORM tab
- Name: enter name of the Image Gallery (New Year’s Eve Party, Valentine’s Day, Mother’s Day etc…)
- Teaser image: is used if you choose to put the Image Gallery into a List of Galleries in the future
- Publish from: This could be left blank if you want it to be visible immediately. Otherwise, choose the date that you want it to be available for users to view by clicking on the calendar icon beside Now
- Publish to: This could be left blank if you want it to be visible indefinitely. Otherwise, choose the date that you want it to be hidden from users, by clicking on the calendar icon beside Now. The Image Gallery will still remain in your content tree even when it is hidden
- Click on Save
The Image Gallery for Mother’s Day has been created.
On the Mother’s Day page, Text can be added in the editable box found above the Image Gallery blue box
Setting number of images per page
Administrators can select the number of thumbnails to appear per page by clicking on the Image Gallery Blue box and adjusting the Page Size. If all the thumbnails cannot fit on one page, users are provided with pagination links to navigate the pages.
- Click on Image Gallery Blue box
- Path: do not change this, leave it as ./%
- Enter number for Page size (this determines how many images to place on the screen)
Note: the maximum number of thumbnail images across is 5. When a 6th image is added, it will be placed on the next row or page depending on what Page size was set up.
Ex. Page Size: 5 is used in the Holiday Party – December 2016 example shown below. Once the 6th photo is added the user will have to go to page 2 to see the next set of 5 photos
Adding photos
There are two ways to add the photos
Reminder: Please edit, crop, resize and rename the images on your computer before you upload the file(s).
- Single Image Upload is best used when you are just testing a few photos for a new album or if you forgot to include photos in an existing album
- Multiple Image Upload will save time as this option will allow you to upload multiple images all at once
Once the images are uploaded you also have the option to manage the image (edit caption for each individual image, change the order that they appear or delete any photos that got uploaded in error).
If you are interested in adding a couple of Image Galleries and want them to be grouped together, a List of Galleries can be created.
Ex. This is what a List of Galleries would look like if there were 3 Image Galleries in the List of Galleries
