Topic List Previews (legacy)

Thumbnails are created by core now. They won’t create ones bigger than the original image.

Thinking about this, what you want is variable thumbnail size, which is going to look a bit messy? That’s not currently supported.

I would find a compromise and make the thumbnails smaller so the low res ones look less bad.

1 Like

Ok that might be the problem with some of the thumbnails, but it doesn’t explain others. We have several topics (some posted today, and others posted before the TLP plugin upgrade thus dating back several weeks) that have large image uploads over 2000px wide that are generating very small 50px and 100px thumbnails for the front page.

No, we want a single standard width and resolution, with variable height as per our settings:

topic_list_thumbnail_width is 284
topic_list_thumbnail_height is 0
topic_list_thumbnail_resolution_level is 4 (I had to use 4 because the default of 2 isn’t correct… It was generating 1024 thumbnails when left at default of 2 and I needed the 400 size which seems to be 4)

The way I understand these settings are:

  1. Image thumbnails will be 400px wide
  2. Tiles will display images at 284px width and variable height dependent on original image upload ratio

However the forum seems to be randomly serving 50px wide or 100px on some topics… And those images are being served inside the tile frame which is always 284px on our site, thus the blurriness as the smaller thumbnail is stretched to fill the tile

2 Likes

Check your /latest.json output in Firefox to see what thumbnails are being stored.

You could also check the size of the thumbnails being shown on the page using the browsers inspector.

Let me know if you see anything odd.

Ah, the width setting is irrelevant for Tiles. (Try lowering it or raising it very high) Only resolution matters.

Perhaps Tiles is not the right kind of view for you?

Maybe I should prevent low res thumbnails appearing on Tiles view? ie not show them at all. Perhaps filter out all the 50 x 50 ones.

1 Like

I think I just figured out exactly what’s going on… this is my best guess based on what I’m seeing:

It’s a problem with how TLP is accessing thumbnails in /latest.json. thumbnails doesn’t always contain the same number of elements per topic. If the original topic image that is chosen to create the thumbnail is actually less than 1024px that thumbnail size will not be generated and that size of thumbnail is not present as an element/entry in the thumbnails array. Since thumbnails is missing an element, the plugin count will be off-by-one and return the wrong thumbnail size. If the original topic image is smaller than 800px wide, then the 1024 and the 800 widths will not be generated and the plugin count will be off-by-two and return an even smaller wrong thumbnail :wink:

It seems that the plugin seems to be walking down thumbnails to a pre-determined element when it needs to be looking for an element with a specific max_width that corresponds to the topic list resolution site setting. This way topics can have various lengths of the thumbnails array in latest.json and still return the correct thumbnail width.

This would explain why some of the topic tiles on our forum were showing 50px widths, some had 100px widths, while most had the correct 400px widths… the topics with smaller widths had original images of either less than 1024px wide or less than 800px wide.

Hope that makes sense!

Also could you please add a register_topic_thumbnail_size [300, 300] as we need a width of 284px for our tiles, and loading 300px thumbnails is better for us than loading 400px thumbnails. Ideally we’d prefer to generate exactly the correct width but I’ll probably end up transitioning to the Theme Component when you officially release that, and just add my own custom width.

Thanks for your work on both the plugin and the component! :clap:

Sorry I don’t understand the issue. Yet.

Your example resolution is not relevant because It does not generate thumbnails higher than 800x800. The highest res one in the array is simply the original image.

In any case I thought you were concerned about the low res images, why provide an example concerning such a big image? Are you saying that this large image is being displayed at 50x50 level?

Yes, of course the length of the thumbnails array varies. The algorithm is designed to handle that. There may be a bug but the fact the list of thumbnails is of variable length is already the implicit assumption of the current code.

It picks the level of thumbnail resolution you select and modifies that if required. eg:

  • If the screen is identified as retina, It moves the selection by one so the result is higher res.

  • If the resolution is not available it picks the next highest available.

Like I said if only 50x50 is available I should probably suppress the thumbnails completely in Tiles.

