Adding thumbnails to boards and posts

Misty Flowers

January 11, 2017 18:40

Thumbnail images can be added to both boards and individual posts in the Posts module and displayed alongside posts on Composer pages and in the mobile app. A Default Post Thumbnail can be set at the board level so all posts automatically use the same image. Upload thumbnails to Resources first before attaching them.

💡Quick answers

What are the recommended thumbnail dimensions? Approximately 304px wide by 132px tall with a 2.3:1 aspect ratio, for best display across both the site and the mobile app.
Adding a thumbnail to a board in Posts? Hover over the board > three-dot menu > Settings > General tab > scroll to Thumbnail > click Browse to select from Resources, then Save.
What is the Default Post Thumbnail feature on a board? An image set in board settings that applies automatically to all posts in that board, so you don't need to add thumbnails to every post individually.
Where do you adjust how a thumbnail displays within a Post element? In the Post element settings > Formatting tab > Post Thumbnail section, where you can control size, shape, and alignment.
Removing a thumbnail from a board or post? In the Thumbnail section of the board or post settings, click the Clear icon (circle with a minus sign) on the image preview, then click Save.

Thumbnail images can be added to both boards and individual posts to be displayed in various ways on your Composer site, as well as your new mobile app!

This article will show you how it works!

Upload thumbnail to Resources

Before adding your thumbnail into the Posts module, add your resource to the Resources module. Upload thumbnails with a central focus that isn't too closely zoomed into and has a strong, central focal point. This way, the image may be cropped or clipped around the edges to optimize the image for being viewed on all screen sizes.

Recommended thumbnail sizes

Due to the uniqueness of your site's theme or design, it is a best practice to follow your Site Instructions page when searching for recommended sizes and dimensions for post thumbnails but here are a few general guidelines:

Thumbnail images may be animated gifs, but videos are not supported.
Upload thumbnails sized approximately 304px wide by 132px tall.
Maintain a 2.3:1 aspect ratio for best display across both the mobile app and your site.
Choose images that remain clear and visually balanced at smaller sizes.

Add a thumbnail to a board

Once your thumbnail has been added to resources, you can add your thumbnail to a board within Posts. Here's how it works:

Hover over the board name, click the 3-dot more action menu, and select Settings.
In the General tab of the Board Settings window, scroll down to the Thumbnail section, and click the Browse button to open up Resources in a new window. Navigate to the image you want to use, or upload a new one.
Navigate to the image you want to use and select it, then click Save at the bottom-right.

board settings > general tab.png

Set a Default Post Thumbnail on a board

There is a great new feature available now where you can set a Default Post Thumbnail to avoid needing to go in and add individual thumbnails to all of your posts. This means you can use, for example, your logo or a similarly-branded image to display with all of your posts, allowing for a streamlined look and feel. Scroll down to the Thumbnail section.

thumbnail section.png

To set a Default Post Thumbnail, select a thumbnail by clicking the Browse button. Check the box next to Use Thumbnail as the Default Post Thumbnail to apply this selected thumbnail to all posts in this board.

Click Save at the bottom-right.

Add a thumbnail to an individual post

Thumbnails can be attached to the post when it's first created, or anytime after it's saved.

Expand out the Thumbnail & Resources section on the right when creating a Post. Click to browse either Resources or File Manager and attach a thumbnail to this particular post.

add thumbnail to individual post.png

When you select a thumbnail, you can also add alternate text to the image. Use this field to add a short description of the image contents. The fact that alt text is present at all will help boost your site's SEO rankings. In addition, describing images is considered a very thoughtful and polite way to interact with visually impaired site users.

Display thumbnail alongside your post in Composer

After placing the Post and its thumbnail onto a Composer page, you can open up the Post Element Settings and expand out the Formatting tab to make adjustments to the way a post thumbnail displays inside that particular Post element.

Here are the post thumbnail settings you'll see in your Post Element:

gif of post element settings opened up to formatting settings for thumbnails

Remove a thumbnail from a board or individual post

If you no longer wish to use a specific thumbnail for a board or a post, you can remove it directly from the thumbnail preview area.

Navigate to the Thumbnail section of the board or post settings.
Locate the uploaded image preview.
Click the Clear icon (the circle with a minus sign) located in the bottom-right corner of the image preview area.
The image and file name will disappear, reverting the slot to its empty state.
Click Save at the bottom of the window to apply your changes.

Remove a thumbnail with Clear button.png

Add a thumbnail to a post in the New Mobile App

You may add thumbnails into the Posts module that will display alongside posts in your new mobile app. Here are some guidelines for adding thumbnails to a post in the new mobile app so that they display well on devices.

Upload thumbnails sized approximately 304px wide by 132px tall.
Maintain a 2.3:1 aspect ratio for best display across both the mobile app and your site.