Simple Machines Community Forum

Customizing SMF => Tips and Tricks => Topic started by: Antechinus on June 02, 2013, 02:44:08 AM

Title: Auto resizing of images in posts, etc by CSS.
Post by: Antechinus 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? (http://www.simplemachines.org/community/index.php?topic=504700.0)

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;
}
Title: Re: Auto resizing of images in posts, etc by CSS.
Post by: Antechinus 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.

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

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

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



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
Title: Re: Auto resizing of images in posts, etc by CSS.
Post by: Dhayzon 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;
}
Title: Re: Auto resizing of images in posts, etc by CSS.
Post by: Antechinus 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.
Title: Re: Auto resizing of images in posts, etc by CSS.
Post by: IchBin™ 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.
Title: Re: Auto resizing of images in posts, etc by CSS.
Post by: Antechinus 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]
Title: Re: Auto resizing of images in posts, etc by CSS.
Post by: Antechinus 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
Title: Re: Auto resizing of images in posts, etc by CSS.
Post by: IchBin™ 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.
Title: Re: Auto resizing of images in posts, etc by CSS.
Post by: live627 on June 03, 2013, 12:36:49 AM
Code: [Select]
img
{
max-width: 40px;
height: auto;
}
I use this - thoughts, Ant?
Title: Re: Auto resizing of images in posts, etc by CSS.
Post by: Antechinus 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.
Title: Re: Auto resizing of images in posts, etc by CSS.
Post by: Antechinus 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?
Title: Re: Auto resizing of images in posts, etc by CSS.
Post by: live627 on June 04, 2013, 12:45:59 AM
lol

it's specific to avatars.
Title: Re: Auto resizing of images in posts, etc by CSS.
Post by: CheeseHead05 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?
Title: Re: Auto resizing of images in posts, etc by CSS.
Post by: Antechinus 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
Title: Re: Auto resizing of images in posts, etc by CSS.
Post by: Antechinus 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.
Title: Re: Auto resizing of images in posts, etc by CSS.
Post by: NanoSector on June 05, 2013, 01:55:31 AM
Good idea, surprised nobody came up with this earlier. :)
Title: Re: Auto resizing of images in posts, etc by CSS.
Post by: Antechinus 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.
Title: Re: Auto resizing of images in posts, etc by CSS.
Post by: live627 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.
Title: Re: Auto resizing of images in posts, etc by CSS.
Post by: Antechinus 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.
Title: Re: Auto resizing of images in posts, etc by CSS.
Post by: Scareface on June 05, 2013, 07:48:51 AM
Nice, Looks quite handy  :)
Title: Re: Auto resizing of images in posts, etc by CSS.
Post by: singhabhishek251 on June 05, 2013, 08:50:09 AM
A good explanation about image resizing and this is what many newbie get confused, we can fix the size of any image according to requirement with width and height attribute, but in most cases the image gets deformed and you do not get perfect high quality image. If possible try to use photoshop to resize and if doing for dynamic value, then use codes.
Title: Re: Auto resizing of images in posts, etc by CSS.
Post by: CheeseHead05 on June 05, 2013, 10:07:27 AM
Antechinus,

One last thing, out of those pics (towards top of thread), which one will this code refer to?

Well said sir! Also, its always a good thing when multiple people benefit from someone's answer.  ;)
Title: Re: Auto resizing of images in posts, etc by CSS.
Post by: Antechinus on June 05, 2013, 06:41:49 PM
All of them. Those pics just show how the same images will resize to suit screen resolution.
Title: Re: Auto resizing of images in posts, etc by CSS.
Post by: GL700Wing on June 06, 2013, 06:39:01 AM
Quote
If anyone wants bulletproof resizing of images ...
Fantastic tip - many thanks for sharing!
Title: Re: Auto resizing of images in posts, etc by CSS.
Post by: CheeseHead05 on June 11, 2013, 10:10:16 AM
Antechinus,

What is the difference between the first code and the code for attachments under posts?

Will it mess with the avatars?
 
What does the first code do to my SMF Gallery pictures that are uploaded?

