Topic List Previews

Have you set the height to zero?

Width and height were both set to 100.

Upon changing height to 0, desktop then looked like mobile. So it sounds like mobile isn’t picking up that height setting because it preserved aspect ratio even when height was set above 0.

2 Likes

You are quite right, apologies. When set to zero, the height should auto adjust on mobile. That is less than desirable behaviour. I will take a look at that when I have time. I will also consider splitting that out to a mobile pair.

In the meantime, can I recommend you activate ‘tiles’ on mobile OR modify the thumbnail with a max-height, e.g.

.mobile-view .topic-list img.thumbnail:not(.tiles-thumbnail) {
    max-height: 900px;
}

900 is likely to be excessive, but it’s there to capture very tall images! :slight_smile:

You can also modify the max-width to taste (80px out of the box).

2 Likes

Just wanted to confirm the behaviour I’m seeing.

When width and height are set to 100px:

  • Desktop thumbnails are 100px wide and 100px high and thumbnails are essentially cropped (the image isn’t stretched/squashed).
  • Mobile thumbnails are all different widths and heights, depending on the aspect ratio of the image.

When width is 100px and height is 0px:

  • Desktop thumbnails are 100px wide and different heights depending on aspect ratio
  • Mobile thumbnails are all different widths and heights, depending on the aspect ratio of the image.

It looks like those settings aren’t being picked up by the mobile stylesheet.

1 Like

Correct, the CSS limits max-width and height to 80px out of the box (for mobile non-tiles view).

Modifying the CSS is the way to go for the time being.

You can play around with the numbers to make things line up with avatars etc.

Get used to using the Browser Inspector to inform your CSS penning.

2 Likes

I actually tried setting this just now and couldn’t get the fallback image to show.

I’ve set topic list default thumbnail and checked topic list default thumbnail fallback. I’ve also tried setting Image URL for thumbnail shown if topic in this category has no preview thumbnail set in individual categories and can’t get anything to display.

I’m assuming I shouldn’t need to rebake posts for this to work right?

1 Like

Away from home office at mo but will double check when I get chance.

Are you getting a JavaScript error on console? Can you please make sure the linked image is hosted on (ie uploaded to) your site and retry as required?

1 Like

I’ve found another to reproduce the sorting bug I previously mentioned. Go to this category, it correctly sorts by created date, visit one of the topics, click the same category link and now it sorts by latest. This happens with Tiles and Thumbnails but it does not happen without the theme component (just core)

3 Likes

I’ve just updated the TLP Theme Component (yeah, don’t normally do this mid-month).

It now supports Desktop and Mobile Thumbnails :framed_picture: and even Tiles view on the Suggested list on Topics. :tada:

(and fixes an issue with a breaking change in core which now facilitates this - thanks David!)

My pleasure. :stuck_out_tongue_winking_eye:

(let me know of any issues, but seems to be compatible with latest tests-passed as of this weekend).

The plugin now supports thumbnails on the suggested list on mobile. I may add tiles support for suggested to desktop and mobile at some stage soon.

7 Likes

I’m not sure if this was referring to my sorting issue or directed to the Discourse David. FYI the sorting issue still remains.

Also, the option for suggested is not showing up in the list of options under tiles, I was able to add it manually and it works, just fyi.

1 Like

Unrelated. I’ll take a look at the sorting issue at some point. The break in the TC was more serious.

Yes I’m aware you have to add them manually on the TC. I’ll see if I can resolve that at some point.

2 Likes

Correct me if I’m wrong but installing this plugin will provide the same functionality and more than these two separately:


I’m just trying to understand if I get this plugin, I would need to uninstall the above theme components.

1 Like

I would not recommend installing both, you will end up with some weird behaviour. You should pick either the Topic List Previews plugin (this topic), or the theme components you linked.

2 Likes

Thank you. It just seems to me that if this plugin can do what the above 2 theme components can do, plus also have some other features (topic list action and ability to adjust thumbnail width/height), then I wouldn’t be losing anything by installing those theme components but only gaining.

1 Like

David is quite right. The two have slightly different feature sets/look and feel. Which you install is at your discretion but are unlikely to work together. Try them both. You can switch between them if you install both TCs quite easily (TLP has a TC flavour too)

3 Likes

I’ve tried both and one can achieve the same results. However, I do like that this plugin offers a default thumbnail picture. I did actually use that by putting an imgur link for a category. It didn’t work. Here is the category: https://forum.duelistsunite.org/c/yugioh/strategy/13

image

The imgur link is https://i.imgur.com/ErfxR7Z.png

Does the image need to be in a specific size and format?

1 Like

I believe the image needs to be uploaded locally. Please try that first.

1 Like

When we upload images for category icons and headers, where are they stored? I’ll put the images in the same location but just wondering since that should be also local. I think category icons should be used as default when a default image is not given.

Can you give me an example of what I should be typing as the path for local files? I created a folder called ‘pics’ in my discourse folder. So it’s var/www/discourse/pics/image.png. Should I be putting “pics/image.png” ?

I believe James Cook’s post above had the same issue and it wasn’t solved: Topic List Previews

1 Like

You should have a topic on your forum called Assets for Site Design, you just upload the image in this topic and right click on the image and copy image address

2 Likes

I see what you mean. I created a topic called Assets and uploaded some images. I copied the url and put it there. It didn’t work.

This is the url. I tried the full url and also the url without the domain name which is

uploads/default/original/1X/c1808d114892ff27d1a7f08e7a95c991390cb689.png

1 Like