Here's the block.

Fixed a bug where you couldn't select to crop, save, then edit later to deselect cropping.

Nice one! :)

Would it be possible to integrate this logic into the page_list block to enable automatic thumbnailing?

I'm achieving something similar at the moment using Remo's thumbnail template, then a masking DIV and negative margins to show the thumbnail, but I'm wary that occassionally the wrong part of the image will be cropped that way and it will look stupid :(

I've used the same logic for other blocks I've made to allow cropping/positioning of a thumbnail.

Unfortunately the positioning relies on a human making a judgment call about which part of the image to show. It can't happen automatically, unless I'm missing the meaning of your question.

Otherwise, just dive into the code and see how it works. The code you want to swipe is in the controller, in the getContentAndGenerate method.

Of course you'll need to modify to integrate it into your own code, but that should get you started.

Good luck!

Thank you for this!

Does it reduce the file size, too? Like if someone uploads a 500k file but crops it way down, does it reduce the file size, too? Or does it just sort of hide the excess image but keep the file size the same?

Also, can this work inside the WYSIWYG editor (ie. can people add images and crop them while they are adding content through the WYSIWYG editor?)

The block is just the image block with the ability to crop tacked on, so yes it downsizes and optimizes the image. The cropping is in the CSS, so you will probably have a little extra image you can't see, but that shouldn't affect the filesize *too* much.

Try it out and right-click the image to open in a new window and you'll see what I mean.

I use a PHP script to make a thumbnail of images I've included by using custom attributes. See attachment.

Extract the ZIP file. Upload the file thumbnail.php and folder cache to (let's say) the folder libraries (in your root). Make sure you give them both 755 rights.

To use this php:


Why making a thumbnail of 200 by 200 first? Well C5 doesn't crop this. It gives the image a max width and height of 200 pixels. So the file could be 200px width, but 120px height.
After that I crop the image and give it the final thumbnail size.

Thanks for posting this.

Unless I'm missing something there is margin for error here. In your example 200 x 200 guarantees one side of the image will be 200px, but doesn't guarantee the other side will be at least 100px. What happens then?

Yeah... You have to keep that in mind when you're resizing to a smaller size. You can also just change 200x200 to e.g. 500x500 or 1000x1000.

So it's good to think about this what the most suitable size is for the website.

Thanks for sharing, this technique will be really useful for using other thumbnail processing scripts as well like phpThumb for example (make sure to get the patched version!) ... anyways I'm sure your script will work just fine I just thought I should thank you for giving me some new ideas

Cheers,

and thanks Kirkroberts for this handy addon, I like the idea of using the original c5 image block and the default image.php helper so this is perfect and I think the css cropping is probably fine.

*I highly recommend the custom image.php helper class that jorden and kirk posted here, it's what I've been using for all of my hard-coded cropped thumbnails within templates.

Seriously though who in the world wants to have image thumbnails that don't automatically "zoom-crop"??? I really do hope the cropping functionality that jorden and kirk added makes it's way into the core.

Anyhow,
- if you just need a quick and dirty block for your client to add cropped thumbnails then Kirks CSS cropper is sweet,
- if you need to output thumbnails in a page_list template for example then the image.php helper class is the way to go...
- and if you want really fancy thumbnail generating options in addition to cropping then NUL76's solution would work and you could use any php thumbnail generating script you want.

I can't seem to get this installed on 5.4.1. It keeps telling me it can't create some croppable_image class or something when I put this in the blocks folder. Am I missing something? Any help would be great.

Thanks for letting me know.
I haven't tried using the block on a 5.4.1 site yet.
I'm pretty busy right now but I'll try to take a look and get back with you.

Just tried installing the block on a 5.4.1 upgrade and it worked.

Sounds like maybe you're getting the error when you go to Add Functionality in the dashboard. If that's the case, then there is probably another instance of a block trying to use the same class name. This might happen if you've duplicated the folder, but renamed one of them (that just happened to me :-).

Good luck!

Thanks I will check the duplicate problem.

Yes, the duplicate was the issue. Thanks

I just uploaded an image helper class that includes cropping, so if you don't mind getting your hands dirty just a little bit this might be helpful to you:
http://www.concrete5.org/index.php?cID=70847#89293...

I will give this a shot, but I can tell you this will be very useful for some other hacks I have in place. Btw your Deluxe Gallery looks awesome, I will definitely be replacing some other galleries with it.

Jordan, this is going to obviate the need for a cropping image block (at least 99% of the time). Really, I don't usually want the editor to have that much control anyway :-) Thanks!

You're welcome -- thank you for your original inspiration in that other thread where you posted your CSS cropping code!

Perhaps I just don't understand completely, but how do I get this functionality for blocks like image blocks and such? I can understand for custom templates that I can call helpers and specify sizes but let's say it is something like this croppable image block, how would I do that?

Jordan may answer more eloquently, but basically the helper enables you to size and crop on the code level.

So, in a block template view.php file (or maybe in a page type) you would use the code
(assuming you've put the new helper in your /helpers directory)

This takes the $fileObj and resizes it to as small as it can be and still fill up the 100 x 100 pixel space. The "true" argument is what forces the crop. If that were left off or set to "false" the image would be as big as it can be while still fitting in the 100 x 100 pixel space.

Still haven't tested the new helper class, but that's the theory.

Hope that helps!

EDIT: to be clear, you would probably use this in a custom block you create, or in a custom view template for something like a Page List block. It lets you control cropping on the code side. The Croppable Image Block might still be useful if you want to put the control in the hands of an editor.

kirk is correct -- you use this in your own code. But you could also modify the built-in image block very easily to support this. Just copy concrete/blocks/image/controller.php to blocks/image/controller.php, then edit the new file like so:
find this line...

(should be around line 65)
and change it to this: