Topic List Previews (TLP)

@merefield

I installed the Topic List Previews (TLP) plugin and want to display topic thumbnail previews on the search results page, but it’s not working, it just only display topic 's tiles and excerpts. But thumbnails work on other pages like /new and /latest. I tried modifying the TLP configuration, but none of my changes succeeded. I noticed that this page mentions another plugin (discourse-topic-previews-sidecar), so I suspected the issue was due to not installing it. However, after installing that plugin, the search results page still does not show thumbnails.

I have a few questions:

  1. Is installing TLP alone sufficient to enable thumbnail previews on search results, or do I need ​both TLP and discourse-topic-previews-sidecar?

  2. Are there any special TLP configurations required for search results? Why aren’t my settings taking effect?

  3. I want to have thumbnail previews on the search results page like this website does. How should I configure it? Could you please describe the key configuration steps in detail?

Attached are screenshots of my current configuration.

TLP config

[
	{
		"setting": "topic_list_tiles_topic_lists",
		"value": "latest|new|unread|top|tag|activity-topics|activity-portfolio|latest-mobile|new-mobile|unread-mobile|top-mobile|tag-mobile|activity-topics-mobile|activity-portfolio-mobile"
	},
	{
		"setting": "topic_list_tiles_categories",
		"value": ""
	},
	{
		"setting": "topic_list_tiles_tags",
		"value": ""
	},
	{
		"setting": "topic_list_thumbnails_topic_lists",
		"value": "latest|new|unread|top|tag|suggested|agenda|activity-topics|activity-portfolio|latest-mobile|new-mobile|unread-mobile|top-mobile|tag-mobile|suggested-mobile|agenda-mobile|activity-topics-mobile|activity-portfolio-mobile"
	},
	{
		"setting": "topic_list_thumbnails_categories",
		"value": "42"
	},
	{
		"setting": "topic_list_thumbnails_tags",
		"value": ""
	},
	{
		"setting": "topic_list_excerpts_topic_lists",
		"value": "latest|new|unread|top|tag|suggested|agenda|activity-topics|activity-portfolio|latest-mobile|new-mobile|unread-mobile|top-mobile|tag-mobile|agenda-mobile|activity-topics-mobile|activity-portfolio-mobile"
	},
	{
		"setting": "topic_list_excerpts_categories",
		"value": ""
	},
	{
		"setting": "topic_list_excerpts_tags",
		"value": ""
	},
	{
		"setting": "topic_list_actions_topic_lists",
		"value": "latest|new|unread|top|tag|suggested|agenda|activity-topics|activity-portfolio|latest-mobile|new-mobile|unread-mobile|top-mobile|tag-mobile|agenda-mobile|activity-topics-mobile|activity-portfolio-mobile"
	},
	{
		"setting": "topic_list_actions_categories",
		"value": ""
	},
	{
		"setting": "topic_list_actions_tags",
		"value": ""
	},
	{
		"setting": "topic_list_set_category_defaults",
		"value": false
	},
	{
		"setting": "topic_list_dominant_color_background",
		"value": "tiles only"
	},
	{
		"setting": "topic_list_show_like_on_current_users_posts",
		"value": true
	},
	{
		"setting": "topic_list_tiles_larger_featured_tiles",
		"value": true
	},
	{
		"setting": "topic_list_tiles_wide_format",
		"value": false
	},
	{
		"setting": "topic_list_portfolio",
		"value": true
	},
	{
		"setting": "topic_list_portfolio_filter_type",
		"value": "tag"
	},
	{
		"setting": "topic_list_portfolio_filter_parameter",
		"value": ""
	},
	{
		"setting": "topic_list_default_thumbnail",
		"value": ""
	},
	{
		"setting": "topic_list_default_thumbnail_fallback",
		"value": false
	},
	{
		"setting": "topic_list_thumbnail_resolution_level",
		"value": 3
	},
	{
		"setting": "topic_list_thumbnail_width",
		"value": 150
	},
	{
		"setting": "topic_list_thumbnail_height",
		"value": 100
	},
	{
		"setting": "topic_list_thumbnail_width_mobile",
		"value": 50
	},
	{
		"setting": "topic_list_thumbnail_height_mobile",
		"value": 60
	},
	{
		"setting": "topic_list_thumbnail_first_x_rows",
		"value": 0
	},
	{
		"setting": "topic_list_featured_images",
		"value": false
	},
	{
		"setting": "topic_list_featured_images_resolution_level",
		"value": 2
	},
	{
		"setting": "topic_list_featured_images_category",
		"value": false
	},
	{
		"setting": "topic_list_featured_images_from_current_category_only",
		"value": true
	},
	{
		"setting": "topic_list_featured_images_tag",
		"value": ""
	},
	{
		"setting": "topic_list_featured_images_tag_show",
		"value": true
	},
	{
		"setting": "topic_list_featured_images_count",
		"value": 0
	},
	{
		"setting": "topic_list_featured_images_order",
		"value": "latest"
	},
	{
		"setting": "topic_list_featured_width",
		"value": 0
	},
	{
		"setting": "topic_list_featured_height",
		"value": 250
	},
	{
		"setting": "topic_list_featured_height_mobile",
		"value": 150
	},
	{
		"setting": "topic_list_featured_title",
		"value": ""
	},
	{
		"setting": "topic_list_featured_excerpt",
		"value": 100
	},
	{
		"setting": "topic_list_featured_details_always_show",
		"value": "only on hover"
	},
	{
		"setting": "topic_list_test_image_url_timeout",
		"value": 5000
	},
	{
		"setting": "topic_list_fps_search_grid",
		"value": true
	},
	{
		"setting": "topic_list_fps_search_blurb",
		"value": true
	},
	{
		"setting": "topic_list_fps_search_author",
		"value": true
	}
]

