Dynamic Thumbnail Grids

​​Dynamic Grids Example

Dynamic Thumbnail Grids are great for showing a mosaic of multiple photographs on a gallery of photos or even the homepage. This format allows the display of dynamically resized thumbnails that maintain their original aspect ratio.

These thumbnails not only provide access to groups, galleries, and photo pages, but may display titles, buy buttons, and social media options within the thumbnail area.

Please click on these links to navigate directly to the customization options for the Dynamic Thumbnail Grids for these page types.

You may also be interested in this section:  

Customize a Gallery Thumbnails Page

All modifications are made through Customize Website View. Main page changes are made in Layout and Options while more detailed style changes occur in the Theme Designer
 
  1. ​Login in to your Zenfolio account then go to Photos using the menu across the the top of the page.
  2. Select the desired gallery under the Organizer.
  3. Hover your mouse pointer over Preview then click Customize.
Open Gallery in Customize Visitor View

The page will refresh with a new customization menu at the top, confirming that you are in the Customize Website View.
 

You can find the available options for configuring the Dynamic Grid Thumbnails in the Options panel.
  1. Go to Options.
  2. Uncheck Use Default Settings for Layout, Theme, and Options (if necessary).
  3. Go to the Grid Options tab.
  4. Choose Grid Style A, B or C.  Grid Style D will display the thumbnails in the classic layout without dynamic thumbnails.
    Depending on which style you select, different grid options will appear.
  5. Choose from various settings to configure the Dynamic Grid Layout
    -  The Minimum Height/Width controls the size of the thumbnails
    -  The Inner Cell Padding controls the size of the space between the thumbnail image and its border
    -  The Spacing between cells sets the amount of space between each of the thumbnails
  6. Next to Margins around grid, enter in the spacing you would like for the space around the top, bottom, left, and right of all the Dynamic Thumbnails.
  7. Click Apply to close the Options panel or skip step 2 in the instructions below.
Gallery Grids Grid Options tab



Information that will appear in or around thumbnail are also defined under Options. 

  1. Stay in the Options panel or go to Options if you've already closed the Options panel.
  2. Uncheck Use Default Settings for Layout, Theme, and Options (if necessary)
  3. Go to the Thumbnails tab.
  4. Choose a text & button placement from the drop down menu.
  5. Choose to display the image Titles and choose the desired Text alignment.  Also use the Buy button drop down menu to choose to display the Buy button near the thumbnails.
  6. Check the box to display the interactive social media icons on the thumbnail grids. You can also choose to show or hide other detail information for the photo or video.  
  7. Click Apply to close the Options panel.
  8. Click Publish to apply the changes to your live site and exit this mode.
Gallery Grids Thumbnails tab

If you wish for your changes to be the default for all other galleries, click Save as Default and confirm your selection before Publishing the changes.  See this guide for more details on Saving as Default.

Note: For any style changes to the thumbnails that make up your gallery grid, including fonts, colors and buttons, you will need to access the Theme Designer.



Customize a Home Page with Photo Grid 

​Just as you can display thumbnails in a Dynamic Grid Layout in your galleries, you can also display the thumbnails on your home page in the same way.

Some of the homepage layouts allow for the option to display thumbnails in the dynamic grid layout below the content area of the home page, while a few specifically focus on spotlighting a photo grid.

All modifications to the homepage occur in Customize Website View. Main page changes occur in Page Layout and Page Options while more detailed style changes occur in the Theme Designer.

In the Dashboard, hover your mouse pointer over Website then click on Customize Website.

Website to Customize Website View

The page will refresh with a new customization menu at the top, confirming that you are in the Customize Website View.

Dynamic grids can only be applied to the homepage when there are thumbnails displayed on the homepage.  The layouts that allow thumbnails to be displayed are the Full Screen with Photo Grid layouts, Classic Layouts and the Directory Layouts.

Here are the steps for applying a different layout.

  1. In Customize Website View, go to Layout.
  2. Choose a Layout that contains thumbnails (Full Screen with Photo Grid layouts, Classic Layouts or the Directory Layouts).
  3. Click Apply.​

Homepage Grids Page Layout



Once a photo grid layout is selected, you will need to choose the gallery to display in the Grid and choose the settings to apply to the dynamic grid.

  1. While in Customize Website View, go to Options.
  2. Go to the Grid Options tab.
  3. Next to Selected content, click Select to display the list of galleries in your account.
  4. Select the gallery that contains the images you would like to display in the grid then click Select.
  5. Choose the desired action that occurs When thumbnails are clicked using the drop down menu.
  6. Choose a Grid Style. Depending on which style you select, different grid options will appear.
  7. Choose from various settings to configure the Dynamic Grid Layout
    -  The Minimum Height/Width controls the size of the thumbnails
    -  The Inner Cell Padding controls the size of the space between the thumbnail image and its border
    -  The Spacing between cells sets the amount of space between each of the thumbnails
  8. Next to Margins around grid, enter in the spacing you would like for the space around the top, bottom, left, and right of all the Dynamic Thumbnails.
  9. Click Apply to close the Options panel or skip step 2 in the instructions below.
