Thread Thumbnail by AddonsLab

Thread Thumbnail by AddonsLab [Paid] 3.0.0 Beta 1

No permission to buy ($29.99)
Hello,

This is almost exactly what I want but there is a little problem. Usernames are displayed inside the thumbnail.
just found out that in default style gives the same problem.

so replace the previous code with the following to fix this issue:

CSS:
.structItem-cell.structItem-cell--icon
{
    width:96px; // this will move the small user avatar on right-hand corner and the value is (thumbnail with + 16px)=96px in this case. Always add 16px to your thumbnail width.
}

.structItem-iconContainer, .threadThumbnailWrapper, .threadThumbnailWrapper    div.avatar
{
    width: 80px; // CHANGE this value for a different width (also change max-height below to the same value)
    height: 60px;  // CHANGE this value for a different height (also change max-height below to the same value)
    border-radius: 5px!IMPORTANT;  // this is making rounded thumbnail corners: INCREASE or REDUCE if you want them more round or less round, comment or delete if you want square corners
}

.threadThumbnailWrapper    div.avatar img.alignThumbnail
{
    object-fit: cover;
    min-width: 100%;  // this will scale width to full thumbnail witdth for centered cropping - DO NOT TOUCH
    min-height: 100%;   // this will scale width to full thumbnail height for centered cropping - DO NOT TOUCH
    max-width: 80px;  // CHANGE this value for a different width
    max-height: 60px;  // CHANGE this value for a different height
}

// the following CSS will scale and center crop the smaller thumbnails that are showing on widget in default avatar size
.threadThumbnailWrapper  a.avatar img.alignThumbnail
{
    object-fit: cover;
    min-width: 100%;
    min-height: 100%;
}
 
That code works great EXCEPT in forums where TT is not used, the "mini avatar" that shows the replier is out of place. So it throws off normal forums where TT is not used PLUS threads that do not have an image in forums where it is enabled.
 
so add html[data-container-key="node-12345"] before .structItem-cell.structItem-cell--icon, make sure there's an empty space in between and replace 12345 with your node ID.

Like this for node ID 8
CSS:
html[data-container-key="node-8"] .structItem-cell.structItem-cell--icon
{
    width:96px; // this will move the small user avatar on right-hand corner and the value is (thumbnail with + 16px)=96px in this case. Always add 16px to your thumbnail width.
}

or this for multiple node (node ID 8, node ID 12, node ID 13)
CSS:
html[data-container-key="node-8"] .structItem-cell.structItem-cell--icon,
html[data-container-key="node-12"] .structItem-cell.structItem-cell--icon,
html[data-container-key="node-13"] .structItem-cell.structItem-cell--icon
{
    width:96px; // this will move the small user avatar on right-hand corner and the value is (thumbnail with + 16px)=96px in this case. Always add 16px to your thumbnail width.
}

Anyway the best solution would be that @AddonsLab would do a code clean up and fix these problems by adding options... Not sure I can go further as I'm not a coder, as said 😞
 
just found out that in default style gives the same problem.

so replace the previous code with the following to fix this issue:

CSS:
.structItem-cell.structItem-cell--icon
{
    width:96px; // this will move the small user avatar on right-hand corner and the value is (thumbnail with + 16px)=96px in this case. Always add 16px to your thumbnail width.
}

.structItem-iconContainer, .threadThumbnailWrapper, .threadThumbnailWrapper    div.avatar
{
    width: 80px; // CHANGE this value for a different width (also change max-height below to the same value)
    height: 60px;  // CHANGE this value for a different height (also change max-height below to the same value)
    border-radius: 5px!IMPORTANT;  // this is making rounded thumbnail corners: INCREASE or REDUCE if you want them more round or less round, comment or delete if you want square corners
}

.threadThumbnailWrapper    div.avatar img.alignThumbnail
{
    object-fit: cover;
    min-width: 100%;  // this will scale width to full thumbnail witdth for centered cropping - DO NOT TOUCH
    min-height: 100%;   // this will scale width to full thumbnail height for centered cropping - DO NOT TOUCH
    max-width: 80px;  // CHANGE this value for a different width
    max-height: 60px;  // CHANGE this value for a different height
}

