Topic List Previews


(Angus McLeod) #1

Topic List Previews allows you to modify Discourse topic lists in various ways. This is an explanation of how it works and the various settings available.

The ‘Topic Post’

For the features that allow you to add (‘preview’) parts of a post from the topic to the topic list entry, the post being ‘previewed’ (the ‘Topic Post’) is either:

  1. the first post of the topic; or
  2. the accepted answer of the topic (see Discourse Solved).

If the topic has an accepted answer it will take precedence over the first post.

There are currently no settings that allow you to change the logic of what is used as the Topic Post.

The Settings

I have grouped the settings below according to their functionality. All settings are applied to all topic lists individually. For non-category lists, the settings are in Admin > Settings > Plugins. They all start with the phrase topic list. For category lists, see Category Settings > Settings.

Parts of the Topic Post that you can add to the topic list

These settings each add new elements to the Topic List. They take up the bulk of the plugin logic.

  1. topic list thumbnails: Display a thumbnail of the first image used in the Topic Post. The thumbnails used are newly generated thumbnail images, optimized for the thumbnail size set in topic list thumbnail width and topic list thumbnail height (see below). Each generated thumbnail has two sizes: normal and retina (x2). If the user’s display is a retina display the retina thumbnail will be used.

  2. topic list excerpts: Display an excerpt of the text (see further topic list excerpt length below) in the Topic Post

  3. topic list actions: Include the Like and Bookmark actions, and the Like Count, of the Topic Post. These are real interactive buttons that operate in the same way the Like and Bookmark buttons on the actual post in the topic do.

Ways you can change the Topic Post parts

  1. topic list default thumbnail: This setting allows you to set a default image that will be used if the Topic Post does not have an image in it. It requires a direct url for the image.

  2. topic list excerpt length: This setting allows you to change the the number of characters from the Topic Post used in the topic list excerpt. Note that, unless the social media layout setting is enabled, the maximum height of each topic list item is 100px (this cannot be changed currently - 10/12/16). This means that if you make the excerpt too long, it will squeeze out the other elements of the topic list item. I would not recommend that you set the excerpt longer than 300 characters, unless it is the only part of the Topic Post that you are adding to the topic list item.

  3. topic list thumbnail width and topic list thumbnail height (G): These settings effect both: 1) the size of the thumbnail image that is generated when the Topic Post is posted; and 2) the dimensions of the thumbnail element in the topic list item. This means that if you set them to new values, the existing thumbnail image files will still be the same dimensions as the old values. If a thumbnail is larger than the current dimensions, it will be constrained to the current dimensions (not noticeable to the user, however you will be loading a file larger than necessary). If a thumbnail is smaller than the current dimensions it will not be stretched to fit them, rather a thumbnail with the thumbnail dimensions will be displayed.

  4. topic list show like on current users posts: This setting was requested by a user. Please review that use case before using it.

  5. topic list hotlink thumbnails: This setting was requested by a user. Please review that use case before using it. I would not recommend using it unless absolutely necessary.

Ways you can change the layout of the topic list

  1. topic list category badge move: Display the Category Badge of the topic underneath the topic title in the topic list item, rather than in a separate column.

  2. topic list social media discovery: This setting changes the entire layout of the topic list to resemble ‘social media’ platforms like Medium and Quora. By itself, it does not add new elements to the topic list. However, if any of the Topic Post parts are added by the settings mentioned above, e.g. thumbnails or excerpts, they will be handled according to the ‘social media’ style. There is a more detailed description of the setting itself here and an explanation of the thinking behind it here.

  3. topic list social media only latest: This setting was built by @pmusaraj. It restricts the social media layout to the ‘latest’ filter. This setting will be expanded to include settings for other filters and categories.

  4. topic list mobile previews: This setting applies all Topic List Previews logic to mobile web. All of the settings work mutatis mutandis on mobile web.

Further Development

The current development needs are:

  1. Bugfixes. As the setting list continues to grow there will be more edge cases to deal with.

  2. Performance. This is important and I would appreciate help with it. See my longer description here.

repo: GitHub - angusmcleod/discourse-topic-previews


Topic Icons indicating content?
Curated Home Plugin
Plugin Featured Image
Looking for advice on how to create a different homepage
Category image gallery possible?
Existing Feature or Plugin for Featured Image
Localized categories plugin
Featured Image Plugin
Featured Image Plugin
Topic-List-Previews plugin - Browser security warning due to preview images delivered over HTTP not HTTPS
[Paid] Grid Gallery Plugin
Wanted: Discourse Hacker News Plugin
Babble - A Chat Plugin
Cards design for topics?
Please help: My Discourse got really slow due to Topic Preview plugin
Wanted: Discourse Hacker News Plugin
Is there an event that fires when topic-lists are reloaded?
Topic Ratings Plugin
New per-category view mode: 2 columns; left is for topic list; right is for topic itself
[PAID] Flickr Gallery Plugin Development (USD$400)
Featuring images on topic list
Front page of discourse missing content
Reddit Style picture thumbnail on the left
Show "topic-excerpt" for all post on Latest Page
Suggestion: display vote/like counter in main page
Quick Messages Plugin
Quick Messages Plugin
Featured Image Plugin
Timeline Discourse
Custom Layouts Plugin
Topic list rendering is wrong with third-party plugin and latest version?
500 Error after docker and discourse upgrade
Sam's personal "minimal" topic list design
How can I implement a blog page in Discourse Forum Software?
How can I implement a blog page in Discourse Forum Software?
Links Category for Discourse
1.7.0-beta 4 / Topic List Previews - mobile UI bug - topic ages
Decorate topic list with jquery?
Discourse 1.7.0.beta4 Internet Explorer compatibility?
Discourse Sidebar Blocks
How to increase site speed
Timeline - News Feed UI in Topic List View
Has anyone created a News site using Discourse as a CMS?
Theming / Skinning Discourse to show Topics in a Responsive "Newsy" way
Discourse Sidebar Blocks
Optional blog-like “homepage” for the forum
(Pad Pors) #2