I know I already asked but how does my forum know which pics size to use?
Title: Re: Auto resizing of images in posts, etc by CSS.
Post by: Antechinus on June 11, 2013, 06:07:37 PM
Antechinus,

What is the difference between the first code and the code for attachments under posts?

Will it mess with the avatars?
Read the comments in the code. They tell you what each block does.

Code: [Select]
/* Auto resizing of avatars in posts and personal messages. */

................

/* Auto resizing of avatars in default theme header. */

..........etc.


Quote
What does the first code do to my SMF Gallery pictures that are uploaded?

Dunno. Haven't used a gallery mod. Try it and see. :)


Quote
I know I already asked but how does my forum know which pics size to use?

Eh? Either the default SMF admin settings tell it, or this CSS does, depending on which method you're using.
Title: Re: Auto resizing of images in posts, etc by CSS.
Post by: CheeseHead05 on June 12, 2013, 10:57:32 AM
Antechinus,

The code seems to work in my gallery! Thanks for the much needed help.. :)
Title: Re: Auto resizing of images in posts, etc by CSS.
Post by: CheeseHead05 on June 12, 2013, 11:01:56 PM
Antechinus,

I dont know what happened but my when I upload a pic, it goes back to the small one again. I went to my css file and the code is still there. Any idea?
Title: Re: Auto resizing of images in posts, etc by CSS.
Post by: Antechinus on June 13, 2013, 07:30:29 AM
Nope. Like I said, I've never used a gallery mod. You'd have to ask the person who made it.
Title: Re: Auto resizing of images in posts, etc by CSS.
Post by: TomW on June 13, 2013, 08:40:32 AM
Antechinus, thank you, this is awesome !  I've been looking for a simple solution like this.
Title: Re: Auto resizing of images in posts, etc by CSS.
Post by: CheeseHead05 on June 13, 2013, 09:49:31 AM
Nope. Like I said, I've never used a gallery mod. You'd have to ask the person who made it.

Im talking about my forum attachments and not gallery.
Title: Re: Auto resizing of images in posts, etc by CSS.
Post by: Antechinus on June 13, 2013, 06:08:20 PM
So what have you got in your admin settings for attachments? If you're forcing it to make thumbnails in admin, that will override the css.
Title: Re: Auto resizing of images in posts, etc by CSS.
Post by: CheeseHead05 on June 13, 2013, 10:20:54 PM
So what have you got in your admin settings for attachments? If you're forcing it to make thumbnails in admin, that will override the css.


Max attachment folder space = 10240 kb

Max attachment size per post = 192 kb

Max size per attachment = 128 kb

Max width of thumbnails = 0

Max height of thumbnails = 0
Title: Re: Auto resizing of images in posts, etc by CSS.
Post by: Antechinus on June 14, 2013, 07:48:59 PM
Odd. I'll try it on a local 2.0.x site and see what happens.
Title: Re: Auto resizing of images in posts, etc by CSS.
Post by: CheeseHead05 on June 16, 2013, 04:28:23 PM
ok let me know..
Title: Re: Auto resizing of images in posts, etc by CSS.
Post by: themavesite on June 18, 2013, 04:17:39 PM
I just added the code from your first post to my theme's index.css, and uploaded the file again.
Though I see no changes whatsoever :/
Any idea what may cause this? (yes admin image limits are disabled)

my forums: http://forums.themavesite.com/
css link (code is at bottom) http://forums.themavesite.com/Themes/oldblack/css/index.css

As you can see here http://forums.themavesite.com/index.php?topic=5469.new#new it's clearly not working yet.

I just don't see what I'm doing wrong here..
Title: Re: Auto resizing of images in posts, etc by CSS.
Post by: CheeseHead05 on June 19, 2013, 09:40:07 AM
themavesite,

Im having the same issue as u..the craziest thing about that code is that I added it to the end of my css like Antechinus said, it worked the first day I did that but the second day I went to upload a picture and it did not resize itself instead it was a very small picture...I know this definitely sucks... :-\
Title: Re: Auto resizing of images in posts, etc by CSS.
Post by: themavesite on June 19, 2013, 02:21:19 PM
This method works extremely good, until you have an image shaped like a large standing rectangle.
Then it completely fails.

