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

Use Gallery Blocks to add galleries of images and videos to pages and blog posts in a variety of layouts. You can upload images, embed videos, license stock images, or display content from an existing Gallery Page.

To learn how to set up Gallery Blocks on your site, follow the steps in this guide. For common questions, visit Gallery Blocks FAQ.

In version 7.1, you can only add Gallery Blocks to blog posts, product items, and individual events. To add galleries to pages, use gallery sections.

Watch a video

Add a Gallery Block

To add a Gallery Block:

  1. Edit a page or post, click an insert point, and select Text from the menu. For help, visit Adding blocks.
  2. Under Gallery, select SlideshowCarouselGrid, or Stack.

Gallery Block options in the block menu.

  1. Use the Content tab to add images and videos.
  2. Use the Design tab to change the layout and customize the design.
  3. Click Apply to save your changes.
  1. Tap the Pages icon.
  2. Tap the title of the page you want to edit.
  3. Tap Edit or the pencil icon in the top-right corner.
  4. Tap the + icon in the top-right corner to open the block menu.
  5. Under Gallery, tap SlideshowCarouselGrid, or Stack.
  6. Use the Upload or Existing tab to add images and videos.
  7. Use the Show as tab to change the layout and customize the design.
  8. Tap Done or to save your changes.

Add images and video

In the Content tab of the Gallery Block editor, you can upload images, add stock images, embed videos, or display content from an existing Gallery Page. You can also a reuse a stock or uploaded image from other areas of your site.

To learn more about our best practices for image uploads, visit Formatting your images for display on the web or view our All About Images video series.

Limitations

  • You can add up to 250 images and videos.
  • The more content you add, the slower the page will load. This is especially true in mobile devices with limited processing power. To decrease page size, you can always create multiple galleries on multiple pages.

Option 1 - Add your own images

In the Gallery Block editor, drag multiple images into the image uploader. You can also click the image uploader to open a file selection menu.

Option 2 - Add stock images

Click the + icon in the bottom-right corner, then click Search Images. Depending on your browser size, you might need to scroll down to see the + icon.

To learn more, visit Searching and adding stock images.

Option 3 - Add videos

You can embed videos from hosting services. Videos can't be uploaded directly. We currently support direct URLs from YouTube, Vimeo, Wistia, and Animoto. For other services, use embed codes. To learn more, visit Choosing the right video embed option.

To add a video:

  1. Click the + icon in the bottom-right corner, then click Video.
  2. In the Edit Video window, paste the video's URL in the Enter an embeddable URL here box. You can also click the </> icon and paste the video's embed code in the Embed Data window that appears.
  3. You can add a custom thumbnail image to display over your video before a visitor plays it. Some videos have an image that the Gallery Block uploads, but you can remove this image and upload a new one.
  4. To use the custom thumbnail, check Use Thumbnail.
  5. When you're finished, click Save.

Option 4 - Use existing gallery

Gallery Blocks can display images and videos you've added to an existing Gallery Page.

To display content from a Gallery Page, click Use Existing Gallery, then select the Gallery Page to use.

Option 1 - Add your own images

To add images to Gallery Blocks:

  1. In the Upload tab of the block editor, tap Content.
  2. Tap the + icon.
  3. Choose an image:
    • Take a new photo - Tap Take photo or Camera.
    • Choose an image from your device - Tap Photo library or Files.
    • Choose an image from iCloud - Tap Insert from...
  4. Tap images to add titles, descriptions, and clickthrough URLs.
Note: It's not currently possible to search stock images or add videos to Gallery Blocks in the app. To do so, use a computer instead.

Option 2 - Use existing gallery

To use an existing Gallery Page on your site:

  1. Tap the Existing tab in the block editor.
  2. Tap My Galleries.
  3. Tap the Gallery Page you want to use.

To add image titles, descriptions, and clickthrough URLs, edit the images through the Gallery Page.

Gallery Block layouts

Here are examples of each Gallery Block layout. On computers, you can change the layout in the Design tab of the Gallery Block. In the Squarespace app, tap Show as to change the layout.

Slideshow Gallery Blocks display items in a slideshow format. Visitors can click through items, or the slideshow can play automatically. One item displays at a time.

Slideshow Gallery Block example.

Carousel Gallery Blocks display items in a horizontal strip. Visitors can click through items, or the carousel can scroll automatically. The number of items that display at a time depends on the size of the block.

Carousel Gallery Block example.

Grid Gallery Blocks display items in an even grid. Items with uneven lengths have space between them.