thanks for this, some suggestions which are more like fantasy rather than needed:

  1. is it possible that the thumbnail image get truncated rather than resized, in the main page?
    then as one goes on it, it becomes click-able and after click, the whole image (not cropped) being shown. this way one can keep the aspect ratio of all the images similar, and the main page looks better.

  2. also with the excerpt in the main page, it may be better if the category goes below the post rather than in front of it.

  3. with the excerpt of the topic or the solved answer in the main page, it’d be easier to be able to like/follow a post in the main page. since now one may know enough about the topic.


(Angus McLeod) #3

@Pad_Pors Sure, I’ll consider these when I work on this in the next few days.


(Angus McLeod) #4

I’ve updated the image to display as a background-image, using the following CSS

height: 100px;
width: 100px;
background-repeat: no-repeat;
background-position: center;
background-size: cover;

This gives you a 100x100 thumbnail for all preview images while maintaining the aspect ratio @Pad_Pors


(Tom Newsom) #5

This looks fantastic :slight_smile:
Will these display options be applicable on a per category basis?


(Angus McLeod) #6

@Tom_Newsom Sure. I’ll add that later today. I believe others want it too.

Just added support for tags (from the Discourse Tagging Plugin) in the topic list.


(Angus McLeod) #7

@Tom_Newsom Added.





(Tom Newsom) #8

How about that response time ladies and gentlemen how about that :smiley:


(Angus McLeod) #9

Generally speaking I’m open to requests on this plugin. I don’t have any particularly strong views on this, so let’s see what people want.

Features (as of 03/28)

  1. All topic list items have an excerpt. The default excerpt is the first 300 characters of the first post of the topic.

  2. The excerpt for solved topics is the first 300 characters of the solution (see Solved Plugin).

  3. Topic preview thumbnails can be turned on on a per category basis in Category Settings.

  4. Topic preview thumbnails are of the first image attached to the first post in the topic.


also with the excerpt in the main page, it may be better if the category goes below the post rather than in front of it.

@Pad_Pors While this is possible, I don’t think it’s advisable as a general feature. If you really want it I can add it as a setting.

with the excerpt of the topic or the solved answer in the main page, it’d be easier to be able to like/follow a post in the main page. since now one may know enough about the topic.

@Pad_Pors Perhaps show me an example from another app.


(Jonathan Williamson) #10

Thanks for doing this @angus! I’ll check it out.


(Pad Pors) #11

these changes are nice :smiley:

this example from quora may be useful:

  • also when clicking “read more”, if it shows the whole topic in the main page instead of going to the topic link, it would be easier to follow more topics there.

  • showing most liked answer (when likes are more than a certain limit) for topics without solved would be great as well.

  • it seems to create duplicate excerpt for pinned topic in the main page.


Images in title and character length of title
(Tom Newsom) #12

Just to be clear, its the excerpt and thumbnail I’d like to toggle per category…


(Pad Pors) #13

this is the view of excerpt in suggested topics at the end of a topic page, in quora:

may be more engaging than simple suggested topic list.


(@SenpaiMass) #14

The preview is nice, is it possible to have a Hover-On preview option as well. For example when you hover over a topic, An image with some few texts shows up as well.


(Pad Pors) #15

not sure if there’s a problem with my localhost or what, just reporting to understand:

  1. the [image] writing is only deleted from the admin posts, and not simple users posts.

  2. the thumbnail part of the plugin works with all the posts which were there before the plugin installation, but for the new posts that i wrote after installation, it does not show the image thumbnail.


(Angus McLeod) #16

the thumbnail part of the plugin works with all the posts which were there before the plugin installation, but for the new posts that i wrote after installation, it does not show the image thumbnail.

Is the setting I added turned on for those categories?


(Angus McLeod) #17

@Tom_Newsom Added another setting to toggle the excerpts

@Pad_Pors Actually, there was an issue with the way I was using custom_fields. Please pull the latest and try again!


(Angus McLeod) #18

it seems to create duplicate excerpt for pinned topic in the main page.

@Pad_Pors This should be fixed now


(Angus McLeod) #19

Ah, I think the issue is actually with multiple images. We were only slicing the first instance of ‘[image]’ in the string. We need to use gsub instead of slice.

excerpt.gsub!(/(\[image\])/, "") if excerpt

(Tom Newsom) #20

These seem to be ignored on mobile. Everything is excerpted by default