Tremont, Camino, Carson, and Henson share the same underlying structure and functionality. This guide applies to all these templates.
The Gallery Page in Tremont, Camino, Carson, and Henson displays your images and videos in a unique full-page grid format. Choose from three distinct layouts, and add a customizable overlay color to set your galleries apart from other pages on your site.
Note: To set up your gallery and add images, visit Using Gallery Pages.
The Gallery Page displays full-bleed, meaning at the width and height of the browser, minus the Outer Padding tweak.
Use the Style tweak in the Gallery Layout Options section of Site Styles to choose the layout style. If you have multiple Gallery Pages on your site, they all follow the same style.
Tip: Narrow images may appear pixelated when they stretch to fill the browser. For best results, use images that are 2500 pixels wide. See our image formatting recommendations for more help.
Images display two to a row.
Note: When Landscape Full-width When First is checked, landscape (wider) images display full-bleed except in rows that start with a portrait (taller) image.
Images stack vertically, one image per row. All images display full-bleed. This creates a unified look and particularly highlights portrait-oriented images.
Images display in two columns. Mixing up images with different heights creates a staggered effect that gives it the look of a mosaic.
For any layout style, use the Spacing tweak to add or reduce space between each image.
Tip: You can add space around your whole site with the Outer Padding tweak.
The header's branding and links display over the top image or images in your gallery.
- The header takes the same style on the Index landing page as on the rest of your site.
- As on other pages, when you scroll down, the header disappears.
- The header alternate colors don't ever display on the Gallery Page.
- The Gallery Page doesn't support a banner.
You can choose to add an overlay color, page title, and description to your Gallery Page. Adjust the page title and description in the Gallery's page settings.
- The overlay disappears when you scroll down, or on click.
- The overlay reappears when you scroll back to the top of the page.
Use the Gallery Overlay section to style the overlay:
- Use the Show Gallery Overlay tweak to choose whether the overlay displays on Gallery Pages in or outside an Index.
- Overlay Color - Style the overlay colors and blend modes.
- Text - Use the Gallery Overlay Typography and Gallery Overlay Options sections to style the title and description text, or to hide either one. You can set the maximum and minimum sizes for the title and description, and set the Max Width for different browser sizes.
Note: The overlay on Gallery Pages is styled independently from the page overlay and Index overlay.
The image title and description text can display over each image in your gallery. In the Stacked layout, they can display below the images.
Use the tweaks in the Gallery Caption Typography section to style the text, including:
- Image Title Font
- Image Title Color
- Image Title Background - Add a background color behind the image title.
- Image Description Font
- Image Description Color
Use the tweaks in the Gallery Caption Options sections to set the caption display settings, including:
- Captions Position - Display the captions in the left, bottom-left, center, or bottom-center.
- Captions Overlay Color - Add a color filter to the image behind the text. Use the Captions Overlay Opacity to adjust the transparency of the overlay color. The overlay has blend mode options.
- Set the Captions Width for different browser sizes.
- You can set the captions' minimum and maximum size.
- Captions Below Image - Display the captions on the page below the image. This is only available with Style: Stacked and Captions Display: Always.
- Captions Display - Display the captions either Always or On Hover.
- Caption Indicator Color - Set the color of the circle you hover over to display captions when Captions Display: On Hover is selected.
Tip: Long captions crop at the top and bottom to fit over the image. If you have longer captions, we suggest setting captions to display below the image instead.
Clickthrough URLs turn any image in the gallery into a link to an external page, internal page, or file.
- The same footer displays at the bottom of your Gallery Pages as the rest of your site.
- For pages within an Index, the Index landing page displays below the footer.
When a visitor opens a Gallery Page that's in an Index, the page loads normally. However, when they scroll to the bottom, the Index landing page slideshow appears.
Note: Use the Show Gallery Overlay tweak to choose whether your Gallery Page overlay displays when a gallery is in an Index, outside an Index, neither, or both.
Gallery images always stack vertically on smartphones. On larger devices, they follow the same layout as on desktop.
- Tremont, Camino, Carson, and Henson don't support deeplink URLs or lightbox functionality.
- For general information about styling your site, visit Structure and style.
Note: To create different gallery layouts, create a Layout Page and modify it with a Gallery Block.