• This site uses cookies. By continuing to use this site, you are agreeing to our use of cookies. Learn more.
Thumbnail Recalculation

Thumbnail Recalculation

MattW

Well-known member
#1
MattW submitted a new resource:

Thumbnail Recalculation - Attachment Thumbnails recalculated

One thing which has bugged me from day 1 with XF is the way image attachments are appended to the post if they aren't inserted into the message body.

This is fine if you stick with the 100 pixel default thumbnail size, but if you change this (I've always had 600 pixel thumbnails on my sites), it looks a complete mess

View attachment 54525

View attachment 54524

Here is how I've got around it in XF 1.2 with a few lines in EXTRA.css and a single template edit to...
Read more about this resource...
 
#3
Very nice and I know what you mean. It would be great if XF did what Wordpress does in that you can insert your thumbnail in a small, med or large size.
 

MattW

Well-known member
#5
I've looked around a lot... where do I find .attachments in order to make this change? Or is this just something you add to EXTRA.css? (because the latter didn't take...)
I think this has been changed in a recent update to XF. The code was originally in attached_files.css

This is what is there now
Code:
.attachment
        {
            float: left;
            width: 50%;
            max-width: 300px;
        }
I haven't checked everything though, because I'm on my iPad. I'll have a look at the code on my site later today.
 

tonmo

Active member
#8
Hmm. Suggestions for making this work, though? If I change the width to 25% it successfully gets four photos on one line, but the support text to the right (which denote # of views, filename, etc.) gets squeezed and only ~2 characters display, rendering it illegible. How hard would it be to move the text so that it's below the thumbnail image, instead of to the right of it?
 

tonmo

Active member
#9
nevermind... this ended up being a good treatment for me:

Code:
        .attachment
        {
            float: left;
            width: 50%;
            max-width: 280px;
        }
(y)