Topic Previews 🖼

Add images, text and other topic items in Discourse topic lists, similar to Reddit.

Topic List Previews allows you to:

  • Add images, excerpts, buttons and topic stats to topic list items; and

  • Change the layout and style of topic list items

  • Add ‘Featured’ topics above topic lists and topics.

These settings can be applied to all or selected topic lists on a site-wide or category-specific basis.

:computer: Get the code

:raising_hand_woman: Request a feature

:bug: Report a bug

:man_technologist: Maintainers: @merefield

Pinterest (Masonry) Style aka 'tiles’

Relevant settings
  • topic list tiles
  • topic list thumbnail
  • topic list excerpt
  • topic list action
  • topic list thumbnail width
  • topic list thumbnail height

Basic Style

Relevant settings
  • topic list thumbnail
  • topic list excerpt
  • topic list action

Featured Images

Relevant settings
  • topic list featured images tag
  • topic list featured images count
  • topic list featured width
  • topic list featured height
  • topic list featured title
  • topic list featured excerpt
  • topic list featured order

The main and Discovery settings are in Settings → Plugins. The Category equivalent are in each Category’s Settings.

Examples in the Wild :seedling:

Support :heart:

You can donate to support the development of this plugin. Select “Topic list Previews” as the “Cause”. If you have an account on my sandbox, you will appear as a project “Backer” in the Topic List Previews category description on my sandbox. All donations are split equally between current maintainers.

Contributors :raised_hands:

Many folks have contributed to the development of this plugin through both feedback and direct development work. In particular:

  • @angus is the original author

  • @pmusaraj who has contributed various pieces of code

  • And a whole lot of users who have given great feedback, in particular @Johani, @Pad_Pors, @bartv, @_vincent, @keith1, @ChrisBeach and @ckshen.

How to safely install or update when using our plugins:

Pavilion’s update schedule and support policy

This plugin is one of the Pavilion family of open source plugins.

Pavilion will focuses on ensuring compatibility of a core set of its plugins with Discourse Core tests-passed branch during the first 5 days of every month only.

Any bugs which arise because of an incompatibility will be addressed asap during this ‘supported period’, preferably by the 7th day. Low severity or Beta feature bugs may not be addressed by this date, but obvious things which are ‘breaking’ a forum should be resolved.

If you’ve not used the plugin before, it is safer to adopt it within the support window, so add it and rebuild your site within the first five days of any month, otherwise it’s possible you may be introducing an incompatibility and we might not be around to help.

More about this policy here: Pavilion's Support Policy and Schedule

When using topic tiles, is there any way to render the subcategory on the topic?

In other words, if I have “Subcategory A” and “Subcategory B” under the category where I’m displaying the tiles, is it possible to show anything like the standard Discourse bullet/box/etc. that would appear in a traditional topic listing for topics beneath that point in the tree?


Hi Michael.

Not sure I understand the request? The Topic Preview should show its correct subcategory (if it’s residing in one) under the title, exactly like a normal Topic List entry. Indeed we are not reinventing the wheel here, the exact same helper is employed to display the (sub)category.

Topic Previews aren’t themselves a navigation aid. All that is shown is Topic meta.

The Navigation at top should be unchanged.

Perhaps you could illustrate what you mean with a screenshot comparison?

Sorry about that. I realized that topics in 3rd-layer sub-sub-categories are only rendered “up the tree” if they are actual topics that aren’t “About this Category” topics, which is what I was looking for and thought would have appeared. Once I added some more fake data topics, everything looks good. :blush: :+1:

1 Like