Grid Gallery Block example.

Stack Gallery Blocks display items in a single column with one pixel of space between items. Items span the full width of the block. This layout is less customizable and doesn't have aspect ratio options or navigation controls.

Stack Gallery Block example.

Customize the design

You can customize the design and behavior of Gallery Blocks. On computers, click the Design tab in the block editor to make these changes. In the Squarespace App, tap Show as. Your options depend on the layout.

Here are the design options for Slideshow Gallery Blocks:

Design option Use this to
Automatically Transition Between Slides

Make the slideshow automatically switch to the next image or video after a set period of time. When checked, a slider appears for setting the transition time between one and 10 seconds.

Playing a video overrides this setting. If a visitor plays a video, they'll need to click the next arrow to see the next item in the gallery.

Show Next and Previous Controls

Add arrows for navigation. The controls appear as overlays to the left and right of the main image or video. When unchecked, visitors can click to advance the slideshow, unless the images use clickthrough URLs.

If your gallery contains videos and Automatically Transition Between Slides is checked, we recommend checking this setting.

Automatically Crop Images

Crop or resize the images for the best design.

When unchecked:

  • The widest image or video spans the full width of the block. Its height is resized to preserve its aspect ratio.
  • All other images and videos are resized to have the same height as the widest image or video.
  • Aspect ratios are preserved.
When checked:
  • The widest image or video spans the full width of the block. Its aspect ratio is preserved with its height.
  • All the other images and videos are resized to have the same width and height as the widest image or video.
Show Thumbnails

Add a strip with thumbnails of all images and videos in the gallery below the main image.

When checked, sliders appear to set the thumbnail strip height and the distance between the thumbnail strip and the main image.

Show Title and Description

Display image titles and descriptions as set in each image's settings.

When checked, more options appear to set the location and to only display them on hover.

Transparent Background Remove the gray color behind images that aren't cropped. This option only appears when Automatically Crop Images is unchecked.
Open Links in New Window Open clickthrough URLs in new tabs when clicked.

Slideshow height

The height of Slideshow Gallery Blocks is set by the height of the widest image. The block considers the widest image to be the one with the widest aspect ratio.

Here's an example of two images you might upload to the Gallery Block. One has a greater width-to-height ratio, and the other is wider in pixels:

Comparison of images with different width-to-height ratios.

The image with the greater width-to-height ratio sets the height of the block:

The image with the greater width-to-height ration setting the height of the Slideshow Gallery Block.

To set the height of the gallery, ensure the image with the widest aspect ratio has the height you want. For example, to reduce the height of the whole gallery, crop the image with the widest aspect ratio.

Here are some more tips for adjusting the height:

  • To help predict your gallery's height and keep your image sizes consistent, consider using a third-party image editor to crop images to the same aspect ratio before uploading.
  • For stock images or images you've already uploaded, crop them using the built-in Image Editor.
  • Choose whether all images in the slideshow display at the same aspect ratio by checking Automatically Crop Images in the Design tab. 
  • To learn more about aspect ratios, visit Understanding aspect ratios.

Here are the design options for Carousel Gallery Blocks:

Design option Use this to
Automatically Transition Between Slides

Make the gallery switch to the next item automatically after a specified time (between one and 10 seconds).

Playing a video overrides this setting. If a visitor plays a video, they'll need to click the arrow to see the next item in the gallery.

Show Next and Previous Controls

Add arrows for navigation. The controls appear in overlays to the left and right of the main item.

If your gallery has videos and Automatically Transition Between Slides is checked, we recommend checking this setting.

Open Links in New Window Have clickthrough URLs open in new tabs.

Here are the design options for Grid Gallery Blocks:

Design option Use this to
Aspect Ratio Change the shape of the images and videos. By default, 1:1 Square is selected.
Crop Images

Remove padding and display images and videos in the selected aspect ratio.

When unchecked, the height of each row is standardized based on the tallest image or video. Depending on the aspect ratio selected, you may see inconsistent spacing, especially if the grid is set to one thumbnail per row.

Show Title

Display titles below images.

When images are opened in a lightbox, titles and descriptions appear on hover.

Thumbnails Per Row Set the number of thumbnails in a row. Increasing the number decreases the size of each thumbnail.
Padding Changing the padding/margins between each image or video. Moving the slider to 0 removes the padding.
Lightbox

When checked, clicking an image or video will display in a slideshow lightbox with a black or white background. Clickthrough URLs will be disabled.

