Topic List Previews (TLP)

[merefield (Robert)]

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

	Summary	The original Topic Preview component that allows you to add images and excerpts (and more!) to the Topic List whilst being able to configure what additions appear on what list.
	Repository Link	GitHub - merefield/discourse-tc-topic-list-previews: Enriches the content and layout of topic lists
	Install Guide	Installing a theme or theme component
	Sponsorship	Please consider becoming an ongoing sponsor of my open source work at a level that suits your or your organisation’s resources and needs to ensure this component gets the maintenance it deserves and continues to work for your site in the future.

Enjoying this Theme Component? Please it on GitHub

Install this theme component

Works really well with Discourse Bars 🍻 🍸 (a sidebar framework)!

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).

The Sidecar

This can be complemented with the ‘sidecar plugin’: https://github.com/merefield/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)
• Colourisation of background based on dominant colour of the thumbnail
• Processing of YouTube 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.

Plugin install guide: Install plugins on a self-hosted site

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

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

which has wide format option (behind setting topic_list_tiles_wide_format):

This works responsively so will collapse to masonry format if not given enough width (and vice versa).

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

Examples in the Wild

• StarZen - An Unofficial Star Citizen fansite
• https://www.artofsm.art/

[raghukamath (Raghavendra Kamath)]

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 (Robert)]

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

[merefield (Robert)]

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 (Raghavendra Kamath)]

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

[merefield (Robert)]

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 (Robert)]

@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 (Raghavendra Kamath)]

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 (Robert)]

@raghukamath

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

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]

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 (Robert)]

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]

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

[merefield (Robert)]

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.

https://github.com/merefield/discourse-topic-list-previews-theme/pull/7

[sofi.pocketful (Sofi)]

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 (Sofi)]

^ 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 (Robert)]

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 (Sofi)]

Hi Robert,

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

[flash]

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 (Robert)]

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 (Raghavendra Kamath)]

@merefield

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.

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.