The Featured Tiles theme component, officially maintained by Discourse, adds a customizable row of featured topic tiles above topic lists, with hover previews of titles and authors. It supports sourcing topics by tag, category, or top topics over a time period, and allows scoping to current categories or site-wide. Users can hide the banner per device via preferences. Settings include topic source, image display rules, mobile visibility, and tile count. Several users report issues: tiles not appearing on category pages despite settings davidkingham, manuel, Reaxgrim, Krischan; images not displaying for tagged topics jrgong, linzo, Eagle_Reptiles; and inconsistent behavior with multiple tags Nesha. Some suggest adding default images for topics without photos Merlls_Rizzini, Heliosurge, Ahmed26, hoangphuctran93, or excluding empty-image topics David_Ghost. CSS workarounds for spacing david, soeren-1 and mobile responsiveness ElForoViajero are shared. A fix for category page display was later provided by awesomerobot. Feature requests include next/prev buttons hoangphuctran93, lazy loading, and image-only fallbacks. Browser-specific issues (e.g., Safari) and portrait image scaling problems were also noted coke, david.
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.
Settings
Name
Descriptions
featured category
The category containing featured topics. Set to 0 for all categories. ‘Scope to category’ will override this setting.
featured tags
The tag which contains the featured topics. This must be publicly visible.
topic source
Which algorithm should be used to pick topics
top period
The time period used when “topic_source” is set to “top”
randomize topics
Randomize the selection and ordering of topics
display when unfiltered
Display on the unfiltered latest page
display on categories
Display on category pages
display categories
Display the tiles when viewing these categories. Blank for all categories
maximum topic count
The maximum number of topics to display
scope to category
Filter topics to the current category
display mobile
Display on mobile devices
Translation
Default
preference_header
Featured Topics Banner
preference_description
Show featured topics banner on this device
Hosted by us? Theme components are available to use on our Standard, Business, and Enterprise plans.
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.
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.
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 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:
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?
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?
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.
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?
.
