Topic List Previews Theme Component

theme
#1

This is now a Theme Component, the plugin was deprecated

GitHub-Mark-32px Repository: get the code here

See further here: Which one to install: Plugin or TC? - Topic Previews - Pavilion

sandbox Examples: check out the list further down.

:raising_hand_woman: Request a feature

:bug: Report a bug

: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

Screenshot%20at%20Nov%2009%2014-11-37
Screenshot%20at%20Nov%2009%2014-11-371111×460 761 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:

More info:

Much more info available at: Topic Previews - Pavilion

Contributors :raised_hands:

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

How to safely install or update when using our plugins:

Pavilion’s update schedule and support policy

This Theme Component 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 Theme Component 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 - Support - Pavilion

21 Likes
Hi, is there a plugin for user image galleries?
Topic List Previews (legacy)
Topic List Previews (legacy)
Is there a Kanban theme for Discourse?
Chat channels and chat nav seem to have broken
2021: The Year in Review
#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

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

image
image699×57 1.9 KB

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

1 Like
#5

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

1 Like
#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?

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

#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.
3 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

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