Optimized images are generated for the lists, and different resolutions are made available for high-dpi displays. Images are lazy-loaded as you scroll (where native browser support is available).
By default, Discourse will use the first image in the OP of the topic. If you would like to select a different image from the OP, add |thumbnail to the markdown. For example
 << this one will be the thumbnail
There are five modes, configurable per category or tag using the theme settings.
If you want Oneboxes in your posts to generate thumbnails, you will need to turn on this site setting: download_remote_images_to_local. Youâll also need to rebake the relevant posts.
Settings
Name
Description
default thumbnail mode
Which thumbnail display mode should be used by default
docs thumbnail mode
If the docs plugin is enabled, which thumbnail display mode should be used for docs topics
blog style categories
The blog-style view will be used in these categories. This style makes use of topic-excerpts if enabled via theme or theme component
minimal grid categories
The minimal grid view will be used in these categories
grid categories
The grid view will be used in these categories
masonry categories
The masonry view will be used in these categories
list categories
The list view will be used in these categories
blog style tags
minimal grid tags
The minimal grid view will be used for these tags
grid tags
The grid view will be used for these tags
masonry tags
The masonry view will be used for these tags
list tags
The list view will be used for these tags
suggested topics mode
Which thumbnail display mode should be used for suggested topics? If blank, will follow the âenable outside topic listsâ setting.
enable outside topic lists
Enable thumbnails on non-topic-list pages (e.g. user activity, personal messages, suggested topics)
placeholder icon
Icon to display on topics without thumbnail images
mobile thumbnails
Enable thumbnails on mobile devices
list thumbnail size
Base size for thumbnails in the âlistâ view
Hosted by us? Theme components are available to use on our Standard, Business, and Enterprise plans.
Absolutely fantastic that core is paying more attention to image delivery and presentation. I like the direction!
(If this doesnât fully replace Topic List Previews, there is now at least potential to eliminate a lot of bespoke API work from it which I wonât have to maintain anymore, great stuff!)
PS I just tested it and one thing that would be quite nice is if Polls generated a thumbnail so the charts could surface âŚ
I have a very odd problem that only applies to one member on my site. Some thumbnails do not display, seemingly randomly. It displays the default icon as if there was no image, yet for myself and everyone else the thumbnail displays. I had him look in his console and there is nothing pertinent, nothing in the logs either. Iâve had him try clearing the cache, trying different browsers and devices, and using a different isp. I even had him try a theme with only this component enabled. No matter what he tries this still happens. I even tried impersonating him and then it doesnât happen for me. Any other thoughts on troubleshooting this? Thanks!
Have him try on mobile with wifi disabled so heâs not going through his home network, but the cellular network. This will eliminate anything on his network from interfering.
But if you have tried âdifferent ISPâ then maybe not.
I canât get this to work anymore, did this revert perhaps?
Also, the feature is not easy to discover for users. Would it be possible to add an option to select the thumbnail to the âsize selectionâ in the preview?
Thanks Jeff, he has tried hotspotting to his phone, and at a friends house with a different ISP. I thought it might be a CDN issue so I tried clearing the CDN cache which did not help him. I also tried impersonating him while using a VPN in Atlanta where he is from which did not help either. Iâm not sure what else to try.
I have the following requirement and maybe you can point me to how to achieve this.
Sometimes we have a topic that we want to share via social media and we prepare an image for it that should be used as thumbnail and for the og:image tags, but we donât want it to be visible inside the topic.
How could we realize something like this e.g. add âhideâ to the sizes and then a class is added to the image container that applies âdisplay: none;â?
Itâs somewhat by design. Normally, that bar sits on top of the column headings in the topic list. The alternative would be for the bar to âpush downâ all the topics when it appears, which would make the entire UI jump down, and could be quite jarring.
Iâm not sure why there is a ~1px gap on the right hand side of the bar in your screenshot. That could be an issue with the component, or it could be related to your custom theme CSS.
