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

Gallery Blocks add galleries of images and videos to pages and blog posts. You can upload images, add Getty Images, embed video, or display content from an existing Gallery Page.

There are four Gallery Blocks, and their design and behavior are consistent across all templates. This consistency makes Gallery Blocks great alternatives to your template's Gallery Page.

For common questions, visit Gallery Blocks FAQ.

Gallery Block comparison

This table explains the differences between the four Gallery Block designs.

Block name Appearance Displays titles and descriptions
Carousel Gallery Block
  • Horizontal strip without padding
  • Images can automatically transition for a traditional carousel design
No
Grid Gallery Block
  • Symmetrical grid with several aspect ratio options
  • Customizable padding and number of thumbnails per row
Yes
Slideshow Gallery Block
  • Displays one item at a time
  • Media can auto-play
Yes
Stack Gallery Block
  • Single column with one pixel of padding between items
Yes

Step 1 - Select a block

  1. Open a page or post editor.
  2. Click an Insert Point or the +.
  3. Under Gallery, select Carousel, Grid, Slideshow, or Stack.
  4. For more detailed steps, visit Adding blocks.

Step 2 - Add images and video

Limitations

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

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 Series.

Option 1 - Add your own images

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

Option 2 - Search Getty

Click the + icon in the bottom-right corner, and then click Getty.

Note: Depending on your browser size, you might need to scroll down to see the + icon.

To learn more, visit Getty Images and Squarespace overview.

Option 3 - Add videos

You can embed a video from a hosting service. Videos can't be uploaded directly. We currently support direct URLs from YouTube, Vimeo, Wistia, and Animoto. For embed codes, we support any service.

Paste the URL or embed code

To add a video, click the + icon in the bottom-right corner, and then click Video.

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 Edit Embed Data window that appears.

The URL is usually the URL in your browser's address bar. You may need to click a Share button to get the video's URL or embed code.

Add a thumbnail (Optional)

After the video is successfully located, 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.

To use a custom thumbnail, check Use Thumbnail.

When you're finished, click Save.

Use existing gallery

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

To display content in an existing Gallery Page, click Use Existing Gallery. Then select the Gallery Page to use.

Step 3 - Customize the design

Click the Design tab to edit the design and behavior of the block.

The Slideshow, Carousel, and Grid Blocks have different design settings. The preview of the gallery on your page will change so you can view the changes in real time. We recommend playing around with the settings until you find a design you like.

To learn more, visit the specific block guides:

Note: The Stack Gallery Block is fixed in its layout. It has one design option: Display Title and Description.

Step 4 - Add image titles and descriptions (optional)

Image titles and descriptions display in Slideshow, Grid, and Stack Gallery Blocks only. Before adding them to an image, it's important to note how the text behaves:

  • Titles and descriptions won't display in Carousel Gallery Blocks.
  • 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 style of the captions depends on the Gallery Block design and your template. To learn more, visit Styling image captions.

You can add titles and/or descriptions of each image that will display if you set images to open in a lightbox. Each image title acts as alt text

To add a title and description:

  1. Hover over an image in the Gallery Block Editor.
  2. Click the .
  3. Enter a title and description. We recommend using short terms that describe the image and relate to your overall site content.

Here's how each block design displays the text:

  • Slideshow - Titles and descriptions appear constantly or on hover. Set the position in the block's Design tab.
  • Grid - Titles appear below images. Titles and descriptions appear on hover when the image is in Lightbox mode.
  • Stack - Titles and descriptions appear below images.
  • Carousel - Titles and descriptions don't display.

Step 5 - Add clickthrough URLs (optional)

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

To add a clickthrough URL:

  1. Return to the Content tab of the Block Editor.
  2. Hover over an image in the Content box, and then click the .
  3. Click Click to add clickthrough URL
  4. Continue adding the clickthrough URL. For detailed steps visit Using clickthrough URLs.
  5. Check or uncheck Open Links in New Window in the Design tab to control how your links appear. 

Note: Gallery Blocks have some limitations for clickthrough URLs:

  • In the Slideshow Gallery Block, clickthrough URLs override 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 the Grid Gallery Block, clickthrough URLs aren't supported when Lightbox is checked.
  • Only the Grid Gallery Block supports opening clickthrough URLs in a new window. 

If you connected a gallery to your Gallery Block, add clickthrough URLs within the Gallery Page.

Step 6 - Crop or resize images (optional)

While you can always resize the whole Gallery Block, some Gallery Blocks have additional resize options:

Step 7 - Save

When you’re done adding content and designing the block, click Save.

Step 8 - Switch between designs

You can switch the design to a different block in the Design tab of the Block Editor. This way, you  change the design and behavior of your gallery without deleting and re-adding the block.

  1. Double-click on the block in the Editor.
  2. Click the Design tab.
  3. Select Slideshow, Slider, Grid, or Stacked.
  4. As you make a selection, the preview of the gallery on your page will change so you can view the changes in real time.

Was this article helpful?
52 out of 127 found this helpful
Gallery Blocks overview