Try using this method for this image for example: http://i.imgur.com/24Ogz7H.jpg
It resizes to a point where you can't properly read it any more.

Sorry to disappoint you people, but this is not "the" method.
Title: Re: Auto resizing of images in posts, etc by CSS.
Post by: Antechinus on June 19, 2013, 06:02:43 PM
themavesite,

Im having the same issue as u..the craziest thing about that code is that I added it to the end of my css like Antechinus said, it worked the first day I did that but the second day I went to upload a picture and it did not resize itself instead it was a very small picture...I know this definitely sucks... :-\

Do you have all of these disabled?

Resize images when showing under posts

Save thumbnails as PNG

Maximum width of thumbnails

Maximum height of thumbnails

ETA: Also, just tweaked the code in the OP.
Title: Re: Auto resizing of images in posts, etc by CSS.
Post by: Antechinus on June 19, 2013, 06:06:20 PM
This method works extremely good, until you have an image shaped like a large standing rectangle.
Then it completely fails.

Try using this method for this image for example: http://i.imgur.com/24Ogz7H.jpg
It resizes to a point where you can't properly read it any more.

Sorry to disappoint you people, but this is not "the" method.

So if you want to show images like that at full size, change the max-height in the CSS. I did tell people to adjust it to suit their preferences.

I prefer to have images like that not displaying at full height by default, because they're a nuisance when I either have seen them before or aren't interested in them. If I want to see such an image full size, I just right click > view image.

That's why I set a max-height of 640px. If you want a max-height of 3,247px, set that instead. :)
Title: Re: Auto resizing of images in posts, etc by CSS.
Post by: themavesite on June 19, 2013, 07:19:31 PM
This method works extremely good, until you have an image shaped like a large standing rectangle.
Then it completely fails.

Try using this method for this image for example: http://i.imgur.com/24Ogz7H.jpg
It resizes to a point where you can't properly read it any more.

Sorry to disappoint you people, but this is not "the" method.

So if you want to show images like that at full size, change the max-height in the CSS. I did tell people to adjust it to suit their preferences.

I prefer to have images like that not displaying at full height by default, because they're a nuisance when I either have seen them before or aren't interested in them. If I want to see such an image full size, I just right click > view image.

That's why I set a max-height of 640px. If you want a max-height of 3,247px, set that instead. :)

That's the thing, if I change the value of max-height to something big (like 1000px)
suddenly the width increases again too, so the images go outside the forum again :/
Title: Re: Auto resizing of images in posts, etc by CSS.
Post by: CheeseHead05 on June 20, 2013, 10:22:42 AM
Antechinus,

Here is what I have as the attachment option is acting strange  ???

Check attachment extensions = UNCHECKED
Recode line endings in textual attachments = UNCHECKED

Max attachment folder space = 10240 kb
Max attachment size per post = 0 kb
Max size per attachment = 0 kb

Recode potentially dangerous image attachments = CHECKED
Perform extensive security checks on uploaded image attachments = UNCHECKED

Display image attachments as pictures under post = CHECKED
Resize images when showing under post = CHECKED
Save thumbnails as PNG = CHECKED
Max width of thumbnails = 0
Max height of thumbnails = 0


P.S.
With the new tweeked code, is that added at the end of the first code that you posted?
Title: Re: Auto resizing of images in posts, etc by CSS.
Post by: sangham.net on June 20, 2013, 11:36:16 AM
Thanks a lot for the share of this possibility!

One question. Is it possible to use it just as max. limitation, as it seems to break all BBC [img weight=... height=...] codes and also manual small made pixs are enlaged to to max. So it is no more possible to intentional display a smaller size that the max.

/* Auto resizing of images in posts and personal messages. */
/* Change sizing to suit your own preferences. */
.inner>img, .inner>.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%;
}


I cut of the red lines, and it seems to work well if somebody does not like to have all to its max in this frame. So it would not limit the modest poster, who like to keep their pictures small.

So just:

