Topic List Previews Theme Component

Theme component
1

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

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

Install guide: Install a theme or theme component

Install this theme component

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.

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

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

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

sandbox Examples: check out the list further down.

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

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

:man_technologist: 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

27%20PM
27%20PM2230×514 214 KB

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

image
image1098×772 125 KB

which has wide format option (behind setting):

image
image1104×610 81.2 KB

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

33%20PM
33%20PM2248×782 501 KB

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

Examples in the Wild :seedling:

Contributors :raised_hands:

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

49 Likes
2

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.

3 Likes
3

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

image
image699×57 1.9 KB

1 Like
4

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:

image

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.

3 Likes
5

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

2 Likes
6

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?

3 Likes
7

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

3 Likes
8

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.

1 Like
9

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.

10

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.

11

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.

1 Like
12

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

1 Like
13

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.
4 Likes
14

Hi there,

Thank you for this amazing component! I love the design :heart_eyes:

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.

image
image1920×1440 144 KB

^ This is the preview of the component

1 Like
15

image
image1920×1440 121 KB

^ 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…

16

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.
1 Like
17

Hi Robert,

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

1 Like
18

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?

19

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.

1 Like
20

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.