Most templates use the standard Gallery Page, a versatile option for displaying a variety of images and videos on one page. In the standard Gallery Page:
- You can set the format to slideshow or grid.
- Grid view supports a lightbox.
- Captions display.
This guide explains how to style your Gallery Pages to showcase your content.
This guide is for version 7.0. Version 7.1 uses gallery sections instead.
These template families support the standard Gallery Page:
- York - The York family also supports a unique custom gallery called a Project Page.
All other templates have template-specific Gallery Pages with unique features, style tweaks, and layouts. If your template has a unique gallery, visit your template's guide for more help.
Choose the layout
The standard Gallery Page supports two layouts. To set the layout style:
- Open the Gallery Page.
- In the Home Menu, click Design, then Site Styles.
- Scroll down to Gallery Styles.
- Use the Gallery Design tweak to choose either Slideshow or Grid.
Tip: This sets the layout for all Gallery Pages on your site. To create galleries with different layouts, use a Gallery Block.
The slideshow layout displays one image or video at a time. It can include navigation elements like the arrow and thumbnails in the example below, and you can set it to autoplay.
The grid layout arranges all images and videos on one page. You can set the aspect ratio, padding, and number of thumbnails per row. When a visitor clicks an image, it opens in a lightbox, where captions display on hover.
Style the grid layout
The following tweaks appear in the Gallery Styles section when Gallery Design is set to Grid.
Choose the shape and size of the images:
- Aspect Ratio - Set the aspect ratio (width:height) of the images. If you set the aspect ratio to Auto, images rearrange to create the best fit on the page. They may display in a different order than how they were uploaded.
- Grid Spacing - Increase the padding between individual images in your grid.
- Min Column Width - Set the width of columns in your grid.
Style the lightbox:
- Lightbox Style: Dark, Light
Style the slideshow layout
The following tweaks appear in the Gallery Styles section when Gallery Design is set to Slideshow.
Style or hide the navigation:
- Gallery Navigation - Choose the type of navigation (thumbnails, bullets, numbers, circles, simple). Choose None to hide the navigation.
- Gallery Arrow Style - Style the arrows used to cycle through the slides (round corners, rectangular, circular, no background).
- Gallery Show Arrows - Uncheck to hide arrows on your gallery display.
- Gallery Thumbnail Size - Set the height of the thumbnail image navigation.
- Gallery Arrow Background
- Gallery Arrow Color
- Gallery Circle Color
Choose the shape of the images:
- Gallery Aspect Ratio - Set the aspect ratio (width:height). Use with the Gallery Auto Crop tweak.
- Gallery Auto Crop - Auto-crops images to the aspect ratio set with the Gallery Aspect Ratio tweak.
Set how captions display:
- Gallery Info Overlay: Always Show, Show on Hover, Hide - The type of display used for image titles and captions.
- Gallery Info Background - The color used as the background for the image titles and captions.
Choose how images transition within the slideshow:
- Gallery Transitions: Fade, Scroll
- Gallery Autoplay - Cycle gallery images automatically without user interaction.
- Gallery Loop - Enable a gallery to cycle through to the first slide after the last slide.
- Gallery Autoplay Speed (sec)
Tip: Autoplay slideshows pause on hover.
How image titles and descriptions appear depends on your layout:
- Slideshow - Use the Gallery Info Overlay tweak to choose how captions display. You can hide them, display them when hovering over an image, or always display them.
- Grid - Captions always display when hovering over an image in lightbox view.
For help styling the captions' fonts and colors, visit Styling image captions.
Tip: Captions never display for videos.
Add special links
The standard Gallery Page supports clickthrough and deeplink URLs in both grid and slideshow views.
- Deeplink URLs are individual URLs assigned to each image, so that you can send visitors directly to any image within a Gallery Page. You can customize the URL for each image.
- Clickthrough URLs allow you to turn any image in a gallery into a link to external pages, internal pages, or files. In grid format, clickthrough URLs disable the lightbox feature.
Note: Adirondack only supports deeplink URLs and clickthrough URLs in slideshow view.