Note: While our most popular guides have been translated into Spanish, some guides are only available in English.
Tremont Gallery Pages

Tremont, Carson, and Henson share the same underlying structure and functionality. This guide applies to all these templates.

The Gallery Page in Tremont, 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 the Gallery Page.

Layout

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 the Style Editor 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.

Style: Horizontal

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.

Style: Stacked

Images stack vertically, one image per row. All images display full-bleed. This creates a unified look and particularly highlights portrait-oriented images.

Style: Masonry

Images display in two columns. Mixing up images with different heights creates a staggered effect that gives it the look of a mosaic. 

Spacing

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.

Header

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.

Gallery overlay

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.

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.

Captions

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

Clickthrough URLs allow you to turn any image in the gallery into a link to an external page, internal page, or file.

Footer

Index galleries

Any Gallery Page in an Index will create a slide in the Index's landing page slideshow. The Gallery Page's thumbnail image creates the slide's background image.

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.

Mobile

Gallery images always stack vertically on smartphones. On larger devices, they follow the same layout as on desktop.

Other features

Note: To create different gallery layouts, create a Regular Page and modify it with a Gallery Block.

Next steps

Review our troubleshooting FAQ or see a list of all Style Editor tweaks.

Was this article helpful?
0 out of 0 found this helpful
Tremont Gallery Pages