Creating Thumbnail Galleries/Types

Creating Thumbnail Display Galleries

There are two ways to display the larger view of thumbnail galleries.  Below are instructions for both ways.

If you want to have a thumbnail gallery that will change the large image view found on the same page to reflect the thumbnail you clicked on, then follow the instructions below.

First, you'll need to set the height on the large image view frame so it doesn't jump around when a new image is selected from the thumbnail gallery. To do this, select the frame with the Full-Sized image in it, select the Frames Margins, Borders & Sizes icon from the toolbar. When the pop up appears, select for Height Exact and type in 450 and click Apply. This will make sure that your images which should only be 400 X 400 pixels large won't jump when a new one is selected.

NOTE: We advise that your Full-Size images only be 400 X 400 pixels large so as not to cause stretching or breaking of your site template.

Now, to set up the thumbnail gallery in the second frame follow these instructions.

1. Select the second frame by clicking inside it and select the lower case "i" from the toolbar to insert a modular piece.

2. Select Advanced Gallery: from the first drop down. Select Image List from the second drop down and then hit Save.

3. You will then be sent to the Frame Type/Info screen to choose the settings for the thumbnail gallery portion of the page. Click on the folder for All Images and select the correct category for the thumbnail gallery. Most likely the same as the large image frame that you set up before.

4. Set the rows and columns. Perhaps two or three rows and five columns.  The more columns you have the wider your page becomes on your site and could cause issues with your site template.

5. Change the Navigation Location to Don't Show, and uncheck the next three checkboxes.

6. Change the next two drop downs to Among Other Fields and Under Field Title.

7. Change the redirect to Stay On Page.

8. Check the box next to the Image in the Custom Label column and erase the word Image. Check the box to the right of the Thumbnail drop down to enable the Link to Details feature. Uncheck all other fields in the Include/Link to Details column.

9. Click Save at the bottom.

The steps to creating a separate page for the thumbnail gallery and the Details View are very similar to creating them on the same page.

1.  You need to first Add Page for the Thumbnail Gallery to display on.  Then click inside the frame that you want the thumbnails to appear on.

2. Next click on the lower case "i" from the toolbar to insert a modular piece.

3. Select Advanced Gallery: from the first drop down. Select Image List from the second drop down and then hit Save.

4. You will then be sent to the Frame Type/Info screen to choose the settings for the thumbnail gallery. Click on the folder for All Images and select the correct category for the thumbnail gallery.

5. Set the rows and columns. Perhaps two or three rows and five columns.  The more columns you have the wider your page becomes on your site and could cause issues with your site template.

6. Change the Navigation Location to Don't Show, and uncheck the next three checkboxes.

7. Change the next two drop downs to Among Other Fields and Under Field Title.

8.  Set the Upon "Link to Details" Click to Redirect to Site Page.  A second drop down will appear giving you a list of pages to choose from.  The Advanced Gallery already has a details page available for you to use and that page will display in the drop down automatically as Image Details (m*_view_item.html).

You can choose to open the larger image in a new window if you wish or allow it to open in the same window.

9. Check the box next to the Image in the Custom Label column and erase the word Image. Check the box to the right of the Thumbnail drop down to enable the Link to Details feature. Uncheck all other fields in the Include/Link to Details column.

10. Click Save at the bottom.