hello

I guess my problem is linked to TLP but unsure. I updated discourse yesterday to latest and, since then, got thumbnails on top instead of the left on mobile (and only mobiles, could not reproduce with dev tools)

forum : cwowd
(may not be related to previous ‘bug’, no difference if glimmer mode is set to auto or enabled)

1 Like

If you clear out the “Topic Lists” settings you should be able to switch off the unwanted features, e.g.

There are those for thumbnails, excerpts, actions etc.

Cannot repro. On latest TLP formatting is perfect. Remove all other theme/theme components and retry.

Very possibly you have something else active that is conflicting.

OR your mobile thumbnail size is too large.

Thank you for trying :wink:

The size of thumbnail images : I tried, and they display correctly on the left at… 12px wide. Needless to say, they are invisible in this case.

If I understand correctly what’s happening, a column is “added” on the left to display the icon of the last message’s author (when we should have instead the thumbnail assigned to the topic). And the thumbnail ends up positioned above the topic title due to lack of space to align to the left as intended.

1 Like

Should look like this. But yeah. Google (in my case) only gave me this much width :sweat_smile:

If you want bigger images switch to tiles view on mobile?

That’s the way it used to work, for my greatest satisfaction, for many years :wink:

Update to 3.5.0.beta2-dev broke something but can’t figure what. Or why this f** author column came back (and got no help from dev toolsall is fine when it emulates mobiles display)

It should display the avatar if there’s no thumbnail.

I’m not seeing any issue on latest? (so long as thumbnails are small enough :slight_smile: )

In fact, I’m expecting this TC to be more stable than before because it can now use the new official API for overrides and doesn’t rely on template replacement.

I had to remove TLP for all mobile pages.

Side issue is that dev tools do not emulate real mobile pages (eg, mine still have thumbnails on “mobile view” dev tools while TLP is only activated for desktop pages)

Can you summarise why? I mean I’m doing my best with the real-estate that’s there?

as said previously (Topic List Previews (TLP) - #594 by Thierry_Trégaro), since last discourse update, thumbnails were displayed on top of title on mobile (instead of left), leaving a way too large whitespace on left.

sadly, no choice but to downgrade to member pict

I’ve temporarily turned off tiles for this view. I don’t see an issue. This site is up to date as of yday.

Pixel 6a

It makes sense that the thumbnail has to be of similar size to the avatar in order for everything to lay out correctly …

… or just switch to Tiles view.

Was able to use dev tools… So, to illustrate, I tried to activate again on mobile-latest and here’s what I got.

If I set the thumbnail to 10px.

can’t find the way to not display that column on the left…

You are overriding the settings in Theme 3?

In any case something is strange with your setup.

It’s like you are not using the same template.

Here is starzen with the same dimensions:

Ah! It might be a bug, apologies!

If I disable the “default image” I get an issue. I wonder if it’s related?

OK try this update:

If you think Topic List Previews is awesome & I did a great job, you can buy me a coffee :coffee:

thanks for your patience! Some new bugs appeared because of the complete rewrite I had to do for the new API and incoming restrictions.

see no change. FYI, this is witout any other composant added to light theme

laptop view

mobile view

after reading your post, I also tried with a default image (from ionic). No real change (except it rightfully removes authors picture).

I can align the display on the left (got a

.mobile-view .topic-list .right {
    margin-left: 60px !important;
}

in my CSS. Looks better but still have the thumbnails on top of titles.

edit : no<w that I figured this, finally solved my problem with a bit of CSS grid. Not perfect but fine.


on a side note, I got one request : it would be nice to be able to add excerpt for new-topic and not new-replies (or whatever any forum prefer^^)

I cannot repro your issue, even pushing thumbnail width to 90px:

(though this is too wide for dates and counts).

Are you sure you have no other Components active that are interfering?

TLP out of the box is working fine, even when things get very narrow:

I eventually found the issue and this should be fixed. There was an error in the default thumbnail logic.

2 Likes

I see some of the PreviewsThumbnail instantiations don’t have @url
Is this intentional?

1 Like