Homepage Grids Grid Options


Information that will appear in or around the thumbnails are also defined under Options.
  1. Stay in the Options panel or go to Options if you've already closed the Options panel.
  2. Go to the Thumbnails tab.
  3. Choose a text & button placement.
  4. Choose to display the image Title and the choose the desired Text Alignment.  Also use the Buy button drop down menu to choose to display the Buy button around the thumbnail.
  5. Check the appropriate boxes box to display the desired interactive social media icons on the thumbnail grids. You can also choose to show or hide other detail information for the photo or video.  
  6. Click Apply to close the Options panel.
  7. Click Publish before exiting Customize Website View to make those changes live on your site.
Homepage Grids Thumbnails Tab

Note: For any style changes to the thumbnails that make up your gallery grid, including fonts, colors and buttons, you will need to access the Theme Designer




Customize a Group Page

Just as you can display thumbnails in a Dynamic Grid Layout in your galleries, you can also display the thumbnails on your group pages in a Dynamic Grid.

To display the thumbnails in a Group page using a Dynamic Grid, you'll need to open the group page in Customize Website View. 

  1. ​Login in to your Zenfolio account then go to Photos.
  2. Select the desired group under the Organizer.
  3. Hover your mouse pointer over Preview then click Customize.

Group to Customize Visitor View

The page will refresh with a new customization menu at the top, confirming that you are in the Customize Website View.


You can find the available options for configuring the Dynamic Grid Thumbnails in the Options panel.
  1. Go to Options.
  2. Uncheck Use Default Settings for Layout, Theme, and Options (if necessary).
  3. Go to the Grid Options tab.
  4. Choose Grid Style A, B or C.  Grid Style D will display the thumbnails in the classic layout without dynamic thumbnails.
    Depending on which style you select, different grid options will appear.
  5. Choose from various settings to configure the Dynamic Grid Layout
    -  The Minimum Height/Width controls the size of the thumbnails
    -  The Inner Cell Padding controls the size of the space between the thumbnail image and its border
    -  The Spacing between cells sets the amount of space between each of the thumbnails
  6. Next to Margins around grid, enter in the spacing you would like for the space around the top, bottom, left, and right of all the Dynamic Thumbnails.
  7. Click Apply to close the Options panel or skip step 2 in the instructions below.
Group Grids Grid Options


Information that will appear in or around thumbnail are also defined under Options.
  1. Stay in the Options panel or go to Options if you've already closed the Options panel.
  2. Uncheck Use Default Settings for Layout, Theme, and Options (if necessary)
  3. Go to the Thumbnails tab.
  4. Choose a text & button placement from the drop down menu.
  5. Choose to display the image Titles and choose the desired Text alignment.
  6. Check the box to display the interactive social media icons on the thumbnail grids.
  7. Mark the circles to choose to show or hide other detail information for the photo or video.  
  8. Click Apply to close the Options panel.
  9. Click Publish to apply the changes to your live site and exit this mode.
Group Grids Thumbnails Tab
If you wish for your changes to be the default for all other groups, click Save as Default and confirm your selection before Publishing the changes.  See this guide for more details on Saving as Default.

Note: For any style changes to the thumbnails that make up your gallery grid, including text and buttons, you will need to access Theme Designer

 

Watermarks in Dynamic Grids

The built in watermarking feature is exclusively available to Pro and Advanced plan subscribers.

When images are uploaded to Zenfolio, smaller lower resolution display images are generated. These display images are the images displayed on your site.

This is done to prevent theft of your originally uploaded full resolution images and it also help to ensure that your images will always load with minimal loading delay.

When the built in watermarking feature is used to add watermarks to images, the watermarks are added only to the display images that are 400 pixels wide and up.

The display images that are 200 pixels wide and less are considered thumbnail images and the watermark is not added to those images.

When the images are displayed in a Dynamic Grid (Grid Layouts A, B and C), the display images that contain the watermarks will be displayed in the thumbnails page when the the grid is set to display images that are larger than 200 pixels wide.

If set to display smaller images, the thumbnail sized display images (which do not have the watermark) will be displayed instead.

When using Thumbnail Grid Layout D, the thumbnail sized display images are always displayed which means that the watermark will not be displayed.