Featured Tiles Theme Component

david · July 3, 2020, 8:47am

A theme component which adds a row of featured tiles above topic lists:

GitHub - discourse/discourse-featured-tiles

On hover, the topic title and author will be shown:

There are lots of options available for selecting the topic source. Images can be fetched by tag, by category or by using a ‘top topics’ time period. Images can be scoped to the currently viewed category, or come from the entire site.

A setting is added to the user interface preferences which allows users to hide the banner on the current device.

Merlls_Rizzini · July 13, 2020, 1:00am

Wow.

This is amazing! It will attract even more clicks on my forum.

@david although not selected, its showing up on categories page. Also, if a topic has no images, can we set up a default image?

Edit: a member told me its only works on MacOS, cause he can’t see anything.

unknown

Pad_Pors · July 13, 2020, 5:48am

nice and functional theme .

how is it different from Homepage Feature Component? is it just about the style or there are some more in-depth differences?

david · July 13, 2020, 8:11am

It is mostly the style. Plus the Homepage Feature Component is only designed to use on the homepage. This one works in a few more places.

david · July 13, 2020, 8:11am

Can you ask the member to check their browser error console? And also let us know which browser they are using?

Merlls_Rizzini · July 14, 2020, 10:54pm

unknown

Firefox

unknown (1)

Chrome

david · July 15, 2020, 3:02pm

That error looks like it’s coming from another theme component. Can you try disabling them one-by-one?

ElForoViajero · August 4, 2020, 6:13pm

Hi,

With this configuration, the tiles should appear in all category pages right? My featured tag is “destacado”, however tiles do not show in the category page.

olex1216 · August 6, 2020, 4:29am

is it the same as the theme Topic List Previews ？

david · August 6, 2020, 8:41am

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.

Solari · August 8, 2020, 4:08am

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.

Thanks,
Ray

coke · August 24, 2020, 1:13pm

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

david · August 24, 2020, 1:24pm

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

Are you seeing something different?

coke · August 24, 2020, 1:50pm

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

david · August 24, 2020, 2:04pm

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.

hollyw · September 9, 2020, 9:07pm

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?

Heliosurge · September 24, 2020, 12:47am

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.

Fraudoctor · October 10, 2020, 3:59pm

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)

Fraudoctor · November 19, 2020, 10:23am

Again love this feature!

But since updating to new Discourse version not working.

I can see the expected look when in preview but not when in the normal site.

Could this be due to the server? Gif not working either. Wonder why?