CroppableImage3 by horst

Field that stores one or more GIF, JPG, or PNG images and support optional predefined crop functionality!

Croppable Image 3

Module for ProcessWire >= 3.0.20


Version 1.2.0


How to install

Just add the folder CroppableImage3 including all of its subfolders and files to your site/modules/ folder. After that go to the modules section in the PW-admin and refresh the list of available modules. You should see four new modules:

  • CroppableImage3
  • FieldtypeCroppableImage3
  • InputfieldCroppableImage3
  • ProcessCroppableImage3

Use CroppableImage3 to install all at once!

After that create a new field and make it use the fieldtype CroppableImage3.

With this field you are able to define Cropsettings, but you don't have to. You also can use it like the core Imagefield and just benefit from some enhancements other than the crop-functionality.

If you want to define Cropsettings you can do it for each field in Setup > Fields > YOUR_FIELD_NAME Input tab:

Each crop setting must be on its own line and consist of at least 3 parameters, separated by comma:

crop-name,width,height

Optionally you can limit the crop creation and visibility within your input field on page edit to specific templates, separated by comma as well:

crop-name,width,height,template-name-1,template-name-2

Example:

landscape,900,600
portrait,450,600
squarethumb,250,250,home,sidebar

Usage in templates

FieldtypeCroppableImage3 adds a getCrop-method to Pageimage. getCrop returns the Pageimage instance of the crop you have asked for, ie:

// get the first image instance of crop setting 'portrait'
$image = $page->images->first()->getCrop('portrait');

You can further use every pageimage property like 'url', 'description', 'width' & 'height' with it:

// get the first image instance of crop setting 'portrait'
$image = $page->images->first()->getCrop('portrait');
echo "<img src='{$image->url}' alt='{$image->description}' />";

If you want to manipulate / resize the cropimage further, you should pass a second argument to the getCrop-method. This argument is a PW-Selectorstring. It can contain as many of the known pageimage options like 'quality', 'sharpening', 'cropping', etc, as you need, but none of them is required. But required is at least one setting for 'width' or 'height':

$image = $page->images->first()->getCrop('portrait', "width=200");
$image = $page->images->first()->getCrop('portrait', "width=200, height=200, quality=80");
$image = $page->images->first()->getCrop('portrait', "height=400, sharpening=medium, quality=85");

If you haven't cropped that image yet (via the cropping tool), a default cropping from the center will be executed

Credits

Current Version (PW 3.0.20+ and PW 2.8.20+) developed by
Intermediate Version (PW 2.5.11+)
  • Horst Nogajski
  • Christian Raunitschka
  • Martijn Geerts
Original Version

No Warranty

The software is provided "as is", use it at your own risk.

Install and use modules at your own risk. Always have a site and database backup before installing new modules.

Twitter updates

  • ProcessWire 3.0.173 adds several new requested features and this post focuses on one of my favorites: the ability to hook into and handle ProcessWire URLs, independent of pages— More
    5 March 2021
  • This week ProcessWire gained powerful new tools for finding pages and controlling how they are loaded. If you like to maximize performance and efficiency, you’ll like what 3.0.172 brings— More
    5 February 2021
  • ProcessWire 3.0.171 dev branch core updates – More
    22 January 2021

Latest news

  • ProcessWire Weekly #356
    In the 356th issue of ProcessWire Weekly we'll cover the latest core updates (ProcessWire 3.0.173), introduce new third party modules RockCalculator and RockIframe, and take a closer look at a brand new site of the week. Read on!
    Weekly.pw / 6 March 2021
  • ProcessWire 3.0.173 core updates: New URL hooks
    ProcessWire 3.0.173 adds several new requested features and this post focuses on one of my favorites: the ability to hook into and handle ProcessWire URLs, independent of pages.
    Blog / 5 March 2021
  • Subscribe to weekly ProcessWire news

“To Drupal, or to ProcessWire? The million dollar choice. We decided to make an early switch to PW. And in retrospect, ProcessWire was probably the best decision we made. Thanks are due to ProcessWire and the amazing system and set of modules that are in place.” —Unni Krishnan, Founder of PigtailPundits