Topic List Previews Theme Component

merefield · November 23, 2021, 12:26pm

This is now a Theme Component but has the option to add a complementary plugin.

Repository: get the code here: https://github.com/paviliondev/discourse-tc-topic-list-previews

This can be complemented with the ‘sidecar plugin’: https://github.com/paviliondev/discourse-topic-previews-sidecar

to add the following features:

‘actions’ (bookmarking, linking and liking from Topic List)
Thumbnail Picker in the Topic Meta Editor. (Pick any thumbnail from the entire Topic using a simple UI)
Optionally suppresses links in excerpts to make them look a lot better

The sidecar also includes some experimental features:

Colourisation of background based on dominant colour of the thumbnail
Processing of the thumbnails to remove any black borders (critical to determining the best dominant colour).
Option to recreate thumbnails on rebuild of Topic Post to allow you to quickly manage border elimination on an individual Topic basis.

You need at least the Theme Component, the Plugin is optional.

Examples: check out the list further down.

Request a feature or Report a bug: as a reply to this topic

Donate: we are reviewing our donations system. Please check back later :).

Maintainers: @merefield

Overview

Topic List Previews allows you to:

Add images, excerpts, 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.
Add User Wall to User’s activity page (aka ‘Portfolio’ Feature).

Adding the sidecar plugin (for those who can) affords you more features:
- ‘actions’ buttons on Topic List (bookmarking and liking)
- Thumbnail Picker in the Topic Meta Editor.
- Suppresses links in excerpts to make them look a lot better (long links in excerpts in Discourse can mess with layout)

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

This flexible feature-set allows you create a variety of different topic list styles, including

Basic Style

Relevant settings

topic list thumbnail
topic list excerpt
topic list action

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

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

StarZen - An Unofficial Star Citizen fansite
Aloha Player Killers Community
Real-Time VFX, which uses thumbnails and excerpts.

More info:

Much more info available at: Pavilion

Contributors

Many folks have contributed to the development of this component through both feedback, development work and funding. In particular:

@angus is the original author
@pmusaraj who has contributed various pieces of code
And many members of the Discourse community in particular @david, @Johani, @bartv, @davidkingham, @p16 …

raghukamath · November 29, 2021, 5:02am

Is there a way to make the featured image order based on the time the tag is added. Currently it brings the featured image of the topic which has recent activity thus pushing the latest tagged images down.

For example If I have 10 images I mark 5 of them as featured now those 5 are shown in the top bar. If I add 5 more tags these will replace the existing 5. But If any of the previous 5 topics have any comments or posts that image is brought to the front now.

merefield · November 29, 2021, 3:36pm

Tag? No, but there is this option to order by Created date:

merefield · November 29, 2021, 3:39pm

Warning: I’m going to be pushing a Tiles (item) layout change very soon. If you have some CSS tweaks these might need to be … erm … tweaked:

I promise I won’t do this very often, but this one is to tidy things up and facilitate some new functionality that might be appearing in the future …

Currently the change is on the beta branch.

raghukamath · November 29, 2021, 4:06pm

Yes that option helps a bit, but if any of the older post has any update then it comes in front.

merefield · November 29, 2021, 5:13pm

I’m only using the native options available within Discourse API (it’s a Theme Component at heart so you can’t change the API). When I get chance I’ll have a look at the ordering again. However, this came up a little while back and I made a change to help one of the users. Topic List Previews (legacy) - #1154 by merefield. I’m surprised this isn’t working as specced. You’d expect a Topic’s created_at to remain static despite new posts? Are you sure you’ve changed the setting and refreshed the browser?

merefield · November 29, 2021, 5:30pm

@raghukamath I’ve just tested this and it seems to be working as intended? It still will not change order in response to new Posts and respects created_at date. Please refresh your browser and try it again.

raghukamath · November 29, 2021, 5:36pm

Okay no problem. I’ll test more. May be I got confused due to the behaviour when option is enabled. Sorry to trouble you so much.

One other issue my members highlighted is about the unread and read topic color css fix not being applied to mobile browsers.

merefield · November 29, 2021, 5:37pm

Yes, that was still outstanding as previously stated. I’ll try to ship that with the layout update described above, probably within a few days.

flash · December 1, 2021, 12:17am

Hi I was trying to work with the git depreciated plugin when I couldnt override the css on mobile thumbnail. Kept reverting to height of 80px. Started searching and saw it was moved to component. Will I have the same issue and need to clone the component to change it or is there another workaround? I want mobile to have full width on the mobile browser.

merefield · December 1, 2021, 10:13am

Would the layout here not suit your needs: Topic List Previews Theme Component - #4 by merefield suit your needs? The new tiles have full width thumbnails. This is currently on the beta branch. Install that if you wish as an additional Theme Component and try it out. Remember to specify the branch when installing and edit the Theme Component name to make it clear it’s the Beta.

flash · December 1, 2021, 10:23am

This definitely would. I have it full width now how I wanted. Thank you.

merefield · December 1, 2021, 4:43pm

I’ve merged the beta branch:

the tiles internal styling has been modernised and tidied up. Thumbnails are now full width of column.
there are a number of CSS simplifications
mobile has had some minor layout improvements for non-tiles.
tiles titles should reflect prior visits on mobile now too.

sofi.pocketful · December 2, 2021, 1:19am

Hi there,

Thank you for this amazing component! I love the design

I’m relatively new in Discourse and don’t know much about the technical terms.

I have been having trouble with the images not showing in the list component. For some reason the images do show in the preview of the component but when I load the real thing the images aren’t there anymore.

^ This is the preview of the component

sofi.pocketful · December 2, 2021, 1:19am

^ This is how it looks when I load the real page

Now, I believe it has something to do with my discourse settings??

Is there a specific setting that has to be activated for this component to work? I really do not know why it is not working the way it should…

merefield · December 2, 2021, 8:19am

Hi there, thanks for your interest.

A couple of things:

If you’ve never installed a similar component or plugin before there may be a delay before all the thumbnails are generated. This is a batch process and takes time. This process should start running in the background automatically once you’ve installed the component and added it to a theme. Check out your sidekiq queue. You may see a lot of queued jobs.
it’s necessarily not compatible with just any theme, there is always a possibility there is a clash: it’s only developed and designed with the default theme. Please test it on your site with just the default theme initially. You can adapt its look and feel but that will need to be based on this components special artefacts.

sofi.pocketful · December 2, 2021, 8:31am

Hi Robert,

Thank you for your reply! I’ll test what you suggested in my site

flash · December 5, 2021, 2:58pm

Hi Robert. Im bringing in a table with 3rd party javascript below the header and script breaks the previews when I use it in a component. Any ideas on a workaround?

merefield · December 6, 2021, 11:10am

If there’s an error in that script which is stopping javascript from executing, that could break TLP layout code which requires javascript to be on best behaviour. Look for red errors in your browser console.

raghukamath · December 9, 2021, 5:56am

Hi I enabled the created at date option as you suggested. It somewhat solves the issues. but I think in older plugin the order was set according to the date the post was tagged. Also the problem of older image appearing in front page on any update or reply to the topic makes it hard for a recent image to stay featured. Suppose I make an image featured and if some older post from a year ago gets a new reply the front page will have that post’s featured image. If many odler post get replied then newly tagged featured image go away.