Use the Lightbox Theme drop-down to choose if the lightbox background is black or white.

Open Links in New Window Open clickthrough URLs in new tabs when clicked.

Here are the design options for Stack Gallery Blocks:

Design option Use this to
Show Title and Description

Display titles and descriptions below each image or video.

Open Links in New Window Open clickthrough URLs in new tabs when clicked.

Add image titles and descriptions

Titles and descriptions display in Slideshow, Grid, and Stack Gallery Blocks only. Each image title acts as alt text, which can help your site's SEO and accessibility.

To add a title and description to an image or video:

  1. Hover over an image or video in the Gallery Block editor or in the existing Gallery Page.
  2. Click the gear icon.
  3. Enter a title and description. We recommend using short terms that describe the image and relate to your overall site content.
  1. Tap the Content tab.
  2. Tap an image.
  3. Enter a title and description. We recommend using short terms that describe the image and relate to your overall site content. 
Tip: If the images in the Gallery Block are from an existing Gallery Page, the image titles and descriptions from the Gallery Page automatically appear in the Gallery Block.

The behavior and appearance of text depends on the Gallery Block layout:

  • Slideshow - Titles and descriptions can display constantly or on hover. Set the position in the block's Design tab. In smaller browsers and on mobile devices, titles and descriptions may not display.
  • Carousel - Titles and descriptions don't display.
  • Grid - Titles display below images. Titles and descriptions display on hover when images are opened in a lightbox, but don't display for videos opened in a lightbox.
  • Stack - Titles and descriptions display below images.
Tip: The caption style depends on the Gallery Block design and your template. To learn more, visit Styling image captions.

Add clickthrough URLs

Use clickthrough URLs to link images to external pages, internal content, or files. This is a great way to encourage clicks to other content, like client projects, products, or blog posts. Clickthrough URLs work with images, but they don’t work with videos.

To add a clickthrough URL:

  1. Hover over an image or video in the Gallery Block editor or in the existing Gallery Page.
  2. Click the gear icon.
  3. Set up the link in the Click to add URL... box. For detailed steps visit Using clickthrough URLs.
  4. Check or uncheck Open Links in New Window in the Design tab to control how your links appear.
  1. Tap the Content tab.
  2. Tap an image.
  3. Tap Image Link.
  4. Use the tabs to link to a page on your site, an external website, an email address, an uploaded file, or a phone number.
  5. Tap the arrow in the top-left corner, then tap Save.

Gallery Blocks have some limitations for clickthrough URLs:

  • In Slideshow Gallery Blocks, clickthrough URLs override click navigation. If you use clickthrough URLs and the Slideshow design, we recommend checking Show Next and Previous Controls in the Design tab of the block editor.
  • In Grid Gallery Blocks, clickthrough URLs aren't supported when Lightbox is checked.

Crop or resize images (computer only)

You can resize or crop Gallery Blocks in a variety of ways. Your options depend on the layout.

  • To automatically crop images to the same aspect ratio, check Crop images in the Design tab.
  • To change the size of all images, adjust the number of thumbnails per row in the Design tab.
  • To crop individual images, use the built-in Image Editor.
  • To recenter images, adjust image focal points.
  • To shrink the whole Gallery Block, add blocks on either side.

Gallery Blocks on mobile

Gallery Blocks on mobile may display or behave different than on a computer, depending on the layout.

Slideshow Gallery Blocks retain their slideshow layout on mobile:

  • The automatic transition and navigation settings you choose in the Design tab still apply. Clickthrough URLs work when tapped.
  • Titles and descriptions won't appear on displays fewer than 480 pixels wide. This includes most smartphones held in portrait mode.
  • Titles and descriptions (including on-hover captions) may display in landscape mode and on larger devices, such as tablets. This depends on the device.

Carousel Gallery Blocks retain their carousel layout on mobile:

  • Depending on your images, only one image may display at a time.
  • The automatic transition and navigation settings you choose in the Design tab still apply. Clickthrough URLs work when tapped.

Grid Gallery Blocks display as grids two columns wide on mobile:

  • The aspect ratio you choose in the Design tab still applies.
  • Lightboxes display when enabled.
  • When lightboxes are disabled, clickthrough URLs work when tapped.
  • While in a lightbox, tap the circle in the bottom-right corner to display an image's title and description.

Tapping the circle to display text of an image in a lightbox on mobile.

Stack Gallery Blocks display and behave the same on mobile.

Was this article helpful?
126 out of 329 found this helpful