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||
|Grid Gallery Block||
|Slideshow Gallery Block||
|Stack Gallery Block||
Step 1 - Select a block
- Open a page or post editor.
- Click an Insert Point or the +.
- Under Gallery, select Carousel, Grid, Slideshow, or Stack.
- For more detailed steps, visit Adding blocks.
Step 2 - Add images and video
- 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.
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
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:
- Hover over an image in the Gallery Block Editor.
- Click the .
- 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:
- Return to the Content tab of the Block Editor.
- Hover over an image in the Content box, and then click the .
- Click Click to add clickthrough URL…
- Continue adding the clickthrough URL. For detailed steps visit Using clickthrough URLs.
- 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:
- In the Carousel Gallery Block, you can resize images and the number of images that display at a time.
- In the Grid Gallery Block, you can crop images to certain shapes, set the number of thumbnails per row, and adjust the padding.
- In the Slideshow Gallery Block, you can choose whether to crop images.
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.
- Double-click on the block in the Editor.
- Click the Design tab.
- Select Slideshow, Slider, Grid, or Stacked.
- As you make a selection, the preview of the gallery on your page will change so you can view the changes in real time.