Auto resizing of images in posts, etc by CSS.

[Antechinus]

Someone move this to Tips and Tricks. Kthnx.

Following on from this tread: How can I pre set pasted image widths and heights?

If anyone wants bulletproof resizing of images in posts, images in PM's, images in sigs, and avatars (either in posts/PM's or in the default theme header) without losing image proportions and without needing javascript, it's really easy to do.

With this CSS added to the end of your index.css file, you can disable all SMF admin resize settings for images and avatars. This CSS will even resize images correctly for phones, if your theme is built to handle them, regardless of the size of the image.

Code Select Expand

/* Auto resizing of avatars in posts and personal messages. */
/* Change sizing to suit your own preferences. */
.avatar>a>img, li.avatar>img {
   height: auto;
   width: auto;
   max-height: 150px;
   max-width: 125px;
}

/* Auto resizing of avatars in default theme header. */
/* Change sizing to suit your own preferences. */
p.avatar>img {
   height: auto;
   width: auto;
   max-height: 150px;
   max-width: 125px;
}

/* Auto resizing of images in posts and personal messages. */
/* Change sizing to suit your own preferences. */
.inner>img, .inner>blockquote>img,
.inner>.bbc_link>img, .inner>blockquote>.bbc_link>img{
   height: auto;
   width: auto;
/* This is just to keep images to a handy size, even on large screens. */
   max-height: 640px;
/* This prevents images breaking out of the post on small screens. */
   max-width: 95%;
}


/* Auto resizing of images in signatures. */
/* Change sizing to suit your own preferences. */
.signature>img, .signature>blockquote>img,
.signature>.bbc_link>img, .signature>blockquote>.bbc_link>img {
   height: auto;
   width: auto;
   max-height: 150px;
   max-width: 95%;
}
.attachments>div>img {
   height: auto;
   width: auto;
   max-width: 95%;
   max-height: 640px;
}

Obviously the same thing can be done for images in shoutboxes, or anywhere else.

I might make a mod of this if there's enough interest, but it wouldn't be worth including an admin interface to select limits. Better to keep it clean and light, and use the basic css for the lot (IMFAO*).


*In My F#$king Arrogant Opinion



For images in shoutboxes:

Tiny Portal:

Code Select Expand

.tp_shoutbody>img, .tp_shoutbody>.bbc_link>img {
height: auto;
width: auto;
max-width: 95%;
max-height: 200px;
}


Simple Portal:

Code Select Expand

.shoutbox_body>ul>li>img, .shoutbox_body>ul>li>.bbc_link>img {
height: auto;
width: auto;
max-width: 95%;
max-height: 200px;
}



For attached images beneath posts:

If you like, you can also disable thumbnail generation for attached images, and use CSS resize to deal with those.

Code Select Expand

.attachments>div>img {
height: auto;
width: auto;
max-width: 95%;
max-height: 640px;
}

[Antechinus]

Screenshots of how the image scaling in posts works. Resolutions are 1680 wide, 700 wide and 320 wide screens.









Of course, the fact that this forum is still bound to the default SMF admin resize code borks the screenshots.
Check them out on the direct links if you want to see the actual sizes.

http://i.imgur.com/CqnJlZ1.jpg

http://i.imgur.com/vBrO6uj.jpg

http://i.imgur.com/JUo6kPm.jpg

[Dhayzon]

this is a very good alternative
I use this 

Code Select Expand

img {
  width: auto\9;
  height: auto;
  max-width: 100%;
  vertical-align: middle;
  border: 0;
  -ms-interpolation-mode: bicubic;
}


[Antechinus]

That's not as good.

Your width setting is invalid CSS, and will be ignored with any browser other than IE. That can cause problems with Gecko, which needs the auto width.

Using a max-width of 100% can break layout if the containing element has horizontal padding. If there is no horizontal padding, or if box-sizing: border-box; is declared on the containing element, then 100% can work. It depends on how the theme is coded.

The vertical-align, border and -ms-interpolation-mode declarations are unnecessary. It'll be fine without them (expect possibly on old versions of IE, which nobody cares about).



BTW: http://msdn.microsoft.com/en-us/library/ie/ms530822%28v=vs.85%29.aspx

The -ms-interpolation-mode property applies to stretched images only.

IOW, it does nothing for the usual situations where an image is scaled down in size.

[IchBin™]

Good little tip! Just remember by disabling the admin resize stuff you're adding more load to your page by allowing the images to still be large in size, but not large in display.

[Antechinus]

