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.
Add a page thumbnail
To set a page thumbnail:
- Go to the Home Menu and click Pages.
- Hover over the page in the left panel and click the to open Page Settings.
- In Page Settings, click the Media tab. Drag an image into the Thumbnail/Banner Image box, and then click Save. You can also click Add an image and choose Image.
With our partnership with Getty Images, you can purchase a stock image for your page thumbnail for $10. Click Add an image, then click Getty to search, preview, and purchase a stock image.
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.
|Adirondack||Blog posts, events, products|
Anya, Bryant, Bedford, Hayden
|Blog posts, events|
Foundry, Indigo, Ready, Skye, Tudor
|Supply||Blog posts, events|
To set a collection item thumbnail, go to the Home Menu and click Pages.
In the Pages panel, select a Blog, Product, or Events Page.
Note: This guide uses a Blog Page for an example, but the process is the same for Event and Product pages.
Select a Blog Post and click Edit. You can also click Edit and then Settings on the Blog Annotation.
In the Post Editor, click the Options tab and drag your image into the image uploader. Click Save. You can also click the image uploader to open a file selection menu and select a file from your computer.
To search, preview, and purchase a stock image, click Getty Images.
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 Edit.
You can also use focal points to center the image within its height dimensions.
Replace thumbnail images
To replace a thumbnail image, click Remove, 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 Index Page styles.
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.