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

You can adjust image size, change the design, and personalize your Gallery Page in the Style Editor.

Gallery Page display

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 the Style Editor.
  • 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 slideshow/grid Gallery Page. In these templates, you can set the format with the Gallery Design tweak, and use additional tweaks to style it further.
  • 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 styling information.

Gallery display by template

Here’s how Gallery Pages display for each template. Templates are grouped by family.

Adirondack Standard slideshow/grid
Avenue Slideshow only
Aviator, Aubrey, Encore Standard slideshow/grid
Bedford, Anya, Bryant, Hayden Standard slideshow/grid
Brine, Aria, Basil, Burke, Cacao, Clay, Ethan, Fairfield, Feed, Foster, Greenwich, Hatch, Heights, Hunter, Hyde, Jaunt, Juke, Keene, Lincoln, Maple, Margot, Marta, Mentor, Mercer, Miller, Mojave, Moksha, Motto, Nueva, Polaris, Rally, Rover, Sofia, Sonny, Sonora, Thorne, Wav, West Standard slideshow/grid
Farro, Haute Standard slideshow/grid
Five Standard slideshow/grid
Flatiron Stacked only
Forte Carousel by default. Click the + on any image to open a lightbox slideshow.
Galapagos Standard slideshow/grid
Ishimoto Carousel only

Marquee, Adversary, Alex, Eamon, Ginger, Mint, Shift 

(Discontinued)

Standard slideshow/grid
Momentum

Slideshow by default. Click the grid button to open a Grid display.

Montauk, Julia, Kent, Om Stacked only
Native Standard slideshow/grid
Pacific, Charlotte, Fulton, Horizon, Naomi Standard slideshow/grid
Skye, Foundry, Indigo, Ready, Tudor Standard slideshow/grid
Supply Stacked only
Tremont, Camino, Carson, Henson Stacked, masonry, or horizontal grid layouts
Wells Slideshow or grid (Enable Gallery Thumbnails in the Style Editor)
Wexley Grid by default. Click any image to open a lightbox slideshow.
York, Artesia, Flores, Harris, Jasper, Jones, Lange, Shibori

Standard slideshow/grid

These templates also support a custom gallery view called the Project Page.

Gallery Pages within an Index

The following templates support adding Gallery Pages to an Index. Templates are grouped by family.

Note: Some Gallery Pages display differently when added to an Index Page. For example, a Gallery Page set to a slideshow may appear stacked when opened from an Index Page.

Responsive design and Gallery Page 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?

Autoplaying galleries

Some templates allow you to automatically transition between images using an autoplay function. This option creates horizontal auto-scrolling so viewers don’t have to click through to the next image.

If your template offers an autoplay function for the Gallery Page, you’ll find this option in the Style Editor. For example, in templates that use the standard slideshow/grid Gallery Page:

  1. Open the Gallery Page.
  2. Double-click Pages at the top of the panel to return to the Home Menu.
  3. Click Design.
  4. Click Style Editor.
  5. Scroll down to Gallery Styles.
  6. Check Gallery Autoplay.
Note: If your gallery includes a video, using autoplay prevents it from playing the whole way through. To prevent your video from being cut off, upload a Thumbnail Image to enable the image overlay.

Standard slideshow/grid galleries

To style a standard slideshow/grid Gallery Page:

  1. Open the Gallery Page.
  2. From the Home Menu, click Design, then Style Editor
  3. Scroll down to Gallery Styles.
  4. Use the Gallery Design tweak to choose either Slideshow or Grid.

Different tweaks appear depending on which format you choose. 

These tweaks are available when Gallery Design is set to Grid:

  • Aspect Ratio - Controls the aspect ratio (width:height) for the gallery active slide. If the aspect ratio is set 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.
  • Lightbox Style: Dark, Light

These tweaks are available when Gallery Design is set to Slideshow:

  • Gallery Navigation: Thumbnails, Bullets, Numbers, Circles, Simple, None - The type of navigation provided on the page.
  • Gallery Info Overlay: Always Show, Show on Hover, Hide - The type of display used for image titles and captions.
  • Gallery Aspect Ratio - Controls the aspect ratio (width:height) for the gallery active slide. Use with the Gallery Auto Crop tweak. Not available with the Marquee, Adversary, Alex, Eamon, Ginger, Mint, and Shift templates (discontinued).
  • Gallery Arrow Style: Round Corners, Rectangular, Circular, No Background - Style the arrows used to cycle through the slides.
  • Gallery Transitions: Fade, Scroll. Not available with the Marquee, Adversary, Alex, Eamon, Ginger, Mint, and Shift templates (discontinued).
  • Gallery Show Arrows - Uncheck to hide arrows on your gallery display
  • Gallery Auto Crop - Auto-crops images to the aspect ratio set with the Gallery Aspect Ratio tweak.
  • 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)  
  • Gallery Thumbnail Size - Control the height of thumbnail images when used for gallery navigation.
  • Gallery Arrow Background  
  • Gallery Arrow Color  
  • Gallery Circle Color  
  • Gallery Info Background - The color used as the background for the image titles and captions.
Note: If you have multiple Gallery Pages on your site, these tweaks affect all of them. 

Special links

The standard slideshow/grid Gallery Page supports deeplink and clickthrough URLs.

  • 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 deeplink 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.

Template-specific galleries

Every template family that doesn't use the standard slideshow/grid format has a unique gallery with its own style options. For information about your template's gallery, visit its template guide.

Captions

For templates with the standard slideshow/grid Gallery Page:

  • Slideshow - Text can hide, display when hovering over an image, or always display.
  • Grid - Text will display when hovering over an image in lightbox view.
  • Text never displays for videos.

Here’s how image titles and descriptions appear for each template-specific Gallery Page. Templates are grouped by family.

Tip: For information about styling caption fonts, visit Styling image captions.

Avenue

Text will only display when the Gallery Page is part of an Index.

Flatiron

Text will never display.

Forte

Text will always display.

Ishimoto

Text can be hidden or always display.

Momentum

Text will always display when clicking the "i" icon.

Montauk, Julia, Kent, Om

Text will always display.

Supply

Text displays for image in an overlay when you click the + icon that appears on hover.

Text never displays for videos.

Tremont, Camino, Carson, Henson

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 will always display.

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, Artesia, Flores, Harris, Jasper, Jones, Lange, Shibori

York has the standard slideshow/grid Gallery Page.

For the Project Page, text can display on the page beside or below images, depending on their orientation. Learn more.

Keyboard navigation

Most templates support using keyboard arrows to navigate through images.

For the standard slideshow/grid Gallery Page:

  • Slideshow view - Supported
  • Lightbox - Not supported

For all template-specific Gallery Pages that have slideshow, carousel, and lightbox views, keyboard navigation is supported.

Tip: You may need to click the page before the keyboard navigation works.

More style options

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

You can also create multiple galleries with different display styles by using a combination of Gallery Pages and Regular Pages with Gallery Blocks.

 

Next step

Organize your Gallery Page by arranging the content and adding tags and categories.

Was this article helpful?
26 out of 71 found this helpful
Styling a Gallery Page