Squarespace uses thumbnail images in two key ways. Page thumbnails appear in Index Pages and create per-page banner images in certain templates. Collection item thumbnails represent individual blog posts, events, and products across your site, for example in Summary Blocks or certain templates' main Blog Pages.
We recommend always adding thumbnails when available to make the most of your template and create a great visual experience on your site. For help formatting images before uploading, visit Formatting your images for display on the web.
Note: When you share a page on social media, your social sharing logo (if uploaded) displays in the post instead of its thumbnail. When you share a specific collection item (like a blog post or event), its thumbnail displays in the post.
Watch a video
This video applies to version 7.0.
Add a page thumbnail
Version 7.1 doesn't use page thumbnails. To create a banner image, use page sections instead.
To set a page thumbnail:
- In the Home Menu, click Pages.
- Hover over the page in the left panel and click to open page settings.
- In page settings, click the Media tab.
- Drag an image into the Banner/Thumbnail Image box or click Add Image. You can also click Search For Images to reuse an image or add a stock image.
- Click Save.
Tip: Some templates also support adding videos.
Add collection item thumbnails
Collection item thumbnails represent individual blog posts, events, and products across your site, for example in Summary Blocks or certain templates' main Blog Pages. They also display when the items are shared on social media. Some templates use collection item thumbnails to create a banner image.
To set a collection item thumbnail:
- In the Home Menu, click Pages.
- In the Pages panel, select a Blog, Events, or Store Page. This guide uses a Blog Page for an example, but the process is the same for Event and Product pages.
- Hover over a Blog Post and click Edit.
- If your site is on version 7.1, click in the top-right corner.
- In the post settings, click the Options tab and drag your image into the image uploader, or click the image uploader and select a file from your computer.
- To reuse an image or use a stock image, click Search For Images.
- Click Save.
- Tap Pages, tap the Blog Page, then tap the blog post.
- Tap ... or at the top of the screen, then tap Page Settings.
- Tap Add image at the top of the Post Settings.
- 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 Save.
It's not possible to add event or product thumbnail images on the Squarespace App. Use a computer instead. To add product images, you can also use the Commerce App.
Edit thumbnail images
You can use the Image Editor to style or crop thumbnail images. To get started, click Image Editor.
You can also use focal points to center the image within its height dimensions.
Replace thumbnail images
To replace a thumbnail image, click the trash can icon, and then add a new image.
How thumbnail images display
Here's an example of a per-page banner on Adirondack:
Collection item thumbnail images display as banner images in certain templates. Here's an example of a blog post's banner image on Bedford:
Certain templates support Index Pages, which organize content from multiple pages into a single location. Index Pages use thumbnail images in different ways depending on the template. To learn more, visit Using the Index Page.
Here's an example of page thumbnails representing different pages in an Avenue Index Page:
Summary Blocks display thumbnail images for collection items featured in the block. You can choose between several different layouts for the Summary Block. For more information on the Summary Block, visit Using the Summary Block.
Content Link Block
Content Link Blocks also display thumbnail images. For more on the Content Link Block, visit Using the Content Link Block.
Troubleshooting Gallery Page thumbnails
In most templates, if the Gallery Page doesn't have a thumbnail image, it automatically creates one from the first image in the gallery. Open page settings to replace this with a different image, or delete it altogether.
In some templates, if you delete the page thumbnail, the gallery's first image automatically becomes the thumbnail image when you make any change to the gallery. This is most noticeable in templates where the thumbnail image creates a page banner.
In these instances, you can delete the new thumbnail image from page settings to remove it after each change. Note that if you manually add a thumbnail in page settings, the thumbnail won't automatically update when you make changes to the gallery. To mimic the look of no banner, you could upload a thumbnail image of a solid color that matches your background.
Videos can have their own thumbnails, which display over the video before it’s played. This could be a title card, a frame from the video, or any other image that encourages visitors to click play. You can add thumbnails to videos in: