You are here

Home » API reference » Manual Crop 7

README.txt in Manual Crop 7 

Manual Crop
===========

The Manual Crop module exposes a set of image style effects that allow you
to crop (and scale) an image after uploading.

Dependencies
------------
- Libraries 2.x
- jQuery plugins:
    - imagesLoaded:
        + Website: http://desandro.github.io/imagesloaded
        + Download: https://github.com/desandro/imagesloaded/archive/v2.1.2.tar.gz
    - imgAreaSelect:
        + Website: http://odyniec.net/projects/imgareaselect
        + Download: https://github.com/odyniec/imgareaselect/archive/v0.9.11-rc.1.tar.gz

Installation
------------
Start by downloading and installing the Libraries 2.x module.

Next download and extract the imagesLoaded plugin, rename the extracted folder to
"jquery.imagesloaded" and place it under "sites/all/libraries". The plugin should
now be located at "sites/all/libraries/jquery.imagesloaded/jquery.imagesloaded.min.js".

Please note that the 3.x version can also be used, but it depends on jQuery 1.5
which can only be obtained by installing the jQuery Update module.

Now download and extract the imgAreaSelect plugin, rename extracted folder to
"jquery.imgareaselect" and copy it into "sites/all/libraries". The plugin should
now be located at "sites/all/libraries/jquery.imgareaselect/jquery.imgareaselect.dev.js".

When finished you can activate the module via the Modules page!

Configuration
-------------
After installing the module you need to configure your image styles before you
can start cropping. Go to Administration » Configuration » Media » Image styles
and click on the "edit" link for the styles that need a Manual Crop effect.

Add and configure one of the Manual Crop effects, you'll notice that the Manual
Crop effect will always become the first effect in the list. This is because
cropping should always be done first, otherwise the result will be unpredictable.

Next go to Administration » Structure » Content types and click on the "manage fields"
link (the Field UI module should be activated) for the content type that should
allow cropping. Now click on the "edit" link of the image field, so you can enable
and configure Manual Crop (open the "Manual Crop" fieldset) for the current field.

After saving the settings you should return to the content type overview and click
on "manage display" so you can set the (cropped) image style that should be used.

Manual Crop adds a "?c=md5_hash" query string parameter to the image url so the
at client-side cached image gets refreshed whenever the crop selection changes.
To prevent an SEO impact, this can be disabled by unchecking the
"Reload cache-control" setting at admin/config/media/manualcrop.

File

README.txt
View source 
  1. Manual Crop

  2. ===========

  3. 

  4. The Manual Crop module exposes a set of image style effects that allow you

  5. to crop (and scale) an image after uploading.

  6. 

  7. Dependencies

  8. ------------

  9. - Libraries 2.x

  10. - jQuery plugins:

  11.     - imagesLoaded:

  12.         + Website: http://desandro.github.io/imagesloaded

  13.         + Download: https://github.com/desandro/imagesloaded/archive/v2.1.2.tar.gz

  14.     - imgAreaSelect:

  15.         + Website: http://odyniec.net/projects/imgareaselect

  16.         + Download: https://github.com/odyniec/imgareaselect/archive/v0.9.11-rc.1.tar.gz

  17. 

  18. Installation

  19. ------------

  20. Start by downloading and installing the Libraries 2.x module.

  21. 

  22. Next download and extract the imagesLoaded plugin, rename the extracted folder to

  23. "jquery.imagesloaded" and place it under "sites/all/libraries". The plugin should

  24. now be located at "sites/all/libraries/jquery.imagesloaded/jquery.imagesloaded.min.js".

  25. 

  26. Please note that the 3.x version can also be used, but it depends on jQuery 1.5

  27. which can only be obtained by installing the jQuery Update module.

  28. 

  29. Now download and extract the imgAreaSelect plugin, rename extracted folder to

  30. "jquery.imgareaselect" and copy it into "sites/all/libraries". The plugin should

  31. now be located at "sites/all/libraries/jquery.imgareaselect/jquery.imgareaselect.dev.js".

  32. 

  33. When finished you can activate the module via the Modules page!

  34. 

  35. Configuration

  36. -------------

  37. After installing the module you need to configure your image styles before you

  38. can start cropping. Go to Administration » Configuration » Media » Image styles

  39. and click on the "edit" link for the styles that need a Manual Crop effect.

  40. 

  41. Add and configure one of the Manual Crop effects, you'll notice that the Manual

  42. Crop effect will always become the first effect in the list. This is because

  43. cropping should always be done first, otherwise the result will be unpredictable.

  44. 

  45. Next go to Administration » Structure » Content types and click on the "manage fields"

  46. link (the Field UI module should be activated) for the content type that should

  47. allow cropping. Now click on the "edit" link of the image field, so you can enable

  48. and configure Manual Crop (open the "Manual Crop" fieldset) for the current field.

  49. 

  50. After saving the settings you should return to the content type overview and click

  51. on "manage display" so you can set the (cropped) image style that should be used.

  52. 

  53. Manual Crop adds a "?c=md5_hash" query string parameter to the image url so the

  54. at client-side cached image gets refreshed whenever the crop selection changes.

  55. To prevent an SEO impact, this can be disabled by unchecking the

  56. "Reload cache-control" setting at admin/config/media/manualcrop.