// the following CSS will scale and center crop the smaller thumbnails that are showing on widget in default avatar size
.threadThumbnailWrapper  a.avatar img.alignThumbnail
{
    object-fit: cover;
    min-width: 100%;
    min-height: 100%;
}

Hi, thank you but this one messes up the regular forums where thread thumbnails are not enabled.
 
@AddonsLab , I just tried to install your addon, and I have security issue:

Security error occurred. Please press back, refresh the page, and try again.
One or more add-ons currently have actions pending and may be in an inconsistent state. Because of this, some errors may be suppressed and unexpected behavior may occur. If this does not change shortly, please contact the add-on author for guidance.

Can you please investigate that ?
 
Bug Report
  • Enable only in forum view
If checked, thread thumbnail will be enabled only in the forum view. All other locations like New posts, Latest posts widgets, etc.will not show the thumbnail.
  • The TT still shows in search results. To reproduce, go to a user profile and click to see their threads. You see a mix of avatars a TTs.
  • Also "typo," no space after etc. ;)
 
Bug Report

YouTube links with starting positions cause an image not found error for the TT. So when they choose to share and chose a "starting point," the link looks like this xxxxxxxxx:120 but it does not generate a TT and you get the red X.
 
Last edited:
Hi, thank you but this one messes up the regular forums where thread thumbnails are not enabled.
Try using the old code but add this block above it
 
Try using the old code but add this block above it
Already tried it. Doesn't work.
 
Hello, everyone!

I see there is a discussion regarding thumbnail sizes/forms and requests to implement options for them, so you don't have to use CSS for it. The requirements for sizes and forms can be quite different, so I am not sure how an option would control this. Even if we implement width/height options, and round/square switch, we can still support it only on the default theme and themes based on the default without layout modifications. In our experience, however, many boards use customized themes and such options would just cause them to report issues as bugs.

Feel free to summarize how you see the options implemented and we will consider them again.

@beerForo we will check the issue with YouTube URLs and release a fix asap.

@estranged having different sizes for thumbnails and user avatars might not be a good idea, as there are contexts, where threads where thumbnails are enabled are shown together with threads, for which thumbnails are not enabled, e.g. search results. In this case, the thumbnail would be bigger for one row and smaller for another. Anyway, we will add a CSS class that can be used to target only the threads, that have thumbnails enabled in their forum.

Thank you!
 
Feel free to summarize how you see the options implemented and we will consider them again.
On my point of view, if you could implement those options from the free add-on I mentioned earlier, it would be great.

Of course add-ons are mainly based on default XF but anyway once this is done, it will be our turn to add CSS if needed by our custom styles if needed.

But at present state, custom CSS code isn't enough as your code is a bit of a mess as I could see, plus I had to review all my custom CSS from scratch after your last update because two DIVs that wasn't there before was added and I lost all my custom layout...

Hope you'll get the point and thanks a lot for your consideration. (y)
 
@beerForo we will check the issue with YouTube URLs and release a fix asap.
See this one too :)
Anyway, we will add a CSS class that can be used to target only the threads, that have thumbnails enabled in their forum.
Excited Season 3 GIF by Gilmore Girls

I also echo @El Porcharo he and I have been tweaking the css for a week now and we still can't get it jusssst right. It's always close. However I welcome the new css class and please keep the other suggestions in mind thanks!
 
Suggestion:
Since you are working on a new version would it be possible to grab the image from an unfurl if only an unfurl exists? Since my users post videos, they sometimes post unfurls since the website may not be supported for embedding on XF. But there is an image in the unfurl. Would you be able to set that as TT?

Example:
 
Bug Report:
This add-on causes the following error in Question threads where Thread Thumbnail is OFF for that forum.
Reproduce: Go to the thread and click Edit on the post (from the post footer not the thread tools). Try to save it and you get:

Oops! We ran into some problems. Please enter a value for the required field 'attachment_id'.

This happens when TT is disabled and in Question threads, post #1.
 
It happens in ALL forums where it is OFF. Not just Question.
Got to any post #1 in a forum where TT is not used. Click Edit in the actual post, try to save.
Oops! We ran into some problems. Please enter a value for the required field 'attachment_id'.
 
Back
Top Bottom