Topic List Previews

(Luka Renko) #210

Is there a way to get topics thumbnails on Categories+Latest view?
I have enabled topics preview thumbnails on all views on desktop, but this one stays with icon images.

I have also evaluated mobile- views, but it gets very strange looking, as some topics have no thumbnail, some thumbnail, but some image of last poster (user). The list looks very broken…


Not that I’m aware of, the template simply isn’t over-ridden for that view.

Just guessing but I suspect the original intention was to include the user avatar where there was no thumbnail. The lack of either is more concerning and may relate to the issues you mentioned previously.

I’m currently putting finishing touches to a PR that will provide Tiles view on Mobile.

(David Kingham) #212

I’ve just noticed that the featured topics are not updating on my site. Take a look at and then look at the tag Topics tagged editors-pick there are new posts with that tag which are missing.


David, this was a known issue, then a fix was released. Unfortunately the fix slowed things down immensely as reported by @bartv, so the fix was pulled. The workaround is to uncheck hotlinking, then to recheck it after the featured image has been populated. No ETA on ultimate fix as yet as a lot of other stuff going on. Hope the workaround is acceptable.

(Bart) #214

After unchecking hotlinking, you’ll have to rebuild the post that contains the image. That will populate the right data.


Finally (phew!), big PR merge this morning! (a nice round ‘#50’ … how appropriate!):

Tiles Improvements:

  • Makes standard a 3/2/1 column arrangement which responds to width

  • New settings for gutter @lmy and transition time @bartv (set transition time to zero for no animation, this is forced on mobile)

  • AND … support for mobile!

Known issues

  • This version forces a 3/2/1 column appearance depending on view width. It may clash with your custom CSS. Suggest removing those elements in your local theme which change column number behaviour. This was done to avoid less experienced users having to mess with the CSS to get a more responsive view and to fix the logged out view. btw, Chrome doesn’t seem to allow the browser width to get small enough to dive into 1 column mode (Firefox is fine).

  • I’m not happy with the new post badges positions at the moment and intend to refine that at some stage.

  • On mobile: currently as the new tiles are rendered before being put into place by Masonry, the view can appear to momentarily ‘glitch’. This is most likely down to how much ‘grunt’ a mobile browser has versus desktop and how much processing power it is given to maximise battery life … i’m going to take a look at potential for some tricks to hide this.

  • On mobile: individual Categories are not yet supported.

  • Tiles view is always best with hot-linking on, however this setting temporarily prevents featured images being updated. If you have a new featured image, briefly switch this off, rebuild the HTML of the affected post and once complete, reactivate hot-linking.

Let me know if you find any more.

And there’s more …

Box shadows, highlighting with hover and ‘button click’ behaviour of a tile are not standard but left to the Theme designer. For your interest, here’s my local CSS to enhance the look of the tiles:

.grid-item {
    box-shadow: 3px 3px 3px 3px #888888;

.grid-item:hover {
    background-color: darken($secondary, 3%);
    lighten: ($primary, 70%);

.grid-item:active {
    -webkit-transform: translateY(+2px);
    -ms-transform: translateY(+2px);
    transform: translateY(+2px);
    -webkit-transform: translateX(+2px);
    -ms-transform: translateX(+2px);
    transform: translateX(+2px);
    box-shadow: 1px 1px 1px 1px #888888;

.topic-details .topic-excerpt {
    max-height: 300px;

NB Social view and Tiles view will be merged!

My next job is to simplify the plugin slightly. Now we have a mobile version of Tiles that can support a single column view, the next step is to simplify things by removing ‘social’ view in place of ‘tiles’. I anticipate this may take a couple of weeks. Feel free to let me know if you have any concerns.

(David Kingham) #216

Nice work!

I was able to successfully turn on tiles for mobile in the site settings, but the mobile settings are not available in the individual category settings

There is some weirdness with some images not staying in the grid on mobile:

Also, when a new alert comes up the grid does not get pushed down on desktop

In the previous version, I was able to increase the size of the first avatar using this, but I can’t find a way to target this in the new version, any ideas?!

td.posters {
    display: flex;
    align-items: center;
    margin-right: 25px;
    height: 51px;

  img.avatar {
    height: 25px;
    width: 25px;

.topic-list .posters a:first-child .avatar.latest:not(.single) {
    top: 1px;
    bottom: 1px;

.topic-list td.posters {
        height: 54px;

(Angus McLeod) #217

Just a general notice, if it’s not evident already, @merefield is doing the lions share of the work on this plugin now :lion:

We’re in regular contact, but he’s your go-to-guy for issues, features and implementation!


Thanks David, what phone is that? I’ll try and repro and adjust

(David Kingham) #219

iPhone 8 Plus…


David, apologies I can repro… in the meantime please treat yourself to an iPhone X/XS :wink: Unfortunately the Plus range currently renders two columns in portrait (it should not) … I’ll take a look and revert.


Added support for iPhone Plus range. Please update and confirm resolution.


That’s correct, not yet implemented.

That’s true. I’ve always put up with that but would be nice if that was tidier!

This is part of your issue. The CSS around tiles is very different. They are essentially arranged collections of divs and instead of being arranged using a table, the subcomponents of a tile are arranged with two CSS Grids. The div in question is now class .topic-users.


Just a little feedback.

Thanks to your update, I was able somehow to do what I wanted without JS, so thanks!

About the ratings, I found a way to do it. Not sure if the proper way, but here sharing what I did:


I’ve copied starRatingRaw from the plugin. Is there a way to require the file directly?

    didInsertElement: function() 
        const that = this;
        const topic = that.topic;
        if (!topic.ratingEnabled || topic.average_rating === undefined)
       'afterRender', () =>
            const html = new Handlebars.SafeString(starRatingRaw(topic.average_rating));

            that.$().find('.topic-title a').append(html.string); // Next to the title



I noticed a plugin outlet had been excluded:

    {{#unless tilesOrSocial}}
      {{raw-plugin-outlet name="topic-list-after-title"}}

I’ve put this back in in the next PR

(David Kingham) #225

That fixed it, thank you!

I figured this out, but I can’t seem to target the first avatar. I know this is totally out of scope of what you’re doing, so feel free to ignore me :slight_smile: this is what I’m trying to use that doesn’t work:

#list-area.tiles-style .topic-users .inline .avatar > a:nth-child(1) {
    height: 50px;
    width: 50px;


What about #list-area.tiles-style .topic-users .inline a:first-child img ?

(David Kingham) #227

Brilliant! I thought I had tried that, but I guess not. Thank you!

(Mindaugas Bartusevičius) #229

not working with lastes discourse version …


Hmmm … not sure I’d agree, been working with the latest version all morning on 1 Development and 2 Production websites.

That’s far from the only setting you need to set … have you enabled topic list thumbnails for any of the discovery lists, for example?