Code Snippets

Speeding up manual image cropping

This code snippet will give a brief guide to speed up manual image cropping. For in depth explaination, refer to this blog post.

First, we create our own image efftect by implementing this code:
hook_image_effect_info () 

Now that we have our image effect and image styles, we need a page to display it. We can create a menu call back which will add our page to the list of items in the menu on the node form:
* Implements hook_menu().
function mymodule_menu() {
$items = array();
$items['node/%node/crop'] = array(
'title' => 'Crop Image',
'description' => 'Edit and crop a image.',
'page callback' => 'mymodule_crop,
'page arguments' => array(1),
'access callback' => TRUE, // should set to a permission to allow certain users to crop.
'type' => MENU_LOCAL_TASK,
'weight' => 50,
$items['admin/config/mymodule/save'] = array(
'title' => 'Temp Image Crop Validate URL',
'description' => 'Save cropped photos.',
'page callback' => 'mymodule_save',
'access callback' => TRUE,
'type' => MENU_CALLBACK,
return $items;

Then we save the information we pass from our UI with an AJAX call where the section of our template will look like this: 
<?php foreach ($styles as $key => $style) : ?>
<?php foreach ($style['effects'] as $effect_key => $effect) : ?>
<?php if($effect['name'] == $crop_style): ?>" data-width="

<?php echo $style['effects'][$effect_key]['data']['width'] ?>" data-height="

<?php echo $style['effects'][$effect_key]['data']['height'] ?>">

<?php echo $key ?>
<?php endif; ?>
<?php endforeach; ?>
<?php endforeach; ?>


Resource Tags: