Featured Tiles Theme Component

No it’s not the same. The “Featured Tiles Theme Component” in this topic is officially maintained by the Discourse team, and it only provides what you see in the screenshot. “Topic List Previews” is a third-party plugin and/or theme with a different design and featureset.


I love this.

Is there a way to have it only pull from topics with photos/images? Otherwise it seems pretty discordant when there is a row of empty grey boxes and an occasional photo.



@david how i can increase the quality of the pictures, and probably the size to 180x80, thanks

It should be using 200x200 images on regular screens, automatically scaling up to 400x400 on hidpi screens.


Are you seeing something different?

Can i send you PM, because my forum is age restricted.

1 Like

Thanks for the link. Looking at the site, the problem is that the images are portrait. So we are constraining a 3072x4608 image into a 200x200 square, which makes it 133x200. Then we’re ‘filling’ a 222x150 box with it. So we’re displaying an image 133 pixels wide into something 222 pixels wide.

One solution here is to stop ‘filling’ the banner with the image, and ‘fit’ it instead. That’s the approach we take in the topic list thumbnails:

Screenshot 2020-08-24 at 15.02.58

Adding a new setting to the theme component for this would be #pr-welcome if someone would like to work on it.


This looks great, I like that the tiles don’t overwhelm the UI. I had a couple questions about configuring it.

I haven’t been able to get the featured tiles to appear on my category pages - only the homepage. My configuration is below (with my category names blacked out since we don’t want to share those right now). Anything I’m missing here?

Current config

My second question - is there a way to set default images to use for the tiles, as opposed to ones pulled from the topics? We’re often going to have topics to feature that don’t have images, but still want it to look nice. If there’s not a built-in way currently, would that mean modifying the CSS or JS?


Hi David!

Amazing theme component. Like others have asked. Is there a way to add default images for topics without pics?

Ie Featured1.img Featured2.img if no image is detected?

Also have an issue with Component recognizing a tag that is visible to all but says cannot find tag when I try add it.

1 Like

Is there a specific image type (.jpg, .png, .tiff) that this works with? Images not showing up from 2 of 3 topics which I tagged, though the topic itself shows up.

OS - Mac 10.15.7 (Both Chrome, Safari and iOS version appear the same)

1 Like

the theme shows blank gray banner when activated on the site:

though the tag option is clicked and there are some topics on the feature-tag.

Agree. Still wondering if there is a work around to searching the entire topic for an image to use if one is there? Or will it ONLY take from the first post?

I first want to say thank you for this amazing component. It has taken our forum up a few notches visually and a brilliant way to revive old threads without the need for staff to bump them to keep them fixable.

I have a question though and I may be missing a simple solution to this, but is it possible to remove the OPs avatar from the tile… Or preferably just remove the clickablility of the OPs avatar?

Thank you for this David, I am trying to get display-on-categories and scope-to-category working but I can only get the featured tiles to display on Latest and Categories home page, not the individual categories. Any idea what I’m doing wrong here, below are my settings. I have tried this with all other TC’s disabled and in safe mode with unofficial plugins disabled. I don’t see anything in the console or logs related to this.

Settings screenshot

Also, is there any way to add spacing between the images?

1 Like

IS there a wat to show 4 tiles in desktop and just 1 or 2 on mobile? It doesn’t look so good on it. Thanks!

Do you have editors-pick topics in every individual category?

You could do this using CSS, yes. Something like

.featured-tiles-container {
    gap: 1em;

This could also be done with CSS. To hide the 3rd, 4th and 5th square on mobile, you could do something like:

.mobile-view .featured-tiles-container > .featured-tile:nth-child(2) ~ .featured-tile {
    display: none;

Yes, I even tried setting it to only one category where the tag is used and it does not show up in that category. I tried different tags that are not part of tag groups, a category without restricted tags, but nothing seems to work. I also tried another site I have that is much simpler, doesn’t have TLP installed, etc. and it doesn’t work there either, even tried featuring a category rather than a tag, still doesn’t show up in any categories.

This works perfectly in firefox and chrome, but not safari. Any other ideas?

Also, a small feature request to have a title for the featured images, because how are people supposed to know what these images are? I know, I know, submit a PR, but trust me you wouldn’t want me to :grin: Just something like this:

Same here. I’m trying out the component on a new instance, so there’s not much else to disable. The featured tiles only show on Latest and Categories.

1 Like

Hey @david

In my tests for some existing topics the image is not appearing. I am running on latest test-passed.
What I tried so far:

  • put the image into the first line of the first post
  • renew HTML of the first post
  • removing and re-adding the featured tag
  • issue persists in theme preview as well

Any ideas?

I have this exact same issue. Were you able to fix it?

Any reason why this does not show on category pages even tho the option for it is ticked?