Ha. Also piffle. Check the screenshots I posted above. If you "view image info" (or whatever non-Gecko browsers call the equivalent) you'll see stuff like "Dimensions: 1469px x 976px (scaled to 600px x 398px)".

What the default admin resize does is use inline height and width declarations to resize the image in the browser anyway. IOW, it does nothing to reduce load. I could link in a massive image at 7 meg or whatever and your browser would still be getting slammed with the full weight.

Here's a nasty example:

Code Select Expand

[img]https://atmire.com/labs17/bitstream/handle/123456789/7618/earth-map-huge.jpg?sequence=1[/img]

*Edit: Image code placed in code tags to save everyone's sanity.

ETA: ROFLMAO. SMF wont even resize that one at all, even though I put it in a BBC img tag. Now that's a massive fail.

Ah. I think it's the ?sequence=1 suffix after the .jpg that is borking it. Let's see if this works (same image, without suffix).

Code Select Expand

[img]https://atmire.com/labs17/bitstream/handle/123456789/7618/earth-map-huge.jpg[/img]

[Antechinus]

Nope. SMF still wont touch it even without the dodgey suffix. My code would still resize it, even down to phone size if necessary. Score: SMF - 0, Me - lots.

[IchBin™]

Ah inline posts. Thought you were implying everything, including attachments. And you said avatars. SMF actually resizes the images for attachments and avatars. I wouldn't take restrictions off on avatars, but certainly on post images for this.

[live627]

Code Select Expand

img
{
max-width: 40px;
height: auto;
}I use this - thoughts, Ant?

[Antechinus]

Ah inline posts. Thought you were implying everything, including attachments. And you said avatars. SMF actually resizes the images for attachments and avatars. I wouldn't take restrictions off on avatars, but certainly on post images for this.

SMF resizes uploaded avatars, but not linked-in ones from an online source. I find that members tend to use those quite a bit. They'll just spot an image they like and hotlink it.* So in those cases, using CSS is a better option than the default html or js resize.

For avs that are uploaded to the server, sure, if you can get it to do the job with decent quality (which has been a problem, IIRC). If the uploaded av is already fairly small, there's little or no penalty from just relying on CSS.

I use CSS for the lot, and treat attached images like inline ones. Personal preference.

*Mind you, we were disallowing uploaded avatars except for trusted members. This is partly because of past avatar hacks (Krisbarteo, etc) and partly to save space on the server.

[Antechinus]

Code Select Expand

img
{
max-width: 40px;
height: auto;
}I use this - thoughts, Ant?

Why use that? Do you want inline images restricted to 40px wide?

[live627]

lol

it's specific to avatars.

[CheeseHead05]

Ah inline posts. Thought you were implying everything, including attachments. And you said avatars. SMF actually resizes the images for attachments and avatars. I wouldn't take restrictions off on avatars, but certainly on post images for this.

Ich,

So wut are the instructions to do so in the Admin Panel and Antechinus, do you recommend?

[Antechinus]

lol

it's specific to avatars.

Well your code didn't say that. Anyway it's not bulletproof. Someone could (hypothetically) link in an avatar 43,976px tall and 40px wide.

[Antechinus]

So wut are the instructions to do so in the Admin Panel and Antechinus, do you recommend?

This is an alternative to having a fixed maximum size for images. The reason I went with this solution is because it is responsive, and will serve up a suitably resized image on any screen.

If you stick with the standard SMF admin option, you can choose a maximum size that will work on some monitors, but will be still too big for other monitors, and way too big on phones. If you choose a maximum size that is good on phones, it'll look like a postage stamp on desktop. Since I'm running a theme that handles all screens, from phones up to the largest desktops, I want images sized appropriately for everyone.

This code does that.

In admin, you simply set zero for all maximum image sizes (avatars, images in posts & attachments). You then add the css in the OP to the end of your index.css file. It should work. Naturally, this code can be adjusted to set the maximum sizes you prefer.

[NanoSector]

Good idea, surprised nobody came up with this earlier.

[Antechinus]

Well it's (partially) in 2.1 Alpha, and has been for ages. I came up with the idea yonks ago.

[live627]

lol

it's specific to avatars.

Well your code didn't say that. Anyway it's not bulletproof. Someone could (hypothetically) link in an avatar 43,976px tall and 40px wide.

But is it cross-browser? I think so but I wanna double check.

[Antechinus]

Yours or mine? Mine is, at least for anything that any sane person should be using these days. It'll break for IE<8, but anyone on 6 or 7 can just deal with it as far as I concerned.

[Scareface]

Nice, Looks quite handy