News:

Want to get involved in developing SMF, then why not lend a hand on our github!

Main Menu

Auto resizing of images in posts, etc by CSS.

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

Previous topic - Next topic

themavesite

Quote from: Antechinus on June 19, 2013, 06:06:20 PM
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. :)

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

CheeseHead05

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?

sangham.net

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:

/* 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.



Antechinus

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.


Quote from: themavesite on June 19, 2013, 07:19:31 PMThat'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.


Quote from: CheeseHead05 on June 20, 2013, 10:22:42 AM
Resize images when showing under post = CHECKED
Save thumbnails as PNG = CHECKED

Disable those.


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

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

sangham.net

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

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!



Antechinus

Yup. Updated the code in the OP. Repeated here for convenience. :)

/* 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.

sangham.net

A quoted picture changes it's css - class from .img into .avatar or p.avatar?

Antechinus

No. It's not an .img class. It's the HTML img tag name.

sangham.net

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!

Antechinus

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:

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

sangham.net

#50
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:

/* 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%;
}








;D

HunterP


Nice CSS code Ant, thanks!

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

HunterP


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

sangham.net

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

Antechinus

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

The new (shorter) code fixes it.

HunterP


CheeseHead05

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

/* 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%;
}


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

Antechinus

Try it and see. I can't really answer that question until you try it.

CheeseHead05

Ant,

No its not working..im at the point where Im like bump it... >:(

Antechinus

Give me a link so I can see what's happening.

Advertisement: