image resizing with css or jquery
Permalink
Hi everyone!
i'm looking for an automatic image resizer.
I found this block
http://www.concrete5.org/marketplace/addons/zoom_image...
wich basically do what i'm looking for, but only for 1 image per block, and in a precise block.
For the client/owner side, its quite common to display all kind of size images, and that's a problem when using fixed designs.
For example: the content block has 400px width. If the client try to upload an image wich has 500px width, the image will broke all the design.
I also found this jquery plugin
http://static.railstips.org/orderedlist/demos/fancy-zoom-jquery/...
But you need to manually add the class in the img tag.
Finally, i thought i was find the solution with this css snippet:
It works just great in Opera, Safari under Win 7, Chrome and Firefox... but not working on IE 8, so it's not a solution yet (unless someone could get it work in Internet Explorer)
Well, im looking for a solution that makes the in-context editing more friendly to a non advanced users. (I think it's way often to have clientes that doesn't know what a pixel is, and they have no interest at all to knowing it).
Searching the forum i found some threads with similar questions, but all of it ask for cropping. That would be great, but's for now i think it will be more simple to just resize the original image, like the css script or jquery plugin i posted above.
PS: Sorry for my poor english, and i'm totally open to alternatives and to work on something for everyone.
Cheers!
i'm looking for an automatic image resizer.
I found this block
http://www.concrete5.org/marketplace/addons/zoom_image...
wich basically do what i'm looking for, but only for 1 image per block, and in a precise block.
For the client/owner side, its quite common to display all kind of size images, and that's a problem when using fixed designs.
For example: the content block has 400px width. If the client try to upload an image wich has 500px width, the image will broke all the design.
I also found this jquery plugin
http://static.railstips.org/orderedlist/demos/fancy-zoom-jquery/...
But you need to manually add the class in the img tag.
Finally, i thought i was find the solution with this css snippet:
#post_view img { max-width: 620px; height: auto !important; width: expression(this.width > 620 ? 620: true); }
It works just great in Opera, Safari under Win 7, Chrome and Firefox... but not working on IE 8, so it's not a solution yet (unless someone could get it work in Internet Explorer)
Well, im looking for a solution that makes the in-context editing more friendly to a non advanced users. (I think it's way often to have clientes that doesn't know what a pixel is, and they have no interest at all to knowing it).
Searching the forum i found some threads with similar questions, but all of it ask for cropping. That would be great, but's for now i think it will be more simple to just resize the original image, like the css script or jquery plugin i posted above.
PS: Sorry for my poor english, and i'm totally open to alternatives and to work on something for everyone.
Cheers!
Thanks for the reply jordanlev!
Actually what i'm looking for is an automatic resize images inside content blocks.
I know this can be done trough tinyMCE when the image is uploaded, but is quite primitive the way to do that (especially for the lack of a proportional resize, in content blocks context).
So, i appreciate your solution, and i'm sure it's gonna help me in the future when using image blocks.
Cheers!
Actually what i'm looking for is an automatic resize images inside content blocks.
I know this can be done trough tinyMCE when the image is uploaded, but is quite primitive the way to do that (especially for the lack of a proportional resize, in content blocks context).
So, i appreciate your solution, and i'm sure it's gonna help me in the future when using image blocks.
Cheers!
If I understand you correctly, I wholeheartedly agree that a way to scale images is needed. While you can easily scale images proportionally in Tiny MCE by just entering either height or width and leaving the other dimension blank, that simply resizes the image for display purposes. It doesn't actually "down-sample" (down-rez) the image, so you're still serving up the full-sized image - a waste of bandwidth.
Interestingly, the Image block _does_ down-rez, but I don't find the Image block alone to be all that useful. If its functionality could be incorporated into the Content block, that would be nice.
-Steve
Interestingly, the Image block _does_ down-rez, but I don't find the Image block alone to be all that useful. If its functionality could be incorporated into the Content block, that would be nice.
-Steve
In fact shotster, i'm not trying to talk about down-rez of the image, but scale down it.
I personnaly know a lot of ways to correctly display images in a website, scaling it in plenty of online or desktop apps or even scale it via <img width="x" height="x"> if it's needed. Most of my clients doesn't know this, and they also don't know if 500px width it's bigger than the actual size or not. And as service provider, i would like to bring them the friendlier system i can.
In order to do that, i think it could be a good idea to automatic resize the images when they put it on a content block.
Of course that the best solution will be a script wich makes possible downscale and down-rez the images just when the client upload it, but i guess it's way more difficult (but not impossible hey!)
Cheers!
I personnaly know a lot of ways to correctly display images in a website, scaling it in plenty of online or desktop apps or even scale it via <img width="x" height="x"> if it's needed. Most of my clients doesn't know this, and they also don't know if 500px width it's bigger than the actual size or not. And as service provider, i would like to bring them the friendlier system i can.
In order to do that, i think it could be a good idea to automatic resize the images when they put it on a content block.
Of course that the best solution will be a script wich makes possible downscale and down-rez the images just when the client upload it, but i guess it's way more difficult (but not impossible hey!)
Cheers!
> i'm not trying to talk about down-rez
> of the image, but scale down it.
Yes, it's definitely not as intuitive as it could/should be.
> i think it could be a good idea to automatic resize the
> images when they put it on a content block.
I think it would be nice if you could just grab the corner of an image and drag it to scale it - just as you can do with image editing apps. I think there are other rich editors that allow this.
> the best solution will be a script wich makes possible downscale
> and down-rez the images just when the client upload it
I suggested something similar months ago. My suggestion was to allow the user to scale the image by dragging a corner, and when the block is saved, the image would automatically be down-rez'd to those dimensions. This would be done "behind the scenes' and would be completely transparent to the end user. I haven't had the time to pursue implementing it myself, but I think it's doable.
-Steve
> of the image, but scale down it.
Yes, it's definitely not as intuitive as it could/should be.
> i think it could be a good idea to automatic resize the
> images when they put it on a content block.
I think it would be nice if you could just grab the corner of an image and drag it to scale it - just as you can do with image editing apps. I think there are other rich editors that allow this.
> the best solution will be a script wich makes possible downscale
> and down-rez the images just when the client upload it
I suggested something similar months ago. My suggestion was to allow the user to scale the image by dragging a corner, and when the block is saved, the image would automatically be down-rez'd to those dimensions. This would be done "behind the scenes' and would be completely transparent to the end user. I haven't had the time to pursue implementing it myself, but I think it's doable.
-Steve
I think i have one here.
Look at this css code:
Well, this code make all the images inside "contentdiv" downscale to the desire width. The height property makes the downscale proportional.
This code works just great in
FF
Safari
Opera
Chrome
IE9
IE8 in compatibilty mode
So, my new question is: does anyone know whats the use percentage of compatibility mode in IE?
I mean, if the 99% of IE8 users has this option activated, this could be a more than reasonable solution. But if only the 20% use compatibility mode, we are in the same situation...
Cheers!
Look at this css code:
#contentdiv img { max-width:200px; height:auto !important; }
Well, this code make all the images inside "contentdiv" downscale to the desire width. The height property makes the downscale proportional.
This code works just great in
FF
Safari
Opera
Chrome
IE9
IE8 in compatibilty mode
So, my new question is: does anyone know whats the use percentage of compatibility mode in IE?
I mean, if the 99% of IE8 users has this option activated, this could be a more than reasonable solution. But if only the 20% use compatibility mode, we are in the same situation...
Cheers!
Is this IE8 in "IE7 Compatibility Mode", or some new-fangled "IE9 Compatibility Mode"?
I don't know about IE9-compatibility, but you can force IE8 into IE7 compatibility mode with a header:
http://weblogs.asp.net/joelvarty/archive/2009/03/23/force-ie7-compa...
I don't know about IE9-compatibility, but you can force IE8 into IE7 compatibility mode with a header:
http://weblogs.asp.net/joelvarty/archive/2009/03/23/force-ie7-compa...
That's right jordanlev. It's that compatibility mode (IE7).
I used your suggestion as a starting point-
I am using Rigidlight as my template
under General Content Styles
I used this snippet:
#mainshell img{max-width:100%; height:auto !important;}
THIS IS THE ANSWER I HAVE BEEN LOOKING FOR!!!!
whatever my size my content blocks are based on device, it resizes them so they don't bleed out of the content boxes.
Hallelujah!
I am using Rigidlight as my template
under General Content Styles
I used this snippet:
#mainshell img{max-width:100%; height:auto !important;}
THIS IS THE ANSWER I HAVE BEEN LOOKING FOR!!!!
whatever my size my content blocks are based on device, it resizes them so they don't bleed out of the content boxes.
Hallelujah!
Correct me if i'm wrong, but how about this solution?
css:
Right after the open <head> tag, put this line:
<meta http-equiv="X-UA-Compatible" content="IE=7" />
That line turn the IE8 compatibility mode on. So, when the page is loaded, the image will be displayed down And proportionnaly scaled.
This could be an elegant solution, to fix quickly an image wichs is too big for the content block.
Obviously, a script to downscale and down-rez proportionnaly the images will be the perfect solution, but i haven't got the skills to reach that goal.
Thanks to all, and tell me if that's could be a nice solution!
css:
#somediv img{ max-width:400px; height:auto !important; }
Right after the open <head> tag, put this line:
<meta http-equiv="X-UA-Compatible" content="IE=7" />
That line turn the IE8 compatibility mode on. So, when the page is loaded, the image will be displayed down And proportionnaly scaled.
This could be an elegant solution, to fix quickly an image wichs is too big for the content block.
Obviously, a script to downscale and down-rez proportionnaly the images will be the perfect solution, but i haven't got the skills to reach that goal.
Thanks to all, and tell me if that's could be a nice solution!
If you really just want an image block that always resizes images to a maximum width, you could hack the built-in Image block so it defaults to that width -- find the file "YOURSITE/concrete/blocks/image/controller.php" and edit it by changing the following line (line 44 in my version):
...to this:
Now when they add an image block, it will default to the 620 width. Note that editing core system files like this can be dangerous so be careful you don't lose a semicolon or whatever. Also note that this will get overwritten if you upgrade your system.
Hope that helps.
-Jordan