Code: [Select]
/* Auto resizing of images in posts and personal messages. */
/* Change sizing to suit your own preferences. */
.inner>img, .inner>.bbc_link>img{

/* 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>.bbc_link>img{

max-height: 150px;
max-width: 95%;
}

 As I am not a coder, does it have other impacts? For my dummy eyes it looks good for now.

Thanks a lot.


Title: Re: Auto resizing of images in posts, etc by CSS.
Post by: Antechinus on June 20, 2013, 03:21:05 PM
Johann B: If it looks good for you, use it that way. :) Just check it in a few different browsers if you want to make sure.


That's the thing, if I change the value of max-height to something big (like 1000px)
suddenly the width increases again too, so the images go outside the forum again :/

Works on my test site. I set max-height to 6400px, and your image still scales perfectly as window width decreases.


Resize images when showing under post = CHECKED
Save thumbnails as PNG = CHECKED

Disable those.


Quote
With the new tweeked code, is that added at the end of the first code that you posted?

Just replace this bit (this is the tweaked code) or you can just add it at the end of the file if you're not fussy.

Code: [Select]
.attachments>div>img {
height: auto;
width: auto;
max-width: 95%;
max-height: 640px;
}
Title: Re: Auto resizing of images in posts, etc by CSS.
Post by: sangham.net on June 21, 2013, 02:10:10 AM
Johann B: If it looks good for you, use it that way. :) Just check it in a few different browsers if you want to make sure.

Thanks a lot Antechinus, I am really more than grateful and happy about your shared idea. Seems to be fine on MS internetexplorer and Firefox (don't have access to many other browsers). But thanks for the hint to check it, just saw another "Problem" in MSI with the autohigh of code BBC windows.

Just one, I guess, remains and that is the picture within quotes, as the a "max-width: 95%" seems to be relative to the whole body and that is not quested within quotes which make the place for display smaller.

Do you have any idea how to make it relative to the frame width of the whole body as well as the frame width within the certain quotes as well? Just for the case it's easy to handle as the solution it self is much more then great anyway.

Thanks a lot!


Title: Re: Auto resizing of images in posts, etc by CSS.
Post by: Antechinus on June 21, 2013, 05:24:31 AM
Yup. Updated the code in the OP. Repeated here for convenience. :)

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;
}

That will deal with linked or unlinked images inside quotes, within post or sigs.
Title: Re: Auto resizing of images in posts, etc by CSS.
Post by: sangham.net on June 21, 2013, 05:51:41 AM
A quoted picture changes it's css - class from .img into .avatar or p.avatar?
Title: Re: Auto resizing of images in posts, etc by CSS.
Post by: Antechinus on June 21, 2013, 05:46:54 PM
No. It's not an .img class. It's the HTML img tag name.
Title: Re: Auto resizing of images in posts, etc by CSS.
Post by: sangham.net on June 21, 2013, 11:02:22 PM
Ohh... mistake, just saw the first two "definitions" (wondered what they would have to do with the image in a quote) and I guess the magic lies in the third.

So your replay was more then helpful again. Thanks Antechinus!
Title: Re: Auto resizing of images in posts, etc by CSS.
Post by: Antechinus on June 22, 2013, 04:14:44 AM
Y'know, I just looked at this code again and I'm an idiot. All images displayed in posts and quotes and sigs have the class .bbc_img. That means the code for those areas can be simplified. All it needs is this:

Code: [Select]
/* Auto resizing of images in posts and personal messages. */
/* Change sizing to suit your own preferences. */
.bbc_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 .bbc_img {
   height: auto;
   width: auto;
   max-height: 150px;
   max-width: 95%;
}

That should handle all images in post or sigs, whether they are inside links or not, and whether they are inside quotes or not.

It will also be more efficient. :)
Title: Re: Auto resizing of images in posts, etc by CSS.
Post by: sangham.net on June 22, 2013, 04:36:53 AM
Great, there is a proverb "Durch's reden kommen die Leut' z'amm" "It's by talking that people find common ground". Looks good and SIMPLE. Thanks for the share!

And if somebody likes to keep it possible that pics are manual sized smaller as the max (using the "width=xxx height=xxx" extension of the img BBC) , one might use this:

