Advertisement:

Author Topic: Auto resizing of images in posts, etc by CSS.  (Read 113506 times)

Offline Antechinus

  • SMF Friend
  • SMF Super Hero
  • *
  • Posts: 24,136
  • Master of BBC Abuse
Auto resizing of images in posts, etc by CSS.
« on: June 02, 2013, 02:44:08 AM »
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]
/* 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]
.tp_shoutbody>img, .tp_shoutbody>.bbc_link>img {
height: auto;
width: auto;
max-width: 95%;
max-height: 200px;
}


Simple Portal:
Code: [Select]
.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]
.attachments>div>img {
height: auto;
width: auto;
max-width: 95%;
max-height: 640px;
}
« Last Edit: June 21, 2013, 05:23:10 AM by Antechinus »

Offline Antechinus

  • SMF Friend
  • SMF Super Hero
  • *
  • Posts: 24,136
  • Master of BBC Abuse
Re: Auto resizing of images in posts, etc by CSS.
« Reply #1 on: June 02, 2013, 07:51:34 PM »
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. :D
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

Offline Dhayzon

  • Sophist Member
  • *****
  • Posts: 1,093
  • Gender: Male
  • DhayZone RevolutioN
    • Dhayzon on GitHub
    • @dhayzon on Twitter
    • http://dhayzon.com/
Re: Auto resizing of images in posts, etc by CSS.
« Reply #2 on: June 02, 2013, 09:25:54 PM »
this is a very good alternative
I use this  ;)

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

Offline Antechinus

  • SMF Friend
  • SMF Super Hero
  • *
  • Posts: 24,136
  • Master of BBC Abuse
Re: Auto resizing of images in posts, etc by CSS.
« Reply #3 on: June 02, 2013, 09:37:35 PM »
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

Quote
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.
« Last Edit: June 02, 2013, 10:30:10 PM by Antechinus »

Offline IchBin™

  • SMF Friend
  • SMF Super Hero
  • *
  • Posts: 11,115
  • Gender: Male
  • I don't speak German.
    • IchBin.us
Re: Auto resizing of images in posts, etc by CSS.
« Reply #4 on: June 02, 2013, 10:46:09 PM »
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.
Brad "IchBin™" Grow        TinyPortal        Themes
Coding Guidelines       

Offline Antechinus

  • SMF Friend
  • SMF Super Hero
  • *
  • Posts: 24,136
  • Master of BBC Abuse
Re: Auto resizing of images in posts, etc by CSS.
« Reply #5 on: June 02, 2013, 11:08:48 PM »
Ha. Also piffle. :D 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]
[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]
[img]https://atmire.com/labs17/bitstream/handle/123456789/7618/earth-map-huge.jpg[/img]
« Last Edit: June 05, 2013, 01:26:23 AM by Antechinus »

Offline Antechinus

  • SMF Friend
  • SMF Super Hero
  • *
  • Posts: 24,136
  • Master of BBC Abuse
Re: Auto resizing of images in posts, etc by CSS.
« Reply #6 on: June 02, 2013, 11:25:26 PM »
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. :D

Offline IchBin™

  • SMF Friend
  • SMF Super Hero
  • *
  • Posts: 11,115
  • Gender: Male
  • I don't speak German.
    • IchBin.us
Re: Auto resizing of images in posts, etc by CSS.
« Reply #7 on: June 03, 2013, 12:14:42 AM »
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.
Brad "IchBin™" Grow        TinyPortal        Themes
Coding Guidelines       

Offline live627

  • SMF Friend
  • SMF Hero
  • *
  • Posts: 5,265
  • Gender: Male
  • Cat: Destroy!
    • live627 on Facebook
    • live627 on GitHub
    • live627 on LinkedIn
    • @live627 on Twitter
    • livemods
Re: Auto resizing of images in posts, etc by CSS.
« Reply #8 on: June 03, 2013, 12:36:49 AM »
Code: [Select]
img
{
max-width: 40px;
height: auto;
}
I use this - thoughts, Ant?
Try not to become a man of success, but rather try to become a man of value.
- Albert Einstein

Offline Antechinus

  • SMF Friend
  • SMF Super Hero
  • *
  • Posts: 24,136
  • Master of BBC Abuse
Re: Auto resizing of images in posts, etc by CSS.
« Reply #9 on: June 03, 2013, 12:41:56 AM »
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.

Offline Antechinus

  • SMF Friend
  • SMF Super Hero
  • *
  • Posts: 24,136
  • Master of BBC Abuse
Re: Auto resizing of images in posts, etc by CSS.
« Reply #10 on: June 03, 2013, 12:44:57 AM »
Code: [Select]
img
{
max-width: 40px;
height: auto;
}
I use this - thoughts, Ant?

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

Offline live627

  • SMF Friend
  • SMF Hero
  • *
  • Posts: 5,265
  • Gender: Male
  • Cat: Destroy!
    • live627 on Facebook
    • live627 on GitHub
    • live627 on LinkedIn
    • @live627 on Twitter
    • livemods
Re: Auto resizing of images in posts, etc by CSS.
« Reply #11 on: June 04, 2013, 12:45:59 AM »
lol

it's specific to avatars.
Try not to become a man of success, but rather try to become a man of value.
- Albert Einstein

Offline CheeseHead05

  • Jr. Member
  • **
  • Posts: 388
Re: Auto resizing of images in posts, etc by CSS.
« Reply #12 on: June 04, 2013, 04:11:14 PM »
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?

Offline Antechinus

  • SMF Friend
  • SMF Super Hero
  • *
  • Posts: 24,136
  • Master of BBC Abuse
Re: Auto resizing of images in posts, etc by CSS.
« Reply #13 on: June 05, 2013, 01:28:26 AM »
lol

it's specific to avatars.

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

Offline Antechinus

  • SMF Friend
  • SMF Super Hero
  • *
  • Posts: 24,136
  • Master of BBC Abuse
Re: Auto resizing of images in posts, etc by CSS.
« Reply #14 on: June 05, 2013, 01:34:13 AM »
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.

Offline NanoSector

  • Customizer
  • SMF Super Hero
  • *
  • Posts: 10,471
  • Gender: Male
  • VC321xb47@aperture:~#
    • Yoshi2889 on GitHub
Re: Auto resizing of images in posts, etc by CSS.
« Reply #15 on: June 05, 2013, 01:55:31 AM »
Good idea, surprised nobody came up with this earlier. :)
My Mods / Mod Builder - A tool to easily create mods / Blog
"I've heard from a reliable source that the Answer is 42. But, still no word on what the question is."

Offline Antechinus

  • SMF Friend
  • SMF Super Hero
  • *
  • Posts: 24,136
  • Master of BBC Abuse
Re: Auto resizing of images in posts, etc by CSS.
« Reply #16 on: June 05, 2013, 02:00:06 AM »
Well it's (partially) in 2.1 Alpha, and has been for ages. I came up with the idea yonks ago.

Offline live627

  • SMF Friend
  • SMF Hero
  • *
  • Posts: 5,265
  • Gender: Male
  • Cat: Destroy!
    • live627 on Facebook
    • live627 on GitHub
    • live627 on LinkedIn
    • @live627 on Twitter
    • livemods
Re: Auto resizing of images in posts, etc by CSS.
« Reply #17 on: June 05, 2013, 02:01:37 AM »
lol

it's specific to avatars.

Well your code didn't say that. :P Anyway it's not bulletproof. Someone could (hypothetically) link in an avatar 43,976px tall and 40px wide. :D
But is it cross-browser? I think so but I wanna double check.
Try not to become a man of success, but rather try to become a man of value.
- Albert Einstein

Offline Antechinus

  • SMF Friend
  • SMF Super Hero
  • *
  • Posts: 24,136
  • Master of BBC Abuse
Re: Auto resizing of images in posts, etc by CSS.
« Reply #18 on: June 05, 2013, 02:14:05 AM »
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.

Offline Scareface

  • Semi-Newbie
  • *
  • Posts: 63
  • Gender: Male
  • PEACE
Re: Auto resizing of images in posts, etc by CSS.
« Reply #19 on: June 05, 2013, 07:48:51 AM »
Nice, Looks quite handy  :)