Topic List Thumbnails Theme Component

This theme component allows you to show topic thumbnails in topic list views. You can see a demo right here on meta by visiting the #theme category.

:link: GitHub - discourse/discourse-topic-thumbnails: Display thumbnails in topic lists

:thinking: How do I install a Theme or 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).

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

Grid mode:

Masonry mode:

And list mode:

This component makes use of brand new APIs in Discourse core, so you need to be running the latest version of tests-passed for it to function correctly.

53 Likes

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 …

28 Likes

This is fantastic! Is there any way to enable it for pinned topics only?

1 Like

Wow… it is so nice that have topic list views in theme component…

One question, based on your image, no topic excerpts there… is it possible to put topic excerpts in there?

3 Likes

Awesome. So to confirm this is for 2.5 beta and not 2.4 stable?

I’m using Discourse 2.4.3 and it seem to work perfectly :grin:

I do have the Topic List previews plugin installed though?

2 Likes

A combination would be perfect. Enable for pinned topics only + keep the excerpt :slight_smile:

2 Likes

On #theme

My site:
image

Currently the template installed on the website has errors, is there any conflict?

This will not be compatible with third-party plugins that are overriding the topic list item template. Try disabling third party plugins and try again.

6 Likes

I turned off the third utility here: Topic List Previews. The interface is no longer broken.
So will the thumbnails images be processed sequentially or manually? Most of the time, there are no thumbnails images ?

Oh, I see it. I must say that this theme is great, thank you. :smile:

Tóm tắt

Update 1: Is it optimized image? I haven’t seen the code but it seems the thumb image is currently processing slowly, I will wait

Update 2: Still not done yet, is there a faster way to create it? Like raid post and so on. Some topics Recreate HTML but no changes

Update 3: Must select Grid for the category to execute image creation :smile:

Update 4: When you enter the topic and return to it, the thumb is created. But when f5 pages, the image is lost

Update: Is due to conflicts between plugins. Successfully resolved.

1 Like

Great, glad it’s working!

Image resizing is run in the background, yes. However, you should start seeing images immediately (we will use the full-resolution versions rather than the resized ones).

If you’re missing images from topics, it is either because there are no images in the first post of the topic, or because the images are ‘hotlinked’ from another site. You should enable the download remote images to local setting, and then “rebuild html” on the topic.

10 Likes

I don’t know if it could be a mistake, but I have 4 subcategories, I wanted to apply this to only one of these, but for some reason it applies to the whole category in general

Hi, I made a try with 2.5.0.beta4 but no joy. The extension is not in the list of repository

Fantastic theme component!

One slight glitch I’m seeing on mine is thumbnails showing up on mobile even though I’ve unchecked the box “Enable thumbnails on mobile devices”.

I still see them when on my iPhone on the discourse hub app. I’ve got the thumbnail mode set to “list” and I’m hosted on discourse (so running 2.5.0 beta4).

Apart from that it’s an awesome theme component. Just what I needed for my community.

3 Likes

Thanks for the feedback everyone! I just made a batch of improvements.

A couple of thumbnail selection improvements in core:

Unfortunately not, although I am planning a new component for featuring topic images at the top of a category :eyes:

Not with this component, but check out Topic List Excerpts Theme Component

Correct

Not sure what’s happening there… can you share a link to your site?

Check the instructions here to learn about installing a theme component from a git repository. You can find the repository link at the top of the topic here.

That should be fixed with:

15 Likes

It had been a mistake on my part, I had not seen the option to set a default layout in all categories :sweat_smile:

2 Likes

Just noticed that the thumbnails in the topic lists for #theme are being served from amazon S3:

https://assets-meta-cdck-prod-meta.s3.dualstack.us-west-1.amazonaws.com/optimized/3X/0/9/098f8167ccce99ec3e4416f2e6943595561bb6c9_2_600x480.jpeg

While the actual images in the topics are being served from Cloudfront:

https://d11a6trkgmumsb.cloudfront.net/original/3X/0/9/098f8167ccce99ec3e4416f2e6943595561bb6c9.jpeg

Is there a way to have the thumbnails use a CDN url instead of being served directly from S3?

Thanks!!

5 Likes

Good catch, thanks @internet_cookie. I just fixed this in core so that we use the CDN for topic images:

13 Likes

Awesome! thanks so much

1 Like

After enable , the class is lost.
Specifically, only topic-list instead of topic-list topic-thumbnails-list

Do not understand its 2 different components. topic-list-item and topic-list

I find everything ok just missing the class, if any it works.