Topic List Thumbnails

Now it seems to work, with excerpts and thumbnails and avatar customization.

Just disabling Author topic.

Have to read what it did, and why we installed it, as it has been working for quite long and I don’t remember the use.
If it is not all that important I just will disable it.
Thanks a lot.
@david :
By the way: as an improvement, it would be great to add an option to show the avatar for topics that have no image in it, instead of just showing a selected image.
With an option or using a special meaning placeholder name like $avatar or something like that.

For many uses, it is better to see the author avatar than just the same icon for all the topics with no image.
Another improvent I would like to see is the option to include the excerpts (generated by the corresponding TC) in the masonry and grid views, not only in the list view.

It woud be great to be able to read something of the content.

2 Likes

I run into the same issue, did you find how to display the last image instead of the first one in OP?

2 Likes

Hi, is there an easy way to use e.g. category icon as a place holder image? With old solution (excerpts module) only topics with image in first post had image thumbnail, other had nothing (in list view). With TC I am able to see thumbnails of images, but if topic has no image in a body, it displays a placeholder icon. Is there a way to disable the icon (but keep thumbnails for topics with images), or use category logo as thumbnail? Thank you! Other than that, great component!

2 Likes

Set thumbnails for tag settings seems broken on latest discourse ( 6555f0c11b) + latest topic list thumbnail component

Those 4 settings are not working on desktop/mobile.

3 Likes

The tag setting also doesn’t work on b20307377a and does not work on theme-creator.

3 Likes

The bug was fixed on the latest commit, I was assuming the excerpts component is broken due to a similar reason and tried to apply the same fix on a forked repo. Sadly the result works on theme-creator but not on 6555f0c11b still.

2 Likes

Yep, discourse-topic-thumbnails should be fixed by FIX: Correctly detect current tag (#15) · discourse/discourse-topic-thumbnails@4c666e0 · GitHub

I’ll take a look at the excerpts component :eyes: Thanks for reporting @th21!

1 Like

Hi David,

Is there any way this component could be set up for a single category and not the whole site?

Thanks,
Tom

1 Like

Yep, it can be applied based on a specific category or tag. Once installed, you should see these settings in the theme admin section:

(e.g. here on Meta we have it enabled for #theme and #plugin, with a different mode for each)

1 Like

This is great! Can we get this installed?

Thanks,
Tom

2 Likes

What is needed to get this installed?

Thanks,
Tom

1 Like

There is a guide linked on the op

2 Likes

Thank you so much for this useful component!
I find that the last replied user’s avatar appears beside the thumbnail on mobile. Is this on purpose or a bug? Is it possible to hide the avatar?

2 Likes

I believe the component intentionally leaves other parts of the UI unchanged, so it’s up to the admin to make a decision about whether or not to hide the avatars there.

It can be done by adding a little CSS to your theme…

.mobile-view .topic-list-data .pull-left {
  display: none; // hides the avatars
}

.mobile-view .topic-list .right {
  margin-left: 0; // removes the space for the avatars
}
3 Likes

Thanks!!! It’s really kind of you.

1 Like

Just a heads up - I’ve noticed a bug, when using the setting:

Enable thumbnails on non-topic-list pages (e.g. user activity, personal messages, suggested topics)

On the suggested topics list, the user avatar uses the url of the topic thumbnail instead of the user avatar. So there is a small blurry square shown instead of the user avatar.

Running on Discourse stable with the latest version of the component and using the Masonry grid layout.

1 Like

I’ve attempted to set this up here, but thumbnails don’t seem to actually be generating for our topics.

Is this in any way tied to the editing grace period setting? The Topic List Previews theme component doesn’t get thumbnails until the first post is no longer editable, either — but this category does not suit that approach at all, and we’d prefer that users are able to edit their posts indefinitely in this category.

1 Like

Correct.

As front end mods only, Topic List Thumbnails & Topic List Previews leverage the same core process that generates thumbnails in the back end. That async job is not run until the editing grace period is over UPDATE: if the image is remote. If the images are uploaded locally the thumbnail generation process is kicked off straightaway.

The process is not modifiable by a Theme Component and would require a plugin or PR to the back end to change (not withstanding that TLP has a complementary plugin for some added features)

Note before thumbnail support was added to core, Topic List Previews was a plugin and worked in much the same way in terms of scheduling the creation of thumbnails. I can’t speak for the team but you can understand the logic of keeping it that way: you don’t want to be generating thumbnails whose source image might be frequently edited out or what if an image is added at last minute?

One way you can mitigate it is use the default icon/image feature in each theme component respectively. For masonry/tiles view this at least reduces dramatic changes in layout. Or minimise the grace period?

1 Like

Ah, yeah, I see. It makes total sense for that to be the default behaviour — we’re in a tricky spot here because much of what will be posted in this category will be Minecraft mods, so it stands to reason that the first post in any topic will need to be edited infrequently, and the thumbnail is likely to be changed.

I assume you’re not aware of any plugins that allow you to change this behaviour, off the top of your head? I can see why Core doesn’t support this, but relying on the grace period just isn’t going to work for us.

1 Like

No, I don’t think so. The closest thing was the old deprecated topic list previews plugin that you could have modified.

You either need to do this work yourself or #marketplace

2 Likes