Topic List Previews

(Angus McLeod) #487

Mobile web arrangements are separate from desktop web arrangements. You need to add both latest and latest-mobile if you want social arrangement to apply to the latest feed on both desktop and mobile.

Every single discovery view has a different setting.

(Pad Pors) #488

I’m little bit confused , I was talking about desktop view, should I add latest-mobile arrangement?

there were two issues:

  1. the images are get stretched to be 600px, while their aspect ratio/size is less.
  2. it’s not responsive, and when I decrease the size of window, I need to scroll to left and right.

(Angus McLeod) #489

Remind me where your discourse instance is again?

(Pad Pors) #490

it’s on:

p.s.; the responsive issue is resolved now! :open_mouth: :flushed: I am sorry for the wrong input, but last night on my laptop it didn’t behave responsive.

are the thumbnail images supposed to be all 600px in width?

(Angus McLeod) #491

Yeah :slight_smile:

In terms of the image issue, this is the way image sizes are handled.

  let previewUrl = thumbnails.retina ? (window.devicePixelRatio >= 2 ? thumbnails.retina : thumbnails.normal) : thumbnails;
  if (Discourse.Site.currentProp('mobileView'))
  	return '<img class="thumbnail" src="' + previewUrl + '"/>';
  let attrPrefix = params.isSocial ? 'max-' : '';
  let height = Discourse.SiteSettings.topic_list_thumbnail_height;
  let width = Discourse.SiteSettings.topic_list_thumbnail_width;
  let style = `object-fit:cover;${attrPrefix}height:${height}px;${attrPrefix}width:${width}px`;
  return '<img class="thumbnail" src="' + previewUrl + '" style="' + style + '" />';

To break that down it means:

  1. Retina devices use double sized images
  2. The various mobile views use the image at fixed sizes, so there is no need to apply styles.
  3. If the social arrangement is applied the style rules concerning images are set as max- settings rather than absolute settings, allowing images to keep the dimensions they were uploaded with.
  4. If the social arrangement is not applied the style rules concerning image are absolute settings.

The reason the images on your site are 600px in width is because you have the thumbnail width set at 600px. The width set in the settings sets the size of the thumbnail that is generated after you upload an image. This is the same behavior as the existing setting you are referring to. It means that if thumbnails were uploaded at times when the dimension settings were different, they will not stretch to fill the space. Notice the different widths for these thumbnails which were uploaded with different widths.

To fix the issue you are seeing, you either have to:

  • Reduce the width of the thumbnails in your settings; or
  • Upload higher resolution images.

I suggest you just do the later.


Hello @angus, did you find a solution to reduce the loading of topic list ?

Thank you in advance

(Angus McLeod) #493

Hey, I will take another shot at this performance issue soon. It’s on my to do list, but it’s not a simple fix.

edit: Looks like @fantasticfears has just made a PR to do just this! Exciting. I will review shortly.

(Dante) #494

Cool best plugin :+1::+1::+1:

(Duy Vũ Bá) #495

Your plugin isn’t compatible with a new update of v1.7.0.beta10 +70 . I want to inform you know.
I get this issue:

(Angus McLeod) #496

Thanks. Yes, this plugin has been affected by the Ember upgrade, I am working on bringing it up to speed. It may depend on certain work in Discourse core.

edit: this is the issue I’m currently trying to overcome (cc @kam44)

(Angus McLeod) #497

I’ve just committed various fixes to support the Ember 2.10 update.

Upgrading Ember to 2.10
(Nam Nguyen) #498

Hi @angus

I upgrade plugin and all topics disappeared :slight_smile:

(Angus McLeod) #499

hm. You’re running this on your local machine? Could you show me the console. Also please verify what version of Discourse you’re running and what commit of TLP.

(Nam Nguyen) #500

I upgraded plugin again in this morning, and it work well

Thanks Angus so much, :slight_smile:


You’ve probably heard this many a time @angus, but having just installed your plugin it is absolutely amazing!

One quick feature request. Would it be possible to limit the display of topic list thumbnails to only topics which have been created by users who are members of particular groups (e.g. admins, moderators, various trust levels, etc)?

I am using Discourse in the context of a school, and the thumbnail topics are a great way to draw attention to certain important topics, announcements, etc. on the main listing of topics - so it would be useful to limit who can have their topics displayed in that way.

Thanks :slight_smile:

EDIT: One question too. When I enable topic list category badge move the badge correctly displays in between the topic title and the excerpt text, but still has the “Category” column in the list. I have tried hard reloading the page but the “Category” column is still there. Any ideas on what’s happening here? Thanks!


Did you see a speed improvement ?

(Nam Nguyen) #503

Hi kam44,

I’m not sure about load speed effect by TLP, I test discourse on my local machine, but I think Augus and Fantasticfears will improve it soon, :slight_smile:

(Angus McLeod) #504

Thanks for this. This issue arose out of the recent Ember 2.10 updates. Now fixed.

(Angus McLeod) #505

I see. That makes sense. I’ll have a think about this / give this a shot when I have time a little later in the week.


Thanks @angus, much appreciated :slight_smile:

P.S. Also, thanks for fixing up the category bug.