Topic List Thumbnails

:discourse2: Summary Topic List Thumbnails allows you to show topic thumbnails in topic list views.
:eyeglasses: Preview Theme category - Discourse Meta
:hammer_and_wrench: Repository Link https://github.com/discourse/discourse-topic-thumbnails
:open_book: New to Discourse Themes? Beginner’s guide to using Discourse Themes

Install this theme component

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

![alttext|100x100](upload://aaa)
![alttext|100x100|thumbnail](upload://bbb) << this one will be the thumbnail

There are three modes, configurable per-category using the theme settings:

Grid mode:

Masonry mode:

And list mode:

Tips and Tricks

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 need to rebake the relevant posts.

Feature Requests

  • Allow admins to specify a custom placeholder image as an alternative to a font awesome icon. (3 interested)
78 Likes
MD Topic List component
Theme modifiers: A brief introduction
Image_url is null after update
Topic List Previews (legacy)
Thumbnail generation & markdown rendering issue
User Card Directory
[Question/Request] Featured image url for post
Category "Uncategorized" not displayed for globally pinned topics below title
Is there a 'reddit' style discourse theme / plugin?
Blog Post Styling
Potential way to hide ignored users from topic list?
Displaying Views in Topic view
Blog Post Styling
Topic List Previews (legacy)
Topic List Previews (legacy)
Using onebox images for topic thumbnails
Is there a plugin to make my forum a shop?
[PAID] Modifying Video Upload theme to display topic thumbnails
How to make tiles like in discourse theme category?
Topic List Previews Theme Component
User Portfolio
Topic List Excerpts
Rounded Borders for images, oneboxes, blockquotes & more
Extend Topic List Thumbnails TC with like button
A Graceful theme for Discourse
What are good plugins or theme components for a forum emphasizing pictures?
What is the name of this theme?
Developing a component or plugin similar to topic list thumbnails or topic list previews
Set the image used for social network sharing?
Fakebook, a theme for social media lovers
Customize topic list entries (sorting, grouping, filtering) for better organization
New Photography Theme
Is there a Kanban theme for Discourse?
Add an option to list topics by tagging date
Is there like a Reddit style plugin?
Best way to implement Excerpts in topic list?
How can I make a Discourse forum as "reddit like" as possible
MD Topic List Mobile component
Featured Cards component
Topic List Previews (legacy)
Plugin used in theme
Plugin used in theme
Topic List Previews (legacy)
Topic List Previews (legacy)
Topic List Previews (legacy)
Topic List Previews (legacy)
All latest images in posts from a category
How to create a custom button?
Filter posts with images (gallery view)

Wonder where you got the idea for this? :thinking: :smiley:

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 …

34 Likes

This is a great feature. Does this come with Discourse 2.7 as mentioned here? Or is the syntax different?

2 Likes

It’s available in Discourse 2.7 stable, yes. The syntax is the same :slight_smile:

4 Likes

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!

2 Likes

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.

2 Likes

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?

image

5 Likes

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.

2 Likes

3 posts were split to a new topic: Caching for tag topic lists?

It’s still working for me. Can you share some more details about what you tried, and what result you’re seeing? This is what I have in my test OP:

![image|690x460](upload://1lGVHoB5KKnftUZoEYVgANxKdWL.jpeg)
![image|612x500|thumbnail](upload://cILOby5v31IEtJtbOEEDgXQPZ7Z.jpeg)

and the second image is correctly selected as the thumbnail.

I agree that would be nice, but I don’t think it would be needed for most sites. I think it would make a great separate theme component.

3 Likes

Ha, that’s embarrassing, of course it does work now… :facepalm:

3 Likes

Hi @david,

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;”?

![image|612x500|hide](upload://cILOby5v31IEtJtbOEEDgXQPZ7Z.jpeg)

3 Likes

Maybe you could use Generic bbcode wrapper for theme components to do something like

[wrap=hidden]
  ![image|612x500|hide](upload://cILOby5v31IEtJtbOEEDgXQPZ7Z.jpeg)
[/wrap]

Then some CSS like

div[data-wrap="hidden"]{
  display: none;
}
7 Likes

Oh, did not know about this one. Neat, thank you!

2 Likes

The alert-info banner overlaps the thumbnails, is this by design or a bug?

3 Likes

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.

4 Likes

Is it possible to show the number of likes on the thumbnail cards + make it clickable so images can be liked straight from the gallery view?

4 Likes

list categories is not working on mobile mode even when check Enable thumbnails on mobile devices ?

2 Likes

Hi, it is pretty cool.
Is it possible to use the hotlink figure (from imgur for example) as thumbnail?

2 Likes

hi I just set the blog category to use list categories, but it shows in every categories, have I did some wrong set step?

2 Likes