Styling gallery pages in version 7.0

Tweak design elements on your version 7.0 gallery pages to customize your site.

You can adjust image size, change the design, and personalize your gallery page in the site styles panel.

This guide is for version 7.0. Version 7.1 uses gallery sections instead.

Gallery page display by template

Each template’s gallery page defaults to one of the following display styles:

• Slideshow - Displays one image or video at a time. Visitors can click to advance to the next slide, or you can set the gallery to autoplay. Autoplay slideshows pause on hover.
• Grid - Displays content in a grid. Adjust the aspect ratio, padding, and number of thumbnails per row in site styles.
• Stack - Displays content in a single column with one pixel of padding between each image or video.
• Carousel - Displays content in a horizontal row. Visitors can click to advance to the next slide, or you can set the gallery to autoplay.

Your gallery page's style depends on your template. Most templates use the standard gallery page, which displays as either a grid or slideshow. Other templates have template-specific gallery page with unique features, style tweaks, and layouts.

These template families use the standard gallery page:

• Adirondack
• Aviator
• Bedford
• Brine
• Farro
• Five
• Galapagos
• Native
• Pacific
• Skye
• York - Also supports a unique project page, which is similar to a gallery page.

These template families have unique gallery pages. See their template guides for more help:

• Avenue - Slideshow
• Flatiron - Stacked
• Forte - Carousel, with a lightbox slideshow.
• Ishimoto - Carousel
• Momentum - Slideshow, with a grid display option
• Montauk - Stacked
• Supply - Stacked
• Tremont - Stacked, masonry, or horizontal grid layouts
• Wells - Slideshow or grid
• Wexley - Grid, with a lightbox slideshow

Gallery pages in an index

You can add gallery pages to an index in these template families. Some galleries have special formatting when opened from the index. See their template guides for more help.

• Avenue - Stacked when opened from the index
• Brine - Gallery index sections display as a grid or slideshow
• Flatiron - Displays navigation elements when opened from the index
• Forte
• Momentum
• Montauk - Displays navigation elements when opened from an index, and banners don't display
• Pacific - Gallery index sections display as a grid or slideshow
• Supply
• Tremont - Index landing page slideshow appears at the bottom
• York

Style the standard gallery page

For templates that use the standard gallery page, follow the steps in this section. For templates with unique gallery pages, see their template guides.

Choose the layout

The standard gallery page supports two layouts. To set the layout style:

1. Open the gallery page.
2. Return to the Website panel, click Design, then click Site styles.
3. Scroll down to Gallery styles.
4. 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.

Style the slideshow layout

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 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. Autoplay slideshows pause on hover.
• Gallery loop - Enable a gallery to cycle through to the first slide after the last slide.
• Gallery autoplay speed (sec)

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 captions

For help styling the fonts for your image titles and descriptions, visit Styling image captions.

How captions display depends on your template. For templates with the standard gallery page:

• Slideshow - Text can hide, display when hovering over an image, or always display, depending on how you set the Gallery info overlay tweak
• Grid - Text displays when hovering over an image in lightbox view
• Text never displays for videos

Here's how image titles and descriptions appear on the unique gallery pages in these template families:

Template family	Notes
Avenue	Text only displays when the gallery page is part of an index.
Flatiron	Text never displays.
Forte	Text always displays.
Ishimoto	Text can be hidden or always display.
Momentum	Text always displays when clicking the "i" icon.
Montauk	Text always displays.
Supply	Text displays for images in an overlay when you click the + icon on hover. Text never displays for videos.
Tremont	Choose from Captions display: on hover or always. On hover, captions appear when you hover over the circle icon in the bottom-right corner. In the stacked layout, you can display Captions below image. Choose Captions display: always to enable this tweak.
Wells	Text always displays.
Wexley	Image titles display on hover. Use the Enable thumbnail hover tweak to show or hide the titles. Image titles never display in the lightbox or on mobile. Image descriptions never display.
York	York has the standard gallery page. For the project page, text displays beside or below images, depending on their orientation.

Add special links

Some gallery pages support ways of linking to and from your images.

• Deeplink URLs are customizable URLs assigned to each image, so that you can send visitors directly to any image within a gallery page.
• Clickthrough URLs turn images into links to external pages, internal pages, or files.

Tip: Clickthrough URLs disable lightboxes. Adirondack only supports deeplink URLs and clickthrough URLs in slideshow view.

Keyboard navigation

Most templates support using keyboard arrows to navigate through images. You may need to click the page before the keyboard navigation works.

The standard gallery page supports keyboard navigation in the Slideshow layout, but not when an image is opened in a lightbox from the Grid layout.

All unique gallery pages support keyboard navigation (slideshow, carousel, and lightbox views).

Autoplaying galleries

You can transition between images automatically in some templates, so viewers don’t have to click through to the next image.

If your template has an autoplay function, you’ll find this option in site styles. For example, in templates that use the standard gallery page, check the Gallery autoplay tweak.

Note: If your gallery includes a video, the automatic scrolling stops it from playing the whole way through. To prevent your video from being cut off, upload a featured image to enable the image overlay.

Mobile display

All Squarespace templates have built-in responsive design to ensure your gallery pages look great on any device. To preview your gallery page on mobile devices, use device view.

For more information, visit How will my site appear on mobile devices?

More style options

To create a different look than what's available in your template's gallery page, you can try a few alternatives:

• Use a gallery block on a layout page for more design flexibility. To set this up, follow these steps.
• Use a summary block on a layout page to filter specific gallery content with more design flexibility.
• Switch to a new template with a different gallery page design.

You can also create multiple galleries with different display styles by using a combination of gallery pages and layout pages with gallery blocks.