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.
/* 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:
.tp_shoutbody>img, .tp_shoutbody>.bbc_link>img {
height: auto;
width: auto;
max-width: 95%;
max-height: 200px;
}
Simple Portal:
.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.
.attachments>div>img {
height: auto;
width: auto;
max-width: 95%;
max-height: 640px;
}
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
this is a very good alternative
I use this ;)
img {
width: auto\9;
height: auto;
max-width: 100%;
vertical-align: middle;
border: 0;
-ms-interpolation-mode: bicubic;
}
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
QuoteThe -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.
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.
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:
[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).
[img]https://atmire.com/labs17/bitstream/handle/123456789/7618/earth-map-huge.jpg[/img]
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
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.
img
{
max-width: 40px;
height: auto;
}I use this - thoughts, Ant?
Quote from: 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.
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.
Quote from: live627 on June 03, 2013, 12:36:49 AM
img
{
max-width: 40px;
height: auto;
}I use this - thoughts, Ant?
Why use that? Do you want inline images restricted to 40px wide?
lol
it's specific to avatars.
Quote from: 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.
Ich,
So wut are the instructions to do so in the Admin Panel and Antechinus, do you recommend?
Quote from: live627 on June 04, 2013, 12:45:59 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
Quote from: CheeseHead05 on June 04, 2013, 04:11:14 PMSo 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.
Good idea, surprised nobody came up with this earlier. :)
Well it's (partially) in 2.1 Alpha, and has been for ages. I came up with the idea yonks ago.
Quote from: Antechinus on June 05, 2013, 01:28:26 AM
Quote from: live627 on June 04, 2013, 12:45:59 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.
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.
Nice, Looks quite handy :)
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.
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. ;)
All of them. Those pics just show how the same images will resize to suit screen resolution.
QuoteIf anyone wants bulletproof resizing of images ...
Fantastic tip - many thanks for sharing!
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?
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.
Antechinus,
The code seems to work in my gallery! Thanks for the much needed help.. :)
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?
Nope. Like I said, I've never used a gallery mod. You'd have to ask the person who made it.
Antechinus, thank you, this is awesome ! I've been looking for a simple solution like this.
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.
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.
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
Odd. I'll try it on a local 2.0.x site and see what happens.
ok let me know..
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..
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... :-\
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.
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.
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. :)
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 :/
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?
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.
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;
}
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!
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.
A quoted picture changes it's css - class from .img into .avatar or p.avatar?
No. It's not an .img class. It's the HTML img tag name.
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!
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. :)
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%;
}
(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
Nice CSS code Ant, thanks!
One thing; I noticed that there is no resizing when previewing a posting.
Is it possible to fix this?
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%).
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.
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.
Antechinus / Johann B
Thanks both 8)
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?
Try it and see. I can't really answer that question until you try it.
Ant,
No its not working..im at the point where Im like bump it... >:(
Give me a link so I can see what's happening.
Ant,
http://forums.solematesxoxo.com/nikeadidas/index.php?topic=3.0
*The large pic is from when I open it in google images.
Ant,
What do you exactly mean with this line?
/* This prevents images breaking out of the post on small screens. */
max-width: 95%;
Quote from: CheeseHead05 on June 26, 2013, 10:08:16 AMhttp://forums.solematesxoxo.com/nikeadidas/index.php?topic=3.0
Not available or guest-viewing...
Quote from: 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%;
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.
http://forums.solematesxoxo.com/nikeadidas/index.php?topic=3.0
K@ and Ant,
you should be able to view now..
Quote from: 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..
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.
Ant, did you get a chance to check it out?
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
Looking at your topic in the link you posted, looks to be working just fine for me.
Ok thanks because on the page 2 all images are big. Maybe on my pc only. Thanks
Great change in the CSS. Should be incorporated into the SMF default theme.
Congratulations on your great idea.
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.
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. :)
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
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...
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
You use media queries.
https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Media_queries
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
Did you read the info at the link?
Quote from: 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. :)
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.
Quote from: IchBin™ on October 28, 2013, 03:02:31 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 :-(
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)?
/* 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
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?
Everything works fine but avatar resize won't work
Try just using img.avatar instead.
Quote from: Antechinus on August 26, 2014, 02:43:40 AM
Try just using img.avatar instead.
Sorry but i don't know where to replace
Can you do it
Thanks
mhhh it does not seem to work for me. any ideas?
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.
/* 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%;
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.
great, I will try your css, thats what I m looking for..thanks for the share friend :D
Thanks for the tip, i'm using it to resize images inside quotes:
blockquote img {
height: auto;
width: auto;
max-height: 150px;
max-width: 125px;
}
I use it basically everywhere. Very useful for responsive sites. :)
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!
It's expected behaviour. However, you can still see the original image by right click > View Image.
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!
Yes, it would require javascript. You could write it yourself if you wanted to, or someone might write it for you if you asked.
Thank you for sharing this Amazing Tips, this will surely Help me in minimizing my site Load time too. 8)
Regards,
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.
This work fine in posts, but if you put URL in image it will not resize.
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?
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.
1, Fair call.
2. Cool. My brain was slush when I asked that question. (It's mildly more gelatinous now...)
Thanks mate.
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
.attachments>div>img {
height: auto;
width: auto;
max-width: 95%;
max-height: 640px;
}
Thanks