Image cropping
Permalink
I'm curious if anyone has created a way to crop an image using code through c5 (not Picnik).
I'd like to have a way to set the absolute dimensions of an image so a client can upload whatever size image they want and the page code will resize it to just fit that space (all of it) and trim off whatever is extra.
I'm not a PHP master but I could probably dig around online to figure it out, but I bet someone's already done this. Maybe it's even in the core somewhere, waiting to get sprung? Or in 5.4?
Please enlighten me! Thanks in advance :-)
I'd like to have a way to set the absolute dimensions of an image so a client can upload whatever size image they want and the page code will resize it to just fit that space (all of it) and trim off whatever is extra.
I'm not a PHP master but I could probably dig around online to figure it out, but I bet someone's already done this. Maybe it's even in the core somewhere, waiting to get sprung? Or in 5.4?
Please enlighten me! Thanks in advance :-)
Good idea!
So then how do you ensure the image fills the imaginary "max" box?
The standard sizing tool makes sure *all* of the image appears in your specified box (maxWidth and maxHeight). That will usually leave space in your "max" box at the bottom or right.
For instance if you want a square thumbnail and want to see as much of the image as possible and have the rest trimmed off. (Ideally it would be centered in the square as well.)
Sorry if I'm being dense!
So then how do you ensure the image fills the imaginary "max" box?
The standard sizing tool makes sure *all* of the image appears in your specified box (maxWidth and maxHeight). That will usually leave space in your "max" box at the bottom or right.
For instance if you want a square thumbnail and want to see as much of the image as possible and have the rest trimmed off. (Ideally it would be centered in the square as well.)
Sorry if I'm being dense!
I even confused myself with that last comment, so here's an attempt at clarification.
Say you want a 100 x 100 image. You don't know what dimensions the uploaded image will be. It could be landscape or portrait format.
What would you set the "max" dimensions to be on the Image block? If you set either to 100 and the uploaded image is not square you'll end up with space to the right or bottom, correct?
Is there a way to ensure that one side of the sized image will be 100 and the other side will be whatever it needs to be, proportionally? (more of a "min" dimension... uh oh... this might be rewriting some core functionality)
Say you want a 100 x 100 image. You don't know what dimensions the uploaded image will be. It could be landscape or portrait format.
What would you set the "max" dimensions to be on the Image block? If you set either to 100 and the uploaded image is not square you'll end up with space to the right or bottom, correct?
Is there a way to ensure that one side of the sized image will be 100 and the other side will be whatever it needs to be, proportionally? (more of a "min" dimension... uh oh... this might be rewriting some core functionality)
I'm not sure how large the default thumbnails are, but you might even be able to handle it by relying on the thumbnail images.
Concrete will automatically generate thumbnails for each image in, I think, two different sizes. If these sizes were adequate, you could use the API to pull the image's thumbnail instead of the actual image, which would solve the aspect ratio issue, and also ensure that you are loading cached images rather than resizing them on the fly each time a user sees the page.
Concrete will automatically generate thumbnails for each image in, I think, two different sizes. If these sizes were adequate, you could use the API to pull the image's thumbnail instead of the actual image, which would solve the aspect ratio issue, and also ensure that you are loading cached images rather than resizing them on the fly each time a user sees the page.
Thanks for the ideas. I appreciate the input.
I'm thinking I need to make a custom block for this, as I imagine wanting this functionality over and over again (being able to let the user add any image to fill a box without them having to crop it proportionally themselves).
If I get it going maybe I'll post it for others. Until then, if anyone else has a suggestion I'd love to hear it!
I'm thinking I need to make a custom block for this, as I imagine wanting this functionality over and over again (being able to let the user add any image to fill a box without them having to crop it proportionally themselves).
If I get it going maybe I'll post it for others. Until then, if anyone else has a suggestion I'd love to hear it!
Using olacom's suggestion of a containing div I made a new Image block that can crop an image.
Details and download:http://www.concrete5.org/index.php?cID=38840...
Details and download:http://www.concrete5.org/index.php?cID=38840...
In the template, use a DIV around that image and specify: overflow: hidden; width, height and other css attribute you need.
Since there is no crop feature yet, this is the easy way. I even use that technic with Galleria block.