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

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

Add a page thumbnail

Page thumbnail images appear in Index Pages and create per-page banner images in certain templates

To set a page thumbnail:

  1. Go to the Home Menu and click Pages.
  2. Hover over the page in the left panel and click the  to open Page Settings.
  3. In Page Settings, click the Media tab.
  4. Drag an image into the Thumbnail/Banner Image box or click Upload an Image. You can also click Search For Image to use a stock image.
  5. Click Save


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.

The following templates use collection item thumbnails to create a banner image when viewing individual items. Templates are grouped by family.

Template Supported collections
Adirondack Blog posts, events, products

Bedford family

Anya, Bryant, Bedford, Hayden

Blog posts, events

Farro family

Farro, Haute

Blog posts

Skye family

Foundry, Indigo, Ready, Skye, Tudor

Blog posts
Supply Blog posts, events

To set a collection item thumbnail:

  1. In the Home Menu, click Pages.
  2. In the Pages panel, select a Blog, Product, or Events Page. This guide uses a Blog Page for an example, but the process is the same for Event and Product pages.
  3. Select a Blog Post and click Edit. 

  1. In the Post Editor, 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 use a stock image, click Search For Image.
  2. Click Save.  


Edit thumbnail images

After uploading a page or collection item thumbnail, you can use the Adobe Creative Cloud Image Editor to style or crop the image.

To open the Adobe Creative Cloud Image Editor, 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

Banner images

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:

Index Pages

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 Block

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. 

Video thumbnails

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:

Was this article helpful?
18 out of 151 found this helpful