Auto resizing of images in posts, etc by CSS.

Started by Antechinus, June 02, 2013, 02:44:08 AM

Previous topic - Next topic

singhabhishek251

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.

CheeseHead05

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.  ;)

Antechinus

All of them. Those pics just show how the same images will resize to suit screen resolution.

GL700Wing

QuoteIf anyone wants bulletproof resizing of images ...
Fantastic tip - many thanks for sharing!
Life doesn't have to be perfect to be wonderful ...

CheeseHead05

#24
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?

Antechinus

Quote from: 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?
Read the comments in the code. They tell you what each block does.

/* Auto resizing of avatars in posts and personal messages. */

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

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

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



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

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


QuoteI 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.

CheeseHead05

Antechinus,

The code seems to work in my gallery! Thanks for the much needed help.. :)

CheeseHead05

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?

Antechinus

Nope. Like I said, I've never used a gallery mod. You'd have to ask the person who made it.

TomW

Antechinus, thank you, this is awesome !  I've been looking for a simple solution like this.

CheeseHead05

Quote from: 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.

Im talking about my forum attachments and not gallery.

Antechinus

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.

CheeseHead05

Quote from: 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.


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

Antechinus

Odd. I'll try it on a local 2.0.x site and see what happens.

CheeseHead05


themavesite

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..
TMS Forums
Since 2008 and still going strong! Join today! http://forums.themavesite.com/index.php

CheeseHead05

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... :-\

themavesite

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.
TMS Forums
Since 2008 and still going strong! Join today! http://forums.themavesite.com/index.php

Antechinus

#38
Quote from: 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... :-\

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.

Antechinus

Quote from: 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.

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. :)

Advertisement: