Use a variety of layouts to showcase a set of images or videos.
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, or license stock images.
Watch a video
Where to add gallery blocks
Where you can add gallery blocks depends on your site's version.
You can add gallery blocks to areas of your site where gallery sections aren't supported, including:
- Blog posts
- Individual events
- Product additional Info
It's not possible to add gallery blocks to any area with page sections, including:
- Layout pages
- Collection landing pages (blog pages, events pages, portfolio pages, store pages)
- Portfolio sub-pages
- Footers
Circle members can add gallery blocks to all content areas in 7.1. Once they add the block, anyone with permissions to edit site content can edit the block. To learn about becoming a Circle member, visit Squarespace Circle.
You can add gallery blocks to any block content area of your site. To learn more, visit Adding content with blocks.
Add a gallery block
To add a gallery block:
- Click an insert point in an area that supports gallery blocks, then click Gallery. For help, visit Adding content with blocks.
- Use the Content tab to add images and videos.
- Use the Design tab to change the layout and customize the design. If your site is on version 7.0, click Apply to publish your changes.
Add images and videos
In the Content tab of the gallery block editor, you can upload images, add stock images, or embed videos. You can also reuse a stock or uploaded image from other areas of your site. When you add a new image to a gallery block, the changes save automatically.
To learn more about our best practices for image uploads, visit Formatting your images for display on the web or watch 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, consider creating smaller galleries on multiple pages.
How you add images and videos to gallery blocks depends on your site's version.
Note: It's not possible to use the Use Existing Gallery option in version 7.1. This option is only for gallery pages, which are only available in version 7.0.
Add your own images
In the gallery block editor, drag multiple images into the image uploader, or click the image uploader to open a file selection menu.
To reuse images you've already uploaded to your site, click the + icon in the bottom-right corner, then click Search Images. This opens the My Library tab which shows images and videos you've uploaded to your site, and any free and licensed stock images you've used.
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 for the + icon to appear.
To learn more, visit Searching and adding stock images.
Add videos
You can embed videos from hosting services. Videos can't be uploaded directly. We currently support direct URLs from YouTube and Vimeo. For other services, use embed codes. To learn more, visit Choosing the right video embed option.
To add a video:
- Click the + icon in the bottom-right corner, then click Video.
- In the Edit Video window, paste the video's URL in the Enter an embeddable URL here field. You can also click the </> icon and paste the video's embed code in the Embed Data window that appears.
- 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 the custom thumbnail, check Use Thumbnail.
- When you're done, click Save.
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.
To reuse images you've already uploaded to your site, click the + icon in the bottom-right corner, then click Search Images. This opens the My Library tab which shows images and videos you've uploaded to your site, and any free and licensed stock images you've used.
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 for the + icon to appear.
To learn more, visit Searching and adding stock images.
Add videos
You can embed videos from hosting services. Videos can't be uploaded directly. We currently support direct URLs from YouTube and Vimeo. For other services, use embed codes. To learn more, visit Choosing the right video embed option.
To add a video:
- Click the + icon in the bottom-right corner, then click Video.
- In the Edit Video window, paste the video's URL in the Enter an embeddable URL here field. You can also click the </> icon and paste the video's embed code in the Embed Data window that appears.
- 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 the custom thumbnail, check Use Thumbnail.
- When you're done, click Save.
Import from other pages
There are two ways to add images from other pages on your site:
- Add images and videos from a gallery page - Click Use Existing Gallery, then select the gallery page to use.
- Add images from other pages - Click the + in the bottom-right corner, then click Search Images to find and reuse images.
Add your own images
To add images to gallery blocks:
- In the Upload tab of the block editor, tap Content.
- Tap the + icon.
- 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...
- Tap images to add titles, descriptions, and clickthrough URLs.
Note: It's not currently possible to search stock images in the Squarespace app or add content to gallery blocks in blog posts. To do so, use a computer instead.
Use an existing gallery (version 7.0 only)
On version 7.0 sites, you can pull images from an existing gallery page on your site:
- Tap the Existing tab in the block editor.
- Tap My Galleries.
- 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.
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 aspect ratio of the items and the size of the block.
Grid gallery blocks display items in an even grid. Items with uneven lengths have space between them, unless you automatically crop them.
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.
If you want a stacked set of images with more space between each, switch to the Grid layout. You can then set Thumbnails per row to 1 and change the spacing as needed.
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 go to 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:
|
| 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:
The image with the greater width-to-height ratio sets the height of the 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 setting 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 if 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 go to 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. |
| Active Alignment |
Choose where the active image should appear in the slider as the images move. |
| 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, there may be 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 learn more about improving your site's accessibility, visit Making audio, images, and videos more accessible.
To add titles and descriptions to images and videos:
- Hover over an image or video in the gallery block editor.
- Click
. - Enter a title and description. We recommend using short terms that describe the image and relate to your overall site content.
.- Tap the Content tab.
- Tap an image.
- Enter a title and description. We recommend using short terms that describe the image and relate to your overall site content.
Tip: If your site is on version 7.0, images from an existing gallery page display the image titles and descriptions from the gallery page automatically.
The behavior and appearance of the 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 site's version. 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:
- Hover over an image in the gallery block editor.
- Click .
- Set up the link in the Click to add URL... field. For detailed steps visit Clickthrough URLs.
- Check or uncheck Open Links in New Window in the Design tab to set how your links appear.
- Tap the Content tab.
- Tap an image.
- Tap Image Link.
- Use the tabs to link to a page on your site, an external website, an email address, an uploaded file, or a phone number.
- Tap the arrow in the top-left corner, then tap Save.
Keep in mind 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.
- Videos don't support clickthrough URLs.
- When adding a clickthrough URL in version 7.1, you can't select a portfolio page in the Content tab. Instead, select External and paste the URL to your portfolio page.
Rearrange images and videos
Gallery blocks don’t include options for automatically sorting images and videos, but you can reorder items manually. When you reorder an image, the change saves automatically.
- To move one image at a time, open the block editor and click and drag the image into place.
- To move multiple images, press and hold Ctrl on Windows or ⌘ on Mac, then click each image you want to move. After selecting images, click and drag the images into place.
If your site is on version 7.0 and the gallery block displays content from an existing gallery, rearrange the images or videos on the original gallery page.
Remove an image or video
To remove an image or video from a gallery block:
- In the gallery block editor, hover over the image you want to delete and click the trash can icon.
- Click Confirm.
- In the Upload tab of the block editor, tap Content.
- Tap Edit.
- Tap the red - icon on any image or video you want to delete, then tap Delete.
When you remove an image or video from a gallery block, the change saves automatically.
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 Automatically crop images in the Design tab.
- To crop individual images, use the built-in image editor.
- To recenter images, change image focal points.
- To shrink the whole gallery block, add blocks on either side.
- To change the size of images and the number of images that display at a time, use the cropping handle.
- To crop individual images, use the built-in image editor.
- To shrink the whole gallery block, add blocks on either side.
- To automatically crop images to the same aspect ratio, check Crop images in the Design tab.
- To change the size of all images, change the number of thumbnails per row in the Design tab.
- To crop individual images, use the built-in image editor.
- To recenter images, change image focal points.
- To shrink the whole gallery block, add blocks on either side.
- To crop individual images, use the built-in image editor.
- To shrink the whole gallery block, add blocks on either side.
Gallery blocks on mobile
Gallery blocks on mobile devices may display or behave different than on a computer, depending on the layout.
Slideshow gallery blocks keep 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 keep 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.
Stack gallery blocks display and behave the same on mobile.