Thread Thumbnail by AddonsLab

Thread Thumbnail by AddonsLab [Paid] 2.10.0

No permission to buy ($29.99)
Could a few of you kind souls share with me what your "altt_thread_thumbnail.less template" looks like? I haven't been able to find any solutions I'm happy with. I like my thumbnails a bit larger, but unfortunately my avatars are then too large. I've been using the example code AddonLab gives, which they say does not affect the display of avatars elsewhere:

div[data-type=thread] .structItem-cell.structItem-cell--icon {
width: 90px;
}

div[data-type=thread] .structItem-iconContainer .threadThumbnailWrapper .avatar {
width: 74px;
height: 100px;
}

But unfortunately it does affect the display of my avatars everywhere.

Also, using this code, the little mini avatar that lets you know you've replied to a thread is the same size as the main avatar and mostly obscures it. If I try to adjust the value, it ends up too far off to one side.
 
I'm using this in extra.less for rectangular thumbs, adjust as needed:
Code:
.has-thumbnail div.avatar {
    width: 100px;
    height: 56px;
    border-radius: 5px !important;
}

.has-thumbnail .threadThumbnailWrapper div.avatar img.alignThumbnail {
    object-fit: cover;
    min-width: 100%;
    min-height: 100%;
    max-width: 100px;
    max-height: 56px;
}

div[data-type=thread] .has-thumbnail .structItem-cell.structItem-cell--icon:not(.structItem-cell--iconEnd):nth-child(2) {
    width: 110px;
}
 
I'm using this in extra.less for rectangular thumbs, adjust as needed:
Code:
.has-thumbnail div.avatar {
    width: 100px;
    height: 56px;
    border-radius: 5px !important;
}

.has-thumbnail .threadThumbnailWrapper div.avatar img.alignThumbnail {
    object-fit: cover;
    min-width: 100%;
    min-height: 100%;
    max-width: 100px;
    max-height: 56px;
}

div[data-type=thread] .has-thumbnail .structItem-cell.structItem-cell--icon:not(.structItem-cell--iconEnd):nth-child(2) {
    width: 110px;
}
Okay, maybe a stupid question, but how would I edit that to get the thumbnails to display at, say, a width of 100px and height of 75px, without it changing the avatar size? I experimented with adjusting the values you gave me, but the thumbnail size never changed.
 
That was the first thing I tried, but it's made no difference in the size of the thumbnails. LoL, I think I need to take a break, maybe things will be clearer to me tomorrow. Thanks for the response, though.
 
Try a support ticket on their site, they helped me tweak the code. It's confusing but not sure why it doesn't work. But they will help customize.
 
Try a support ticket on their site, they helped me tweak the code. It's confusing but not sure why it doesn't work. But they will help customize.
Yeah, definitely more of an effort. The last thumbnail addon I used, I think all I did was literally set the width field to 100px and it looked fine in every style I have, all nine or ten of them. I'm sure it's user error, though.
 
Trust me, I've edited extra.less for half my styles, many times, including for the XF default style, with the same results for all of them. In fact, after editing extra.less a bunch of times, I realized that their example code page actually encouraged editing the "altt_thread_thumbnail.less" template, which is why I mentioned it above, but I got the exact same results with editing that. 🤪
 
Oops I'm on 2.6.0. I wonder if they changed something!
Well, I tried using that verison, but no difference. Everything is fine until I try to make the thumbnail larger. Here's what an avatar looks like in the XF style, using exactly the example code they give, except I've changed the width to 100px and the height to 75px:

avatar.webp

First off, see how large the avatar is. Second, note that what you're mostly seeing there is the "mini" avatar superimposed over the main avatar after replying to the thread. Anyway, time to watch a movie or do something that's actually pleasurable, ha ha.
 
Well, I tried using that verison, but no difference. Everything is fine until I try to make the thumbnail larger. Here's what an avatar looks like in the XF style, using exactly the example code they give, except I've changed the width to 100px and the height to 75px:

View attachment 258754

First off, see how large the avatar is. Second, note that what you're mostly seeing there is the "mini" avatar superimposed over the main avatar after replying to the thread. Anyway, time to watch a movie or do something that's actually pleasurable, ha ha.

As you are using a custom theme, the CSS rule provided here might not work or might work incorrectly for you. Please share a publically accessible URL with us, and specify how you want the avatars and thumbnails to look, and we will have a look.

Thank you!
 
As you are using a custom theme, the CSS rule provided here might not work or might work incorrectly for you. Please share a publically accessible URL with us, and specify how you want the avatars and thumbnails to look, and we will have a look.

Thank you!
The problem has nothing to do with any style I'm using. It's obviously the css itself. I've tested all this on a completely new local XF install, using just the default style with all default settings and no other addon's. The code in your FAQ that you initially referred me to as an example just doesn't work, so you might want to think about providing a better example. Copied and pasted exactly as is, it results in this:

thumbnailexample1.jpg



I tried the code Beerfroro offered above, and it at least leaves the avatars normal size when resizing the thumbnails, but obscures part of the subject field, regardless of what width or height I adjust it to (so I'm not sure how he's able to use it as is):

thumbnailexample2.jpg

So I just need to tinker with some more of these values when I get a chance. I've disabled the addon on the live site for now, since leaving it enabled would have forced me to completely disable my holiday styling, but I'll continue to play with it on my local test copy. Thanks for the reply.
 
Did you use all 3 code blocks I posted? I had the same exact issue but the third block fixes it, it pushes that line out 110px.

Yes, this is currently what is in extra.less, you can look it over:

Code:
.has-thumbnail div.avatar {

    width: 100px;

    height: 56px;

    border-radius: 5px !important;

}


.has-thumbnail .threadThumbnailWrapper div.avatar img.alignThumbnail {

    object-fit: cover;

    min-width: 100%;

    min-height: 100%;

    max-width: 100px;

    max-height: 56px;

}


div[data-type=thread] .has-thumbnail .structItem-cell.structItem-cell--icon:not(.structItem-cell--iconEnd):nth-child(2) {

    width: 110px;

}

I even tried adjusting that value, but nothing I tried made a difference.
 
Did you use all 3 code blocks I posted? I had the same exact issue but the third block fixes it, it pushes that line out 110px.
OMG, I think I finally figured it out <fingers crossed>

I just changed your last block to:

div[data-type=thread] .structItem-cell.structItem-cell--icon {
width: 110px;
}

So far so good. Thanks a lot for helping out with this. (y)
 
Top Bottom