Thread Thumbnail by AddonsLab

Thread Thumbnail by AddonsLab [Paid] 2.13.0

No permission to buy ($29.99)
Overview FAQ Updates (49) Reviews (5) History Discussion
beerForo said:
@El Porcharo thank for the code! I put it in extra.less but still have round images what am I doing wrong?
Click to expand...
UGH okay
"The following code sets all thread thumbnails (where there's an attachment for it)"
I guess your code won't work on the YouTube thumbnails. :(

Anyone know how to get square or rectangular for the video embed thumbs?
 
I tried some code a few pages back and it changes the avatars for all forums. I only have this add-on enabled in one forum.

Let me just post what I am trying to achieve and maybe that is easier. I have a Suggestions forum and round avatars and I want square thread thumbs, so radius 5 works for the rounded edge.

I also want to make them a little larger.

I tried some things and in Suggestions forums the thread title butts up against the thumb if you make it larger. I used padding but that is not the best.

And for some reason when I (as admin) make a post with no image in it and with no replies, the avatar gets doubled and you can see the double as it is slightly off.

So can someone please help and check this in a Suggestion-type forum for square and larger? Also make an admin post with no image to check that. That would be awesome!!!!!
 
Last edited:
El Porcharo said:
If you can share a public link (even in private if you want) I'll have a look and see if I can help
Click to expand...
Thanks for the offer to help, I paste your code into extra.less and nothing happens so I am wondering what I am doing wrong. I even added !important to every line.
 
estranged said:
Hello,

This is almost exactly what I want but there is a little problem. Usernames are displayed inside the thumbnail.
Click to expand...
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 😞
 
El Porcharo 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%;
}
Click to expand...

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:
You must log in or register to reply here.

Similar threads

Ozzy47
[OzzModz] Thread Linked Data Image Remove
Replies
2
Views
153
Ozzy47
Ozzy47
AndyB
Convert thumbnails to full [Paid]
Replies
0
Views
147
AndyB
AndyB
Ozzy47
[OzzModz] Forum Post Thread Button Text [Paid]
Replies
1
Views
185
Ozzy47
Ozzy47
Ozzy47
[OzzModz] Thread Tag Positions
Replies
5
Views
168
Ozzy47
Ozzy47
Ozzy47
[OzzModz] Pre-Registration Attachments [Paid]
Replies
1
Views
180
Ozzy47
Ozzy47
Top Bottom