Topic List Previews

(Angus McLeod) #326

Hey folks.

As this is default behavior, I’ve made this default behavior in this plugin as well.

I’ve added this as a setting. It’s off by default.

I’ve added a setting so you can change the topic excerpt character length. Keep in mind that there is a maximum height of topic list items of 100px and that, regardless of excerpt length, the space afforded for the excerpt will be determined by the space left over after the combined height of the topic list elements in the main topic list item column are subtracted from 100. For example, if you have the category badge move setting enabled, then the category badge will appear in the main topic list item column, reducing the space available for the excerpt. We could also allow the maximum height of the topic list items to be a setting, however that is a slightly different issue.

I’ve added the ‘fallback’ part of this. You can now set a default thumbnail on a site-wide or per-category basis.

Finally, it seems as though the core functionality is solid enough for this to move to v0.2. This doesn’t mean that there won’t be issues in the future, but, as you can see from this update, further developments are relatively contained (i.e. they don’t require significant refactoring).

(Tobias Eigen) #327

Many thanks! :sunflower: Looking good, Angus! I installed on namati and it’s looking decent. One issue I see is that the per-category fallback thumbnail is not showing up on the front page/latest. Take a look at and Environmental Justice - Global Legal Empowerment Network Community Discussions and you’ll see the difference.

(Philip Battin) #328

Can’t wait to start using those new features!

We just went online with an update which is making use of this plugin to enable voting from the frontpage. Check it out here!

(Pad Pors) #329

Many thanks Angus for your effort and the nice plugin you developed :smiley:

(Angus McLeod) #330

Fixed :slight_smile:


Great plugin. Quick question: are there any plans to introduce the ability to choose the size of the thumbnails as a setting in the admin interface? Right now they are set at 100x100, but I would like the ability to have larger thumbnails, in fact large enough to be not so much thumbnails as full-width images in the topic list.

If there aren’t any plans to add this as a setting in the plugin itself, would a fork be a reasonable course of action?

(By the way, Angus, my plan is to use this plugin on the road to this.)

(Angus McLeod) #332

Hey, what you have in mind is similar to what @Pad_Pors is after. Have a read of this, and related posts:

The question is how this would work from a universalizable design perspective; i.e how do you add this feature so that it works with the existing features of this plugin and with the design of the Discourse discovery stream.

If you could come up with a spec in this spirit, I’d be happy to consider it.


Sounds good. So, my take on the spec for this from the plugin’s end would be one task only:

  • Serve thumbnails at 100x100px by default, but allow administrators to change the thumbnail size preset

That would allow users to use larger thumbnails within the current layout, but it would also allow people like myself to experiment with layouts using larger thumbnails.

I agree that what I am trying to achieve (and the Medium/Quora layouts) fall outside the scope of this plugin. I think that the plugin should not modify the layout of the topic list (esp with regards to the stats columns on the right). But in my case, if the plugin could allow for a larger thumbnail, I can do some CSS/JS tweaks that would allow me to show the topic list more similarly to the Medium/Quora layouts. In fact, to that effect, I would copy the styling tweaks done by and would just need to add the thumbnail and excerpt to it.

(Angus McLeod) #334

Sounds reasonable. I’ll add a setting to change the size of the thumbnail. I’m currently on holiday, so I may not get to this for a few days.


I did some tests on this, and what I suggested above does not scale well. The main issue is that when generating a thumbnail, it makes sense to specify a width/height combination. However, when using a large image, the height is not needed, in fact it’s a nuisance because it will force the thumbnail to be cropped or stretched.

So instead, I tried it with a simple checkbox: Show full-size image in topic list. When checked, the full (original) image would be shown, and the css adapted so that it displays right above the title.

The result is:

(Of course, the use for this setting is really for sites that will modify the rest of the topic list css. But even without any changes, this does display fairly well. One setting that was necessary to change was the maximum height of thumbnail images in the core Discourse setting, I just set that field as empty.)

I would be more than happy to clean up my test code and submit it as a PR, @angus.

One last note: I did notice that editing the post and replacing an image does not update the thumbnail that is stored.

(Angus McLeod) #336

hm, I think we’ll need to tinker with that a bit first. We can’t have the big white vertical spacing on the right, or have a setting that assumes the arrangement it produces is not the final product. Also, I don’t think you’re going to really want original-sized images in the topic list, for both aesthetic and performance reasons. Right? Could you share what your end result is? i.e with your additional css.

