DEV Community

Cover image for Netlify trick: Adding pinned messages and thumbnails to projects
Phil Hawksworth for Netlify

Posted on

Netlify trick: Adding pinned messages and thumbnails to projects

Anyone working with many projects over long periods of time in Netlify might be familiar with the task of seeking out a particular project in the Netlify admin. The sites page can get busy if you work on lots of projects, or if many people are collaborating and need to hop from project to project. Friction can kill your productivity momentum, so here are two little things that can make a big difference.

TL;DR

The Netlify admin supports custom thumbnail images and pinned messages on your site overviews. They are simple to use and this post will show you how.

Making the best of site thumbnails

When your site is deployed, Netlify will automatically generate a thumbnail image of the home page of your site which will be used to help you identify your sites in the site list page and in each sites overview page.

You can toggle between letting Netlify generate the thumbnail or providing an image of your own. This can be particularly helpful if you have many sites which look similar from a distance, or if you have sites which don't have much meaningful UI because they focus on providing APIs or services for example.

Specify a custom thumbnail image via the "Customize" button in your site's overview summary.

Customize thumbnail UI

Make team collaboration easier with pinned messages

This much-requested feature makes it possible for you to locate valuable project information right in context and visible to collaborators (and let's be honest โ€” future you) directly in the site overview page of your projects.

While much documentation about a project might live in a readme file in its code repository, some information is not appropriate to place there, or might not be so discoverable to all those needing that information. Pinned messages support markdown and are perfect for communicating useful project information to your teammates, such as project purposes, project lifespans, links to issue trackers, and links to project communication channels.

Or just emojis. You do you. ๐Ÿ˜‰

Pinned message

Just show me

If you prefer to watch a quick video of this, here's how it looks.

Deploy a site to explore

You don't have any sites deployed on Netlify already, but you really want to click around and play with this feature? No problem, a couple of clicks and we'll get you an example site. Click the button below to get started.

Deploy to Netlify

Top comments (4)

Collapse
 
lilxyzz profile image
Travis

Hey Phil, thanks for the insight! I tried to find the feature you mentioned in my account but couldn't locate it, not even in Labs tab. Is it available for all users or just those with paid subscriptions?

A big shout out to the Netlify team for their exceptional service and features! โœจ

Collapse
 
thomasbnt profile image
Thomas Bnt โ˜•

Hello! I've got the same question. In my Open Source account, I can edit the thumbnail, and on my personal account, I don't have the button. Seems only for Pro subscription oooor it's in deployment

Collapse
 
lilxyzz profile image
Travis

Hey Thomas, cheers for the reply. From the sounds of your experience I think it is a subscription feature unfortunately.

Thread Thread
 
thomasbnt profile image
Thomas Bnt โ˜•

oww sad