Code: [Select]
/* Auto resizing of images in posts and personal messages. */
/* Change sizing to suit your own preferences. */
/* width=xxx height=xxx extension in the img BBC can still be used to minimize the size manual  */
.bbc_img{
/* 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. */
/* width=xxx height=xxx extension in the img BBC can still be used to minimize the size manual  */
.signature .bbc_img {
   max-height: 150px;
   max-width: 95%;
}

(http://fc06.deviantart.net/fs71/f/2013/101/8/d/happy_face_770659_by_k6mil-d61838j.png)

(http://fc06.deviantart.net/fs71/f/2013/101/8/d/happy_face_770659_by_k6mil-d61838j.png)

(http://fc06.deviantart.net/fs71/f/2013/101/8/d/happy_face_770659_by_k6mil-d61838j.png)

 ;D
Title: Re: Auto resizing of images in posts, etc by CSS.
Post by: HunterP on June 22, 2013, 06:40:35 AM

Nice CSS code Ant, thanks!

One thing; I noticed that there is no resizing when previewing a posting.
Is it possible to fix this?
Title: Re: Auto resizing of images in posts, etc by CSS.
Post by: HunterP on June 22, 2013, 06:48:25 AM

Sorry, another thing. When I try to resize an image manually, with [img width=400], it won't work, I just get the auto size (95%).
Title: Re: Auto resizing of images in posts, etc by CSS.
Post by: sangham.net on June 22, 2013, 07:48:54 AM

Sorry, another thing. When I try to resize an image manually, with [img width=400], it won't work, I just get the auto size (95%).
HunterP,

Have you tried modifed code: http://www.simplemachines.org/community/index.php?topic=505050.msg3565571#msg3565571 ? or the original?
You would be just able to make it smaller but not bigger as 95% 400 seems to be quite big, not sure which screen width you have.
Title: Re: Auto resizing of images in posts, etc by CSS.
Post by: Antechinus on June 22, 2013, 06:13:43 PM

Nice CSS code Ant, thanks!

One thing; I noticed that there is no resizing when previewing a posting.
Is it possible to fix this?

The new (shorter) code fixes it.
Title: Re: Auto resizing of images in posts, etc by CSS.
Post by: HunterP on June 23, 2013, 04:50:10 PM
Antechinus / Johann B

Thanks both  8)
Title: Re: Auto resizing of images in posts, etc by CSS.
Post by: CheeseHead05 on June 24, 2013, 03:41:25 PM
Y'know, I just looked at this code again and I'm an idiot. All images displayed in posts and quotes and sigs have the class .bbc_img. That means the code for those areas can be simplified. All it needs is this:

Code: [Select]
/* Auto resizing of images in posts and personal messages. */
/* Change sizing to suit your own preferences. */
.bbc_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 .bbc_img {
   height: auto;
   width: auto;
   max-height: 150px;
   max-width: 95%;
}

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

Ant,

Are these codes all I need to correct my sizing issue?
Title: Re: Auto resizing of images in posts, etc by CSS.
Post by: Antechinus on June 24, 2013, 06:21:02 PM
Try it and see. I can't really answer that question until you try it.
Title: Re: Auto resizing of images in posts, etc by CSS.
Post by: CheeseHead05 on June 25, 2013, 09:51:41 PM
Ant,

No its not working..im at the point where Im like bump it... >:(
Title: Re: Auto resizing of images in posts, etc by CSS.
Post by: Antechinus on June 26, 2013, 12:36:54 AM
Give me a link so I can see what's happening.
Title: Re: Auto resizing of images in posts, etc by CSS.
Post by: CheeseHead05 on June 26, 2013, 10:08:16 AM
Ant,

http://forums.solematesxoxo.com/nikeadidas/index.php?topic=3.0

*The large pic is from when I open it in google images.
Title: Re: Auto resizing of images in posts, etc by CSS.
Post by: HunterP on June 26, 2013, 03:19:36 PM

Ant,

What do you exactly mean with this line?

/* This prevents images breaking out of the post on small screens. */
   max-width: 95%;


Title: Re: Auto resizing of images in posts, etc by CSS.
Post by: kat on June 26, 2013, 04:20:07 PM
http://forums.solematesxoxo.com/nikeadidas/index.php?topic=3.0

Not available or guest-viewing...
Title: Re: Auto resizing of images in posts, etc by CSS.
Post by: Antechinus on June 26, 2013, 06:52:59 PM

Ant,

What do you exactly mean with this line?

/* This prevents images breaking out of the post on small screens. */
   max-width: 95%;

If you set it to 100% it will pick up the full size of the parent element, including any padding the parent has, and use that as the size of the image. That can give overflow problems, so allowing a 5% margin just makes overflow unlikely.
Title: Re: Auto resizing of images in posts, etc by CSS.
Post by: CheeseHead05 on June 27, 2013, 02:56:39 PM
http://forums.solematesxoxo.com/nikeadidas/index.php?topic=3.0

K@ and Ant,

you should be able to view now..
Title: Re: Auto resizing of images in posts, etc by CSS.
Post by: HunterP on June 27, 2013, 03:02:37 PM
http://forums.solematesxoxo.com/nikeadidas/index.php?topic=3.0
K@ and Ant,
you should be able to view now..

The topic or board you are looking for appears to be either missing or off limits to you.
Please login below or register an account with Nike/Adidas.
Title: Re: Auto resizing of images in posts, etc by CSS.
Post by: CheeseHead05 on June 28, 2013, 10:39:48 AM
Ant, did you get a chance to check  it out?
Title: Re: Auto resizing of images in posts, etc by CSS.
Post by: ryan_dwight on July 27, 2013, 03:33:21 PM
hi,

i used the code in the first post but not all images are resized, example in this thread (http://www.pinoycyberkada.com/index.php?topic=5492.msg31427#msg31427)

thank you
Title: Re: Auto resizing of images in posts, etc by CSS.
Post by: IchBin™ on July 27, 2013, 10:18:11 PM
Looking at your topic in the link you posted, looks to be working just fine for me.
Title: Re: Auto resizing of images in posts, etc by CSS.
Post by: ryan_dwight on July 28, 2013, 11:12:50 AM
Ok thanks because on the page 2 all images are big. Maybe on my pc only. Thanks
Title: Re: Auto resizing of images in posts, etc by CSS.
Post by: DSystem on October 26, 2013, 12:06:16 PM
Great change in the CSS. Should be incorporated into the SMF default theme.

Congratulations on your great idea.
Title: Re: Auto resizing of images in posts, etc by CSS.
Post by: BGH on October 27, 2013, 10:24:50 AM
This works pretty well inside topics, but what about "action=recent", "action=post;topic=#;last_msg=#", or "action=profile;area=showposts;u=#"?

Is there a way to modify the CSS to make it work in those actions, too?

Best Regards.
Title: Re: Auto resizing of images in posts, etc by CSS.
Post by: Antechinus on October 27, 2013, 05:28:02 PM
It'd just be a matter of applying the right targeting for the CSS. Can't remember offhand what the elements are in those sections, but Firebug or Web Developer would get them for you. I'm too lazy to look them up right now. :)
Title: Re: Auto resizing of images in posts, etc by CSS.
Post by: crashbox on October 28, 2013, 11:55:27 AM
Hi Antechinus or anyone else that could help

I have installed sms a few days ago with a new theme and have edited the background image
The problem is i look at the website in 1920 x1080 but some users that are viewing the site are using lower resolutions which knocks the background image out of alignment.

I could forward you the link to the site to show you what i mean on different resolutions.
Do i need to add your code Antechinus to the main smf css or to the template css.

Sorry im new to this and im finding my feet.

Best regards
Title: Re: Auto resizing of images in posts, etc by CSS.
Post by: Arantor on October 28, 2013, 12:00:12 PM
This code isn't about resizing the background picture, but about resizing pictures inside posts.

In fact I'm not sure there's a *good* way to get background pictures to work right...
Title: Re: Auto resizing of images in posts, etc by CSS.
Post by: crashbox on October 28, 2013, 12:09:48 PM
Ok thanks for the reply,

So how do web developers create a site that fits all ie: pc's / tablets / phones and so forth. I would of thought what they do is pretty much resizing the whole template with images.

Sorry if i sound a little naive i am just trying to get my head around changing the background image to fit all resolutions used

Best regards   
Title: Re: Auto resizing of images in posts, etc by CSS.
Post by: IchBin™ on October 28, 2013, 12:28:33 PM
You use media queries.
https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Media_queries
Title: Re: Auto resizing of images in posts, etc by CSS.
Post by: crashbox on October 28, 2013, 12:40:17 PM
This is what iam having the problem with but im still a little lost

http://173rd.us.173rd.us/Themes/Black_Ops_2/images/theme/bg_body.jpg  <<needs to resize to all resolutions
Title: Re: Auto resizing of images in posts, etc by CSS.
Post by: IchBin™ on October 28, 2013, 03:02:31 PM
Did you read the info at the link?
Title: Re: Auto resizing of images in posts, etc by CSS.
Post by: BGH on October 28, 2013, 07:09:31 PM
It'd just be a matter of applying the right targeting for the CSS. Can't remember offhand what the elements are in those sections, but Firebug or Web Developer would get them for you. I'm too lazy to look them up right now. :)

Fair enough, will check it later then, and see what I can come across :)

Thanks for the code, it's very handy!  :)

I'm also one of those who think this should be default in SMF :p, maybe handed through the admin center, somehow?

Regards.

Title: Re: Auto resizing of images in posts, etc by CSS.
Post by: crashbox on October 31, 2013, 04:46:38 PM
Did you read the info at the link?


Yup but it does not make sense still to what gets added where and a how to do :-(
Title: Re: Auto resizing of images in posts, etc by CSS.
Post by: IchBin™ on November 01, 2013, 04:53:09 PM
And what about the examples given at any of these links (https://www.google.com/search?q=media+query+examples&oq=media+query+examples&aqs=chrome..69i57j0l2.4933j0j7&sourceid=chrome&espvd=215&es_sm=122&ie=UTF-8)?
Title: Re: Auto resizing of images in posts, etc by CSS.
Post by: Jack_Elixir on May 03, 2014, 10:20:56 PM
/* 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: 105px;


above code is not resize avatar in posts, at 2.0.7


everythingelse is ok
Title: Re: Auto resizing of images in posts, etc by CSS.
Post by: Taifuuni on July 21, 2014, 12:34:43 PM
Is it anyway possible to set max width for attached image? I tried to set it but it affects the thumbnail also. Can't set it specifically to the enlarged thumbnail. Is this doable with CSS or does it need tweaking in the javascript files or elsewhere?
Title: Re: Auto resizing of images in posts, etc by CSS.
Post by: -Captain Ghost- on August 25, 2014, 10:24:31 PM
Everything works fine but avatar resize won't work
Title: Re: Auto resizing of images in posts, etc by CSS.
Post by: Antechinus on August 26, 2014, 02:43:40 AM
Try just using img.avatar instead.
Title: Re: Auto resizing of images in posts, etc by CSS.
Post by: -Captain Ghost- on August 28, 2014, 08:19:14 AM
Try just using img.avatar instead.
Sorry but i don't know where to replace
Can you do it

Thanks
Title: Re: Auto resizing of images in posts, etc by CSS.
Post by: peter_pan_oO on September 02, 2014, 04:22:44 PM
mhhh it does not seem to work for me. any ideas?

Code: [Select]
http://forum.truthtube.de/dokumentationen/the-act-of-killing-%282012%29
I included the code via the admin cp. Should I do this via my ftc program?
Also I am new to SMF, so please have patience with me ;)

EDIT: It kind of works now, but the text still breaks out.
Code: [Select]
/* 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: 50%;
}

Edit 2: working after I changed    width: auto; --->    width: 50%;
Title: Re: Auto resizing of images in posts, etc by CSS.
Post by: johnpereless on September 29, 2014, 06:44:53 AM
Well, I am not that technical and I don't use CSS but it's my curiosity to work on CSS! Thanks buddy for nice explanation.
Title: Re: Auto resizing of images in posts, etc by CSS.
Post by: acepnoor on October 11, 2014, 10:43:14 AM
great, I will try your css, thats what I m looking for..thanks for the share friend  :D
Title: Re: Auto resizing of images in posts, etc by CSS.
Post by: Fotoforofos.com on January 14, 2015, 04:56:24 PM
Thanks for the tip, i'm using it to resize images inside quotes:

Code: [Select]
blockquote img {
   height: auto;
   width: auto;
   max-height: 150px;
   max-width: 125px;
}
Title: Re: Auto resizing of images in posts, etc by CSS.
Post by: Antechinus on January 14, 2015, 05:01:54 PM
I use it basically everywhere. Very useful for responsive sites. :)
Title: Re: Auto resizing of images in posts, etc by CSS.
Post by: mcelliot_g on February 24, 2015, 05:23:57 PM
Hi everyone, this is my first post!
I have a little question, I just converted my forum from phpbb3 to smf, (almost) everything went fine and I used the css code provided here at the end of every theme i installed. While it auto resizes each image on the posts to fit the user's screen with no problems, I was wondering how I could make an image return to its original size by clicking on it and vice versa, just like it's done on attached images thumbnails. I saw on some examples here that this is possible, but it's not working on my forum. Is this the expected behaviour or am I missing something?
Thank you so much in advance!
Title: Re: Auto resizing of images in posts, etc by CSS.
Post by: Antechinus on February 24, 2015, 07:09:06 PM
It's expected behaviour. However, you can still see the original image by right click > View Image.
Title: Re: Auto resizing of images in posts, etc by CSS.
Post by: mcelliot_g on February 24, 2015, 09:29:23 PM
Thank you so much for your reply! I guess clicking on image as I explained would require javascript, if I am correct? Anyway, your modifications worked as a charm! Thanks again!
Title: Re: Auto resizing of images in posts, etc by CSS.
Post by: Antechinus on February 27, 2015, 11:55:19 PM
Yes, it would require javascript. You could write it yourself if you wanted to, or someone might write it for you if you asked.
Title: Re: Auto resizing of images in posts, etc by CSS.
Post by: samk2824 on August 18, 2015, 10:41:06 AM
Thank you for sharing this Amazing Tips, this will surely Help me in minimizing my site Load time too.  8)
Regards,
Title: Re: Auto resizing of images in posts, etc by CSS.
Post by: Kindred on August 18, 2015, 12:11:53 PM
no it won't...   resizing with CSS is still LOADING the original image and forcing it to be resized. This will not have any effect on load time.
Title: Re: Auto resizing of images in posts, etc by CSS.
Post by: 1985 on October 25, 2016, 05:52:42 PM
This work fine in posts, but if you put URL in image it will not resize.
Title: Re: Auto resizing of images in posts, etc by CSS.
Post by: landyvlad on January 31, 2017, 08:49:03 PM
Two questions.

1. Did you ever make this into a mod?  You ought to! Easier to manage/control that way.

2. If I make the suggested changes as per the OP - and don't like the result - is it an easy process to reverse?

Title: Re: Auto resizing of images in posts, etc by CSS.
Post by: Antechinus on February 02, 2017, 07:05:56 PM
1/ No. More work for me. If anyone wants a mod, they're welcome to make it.

2/ Well, if you think about that question for a minute, it should be clear that reversing the process would be exactly as easy as implementing it in the first place.
Title: Re: Auto resizing of images in posts, etc by CSS.
Post by: landyvlad on February 02, 2017, 09:21:25 PM
1, Fair call.
2. Cool. My brain was slush when I asked that question.  (It's mildly more gelatinous now...)

Thanks mate.
Title: Re: Auto resizing of images in posts, etc by CSS.
Post by: br360 on February 02, 2017, 09:49:44 PM
It is a pretty easy thing to add or remove. The best part is that you don't have to add any of the code in between other code or in the middle of a template- it's just adding it to the very bottom of your index.css. Like Antechinus said; if you don't like the results, just go back into that file and remove it.

If I recall, wasn't your main issue the resizing of attachments posted underneath posts? If so, all you would really need to add would be this part below as a lot of what he posted deals with avatars, image in signatures, and images that are in posts using img tags-all that the responsive mod you added should already deal with

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

Title: Re: Auto resizing of images in posts, etc by CSS.
Post by: landyvlad on February 02, 2017, 10:31:29 PM
Thanks