You know I think we’re getting to the point where we may as well bite the bullet and just make a ‘social media’ arrangement. Enough people seem to want it. I also want it now too. I guess we’ll just make the container thinner in the plugin itself when a certain setting is on…

I’m writing this on a mobile phone, otherwise I’d draw a picture, but I’m going to add a few settings to produce the medium/quora arrangement I previously outlined, with a thinner list container. I get back tomorrow, so I’ll do it early next week.

Part of that will be a setting to manually set the size of the topic preview image. Like the other settings, this setting will be independent, so if medium / quora is not what you personally have in mind you can still achieve your desired result.

Indeed. Will fix that too. Or happy to take a PR :slight_smile:


Thanks for looking into this while on holiday!

I do agree that a social media arrangement would make sense. I don’t have a pretty version of my specific implementation yet. But my ideal scenario would be the following:

  1. Have a sidebar (temporarily using this plugin, but I would prefer the sidebar to be shown only on the frontpage of the site, nowhere else)
  2. Display a quora-like layout only on the homepage

The design for this would look similar to what I had earlier posted on the issue I opened for an alternate homepage. But the updated version, is the following :

So, for sake of discussion, let’s call this the “featured image layout”. The image here would have a max width of 600 pixels (but no set height) because of the sidebar. The table headings are hidden (like on The meta info (users in discussion, comment count, last update) would go either floated right to the title or aligned with the category/tags labels.

The other technical requirement here that would be nice, would be to have checkbox on the topic edit form that would toggle between showing the featured image or not. Editorially, it would be nice to choose when to show and when not to show.

Final thought: Initially, I thought that points 1 and 2 meant that this would be a separate plugin. But now I am thinking that it could be a feature of Topic List Previews that generates the layout above for a specific page. So the settings would be:

  • turn on the social media layout for homepage (would automatically include a sidebar)
  • show specific elements on sidebar (latest posts from category x, summary of categories, etc.)


Hi, I have installed the plugin and enabled it for one single category. Can we show topic previews of that single category on the front page also rather than showing only on that category page?

(Angus McLeod) #339

Hey, thanks for the interest. We used to do that, however the general consensus was that it is better to contain the preview to the category in that scenario.

(Angus McLeod) #340

I’ve added the first part of this: a setting for topic thumbnail size. Will add some more settings to create the social media look in the next few days.

(ginger man) #341

@angus Thanks for the plugin.

Are you planning to implement this plugin from a mobile view perspective. ?

(I checked few of the sites using this plugin and they show the default mobile view)

(Angus McLeod) #342

I’ve slapped together an initial implementation of the ‘social feed’ arrangement. Still needs some work so it’s on the branch feature/social-feed. I wouldn’t recommend using this branch in production at the moment.

This is what I’m thinking at the moment:

  • I’ve made the width of the feed 600px. Perhaps this should be a setting.

  • I’ve broken down the setting topic_list_thumbnail_size into separate width and height settings. I’m currently recommending 600x150 for the thumbnail size when the social feed arrangement is turned on.

  • The replies, views and latest activity figures are currently hidden. I’m wondering where to put them. The primary candidates are next to or under the posters and category at the topic of the topic box, or in the bottom right corner.

  • I’m wondering about the best way to deal with topic posters / users. Topic List Users in Discourse is a list of relevant participants. In other platforms that use this kind of ‘social feed’ arrangement typically there is only one user listed, either the OP (medium) or the ‘top’ poster (Quora). As Discourse is for discussions, rather than QnA or opinion pieces, I think it would be better to keep the list of relevant participants.

  • I’m wondering how it should be broken down. Ideally, this arrangement would be achieved through a number of settings, rather than a single setting that makes all the changes as it is currently. This would allow for greater customization and experimentation.

  • I’m also wondering if there’s a better way to achieve this rather than jQuery…It’s getting to the point now where it might make sense to actually override a template. I’m very hesitant to do this however as that makes it harder to maintain and customize. I wonder if there is a way I can add widgets to the topic list…

(Angus McLeod) #343

Yes I will do this soon. This weekend perhaps.

(Panteen Pro-V) #344

Just quick feedback on the UI.
For thread that do not have photo, can you display the AVATAR of the thread creator instead of not displaying anything? ( currently it looks odd as some thread have photo thumbnails and some don’t , it breaks the symmetry of the layout)

(Angus McLeod) #345

Hm by ‘avatar’ do you mean something other than their profile picture? Currently user’s profile pictures are displayed in the top left.

Also, I’m not sure I agree. Sites that have this kind of feed allow for posts without images. e.g.