If you wish to add custom resolutions please fork the plugin for now. The thumbnails are deliberately doubles of each other. Changing it for just you would add disk space use to all users. I don’t think it’s that important to so closely match the originals: these are just thumbnail previews. That said maybe there is a case for having a resolution that more closely matches the common Tiles use case. Let me think about it.

1 Like

Yes, we are seeing several topics where a large image is being displayed at 50x50 level, even though there is also a 400x400 and 200x200 level available. The only consistency I saw between these topics is that the original image uploaded was either less than 1024px wide, or less than 800px wide, thus rendering those sizes missing from the thumbnails array. This led me to believe the way the plugin is accessing the thumbnails is somehow related to the length of the thumbnail array

I totally understand about not adding custom sizes. Thanks for the detailed explanation :+1:

1 Like

Ah ok that’s good info. There may be a bug. I’ll take a look when I get chance.

2 Likes

We would absolutely use this as I’d love to generate exactly a specific time thumbnail size!

1 Like

Can you PM an offending full size image and I’ll test it? Also please confirm the resolution level you have set and what device you are seeing the issue on

2 Likes

Done! Thanks @merefield for looking into this

1 Like

I don’t know if it’s just me, but thumbnails on mobile with the theme component have stopped working. They are still working with the topic thumbnails theme component so it seems to be a bug. I don’t see anything relevant in the console fyi.

2 Likes

Cannot reproduce, all good on latest tests-passed.

1 Like

OK everyone, the upgrade window is closing this weekend.

I’ve just performed a brief checkout on Plugin and TC and all is looking good.

Please refrain from upgrading after Sunday. I will not be committing to fixing breaking changes until next month.

1 Like

After some troubleshooting it seems to be a conflict with the events plugin, can you repro that?

2 Likes

I elaborated more via private message, but basically it seems that there is an issue with the TLP custom resolution sizes. If we upload an image equal to or less than 1024px in width, the 1024x1024 thumbnail is not generated. If we upload an image equal to or less than 800px, the 800x800 thumbnail is not generated. Expected behavior so far.

What is not expected is that a resolution level of 2 doesn’t actually load 400x400 sizes but instead loads the following:

  1. 1024x1024 thumbnails for all topics that had an original image upload width of greater than 1024px
  2. 800x800 thumbnails for all topics that had an original image upload width of less than 1024px but greater than
  3. 400x400 sized thumbnails for all topics that had an original image upload width of less than 800px but greater than 400px
  4. 100x100 sized thumbnails for all topics that had an original image upload width of less than 400px but greater than 100px

I thought that resolution level 2 would just be 400x400 size thumbnails for all topics.

1 Like

David/Nick,

OK I’ve taken another look at the algorithm I was using to choose resolution and made improvements.

This is deployed to the TC and the Plugin.

NB the new resolution scale is 0 - 6 with 0 being the original image, 1 being next highest resolution and 6 being the very lowest.

Please update your plugin/TC and let me know if this resolves the behaviour.

@davidkingham, @internet_cookie thanks for bringing this to my attention.

(David I think this is the problem you are seeing, but I could be wrong).

2 Likes

Thanks Rob, unfortunately that did not fix my problem, still have a conflict with the events plugin. You can see on my production site thumbnails not working on mobile, but with events disabled on my development site they do work.

2 Likes

I can’t see how they ever worked together (TLP plugin included). They are both overriding the mobile topic list item template. That’s a deal breaker. For now you will need to choose between them.

I may experiment with a CSS/plugin outlet only version in the longer term to avoid a template override but that’s not a must-pay-the-bills priority at present.

However the extent of the override that TLP requires to render a Tile may not be possible just using outlets.

1 Like

Bummer, I was excited to get events back finally haha! I find it curious that the Topic Thumbnails theme component does work with the events plugin, I’m not questioning your conclusion just trying to help. It seems that would also be overriding the template? Just to be clear I am talking about pavilion’s event plugin, not the discourse team’s in the calendar plugin.

2 Likes

Because the layout it uses doesn’t require an override of the template. In TLP I’m laying out more stuff and some of it is in nested divs so won’t work in the same way: I have to rely on a template override. Normally this isn’t that risky because it is a leaf node.

2 Likes