Cross-posted with permission from Isovera.com
When working with image styles in Drupal 7, there are many types of visual effects that can be applied to responsive displays. Some examples include: Cropping; Desaturation; Watermarks; Canvas Effects; etc. These examples and others can be applied per device type and/or screen width based on the breakpoints and image styles already applied as shown in the previous blog post. Building upon our integration of the Breakpoints & Picture modules from the last post, the steps below demonstrate ways in which to add additional effects to responsive images in Drupal 7. Enable Imagecache
Actions Module & Related Submodules
Download, install, and enable the Imagecache Actions module along with its included submodules: Imagecache Autorotate (if desired); Imagecache Canvas Actions and Imagecache Color Actions (both required for the steps shown below).
Return to the Image Styles List & Select the Style to Apply Effects
After enabling the Imagecache Actions modules, return to one of the image styles already created from the previous blog post. For the example shown below, "responsive-scale-breakpoints_theme_bartik_custom_tablet_landscape_1x" is the image style preset I will use for demonstration. Note: The image style name(s) on your site may vary depending on your theme and/or your preferred naming convention for your image styles. Just keep in mind that the following steps will be targeting the landscape tablet display.
After clicking the "edit" link shown within the "OPERATIONS" columns next to the tablet landscape style, choose one of the available effects. Here, I am selecting "Desaturate" to illustrate a simple example. After selecting your preferred effect, click the "Add" button shown on the right.
Update Image Style Effect
Now we have two effects applied to the same image style preset that targets only landscape tablet displays.
Testing the New Effect
After saving the new effect, clear your site cache and return to the page that has a picture using this particular image style preset. Load the page at the target screen size or by using a tablet device in horizontal display to see the change. The resolution range = 768px min to 960px max as defined by the breakpoints set within the .info file (as shown in the previous blog post). You should see the image displayed in black & white ONLY when viewing on Tablets in landscape orientation and on other devices ONLY when screen resolutions are between 768px and 960px.
That Was Easy, Now Let’s Do Something Practical
A more useful effect may be to serve an image that has an alternate aspect ratio for tablets when they are in landscape orientation. Depending on image size and page real estate, you may want to serve an image that is wider than it is tall for displays in landscape orientation, and serve images that are taller than they are wide when displayed in portrait orientation.Download, install, and enable the Image Javascript Crop Module. This module will allow you to set crop presets for image styles and can also be applied to image upload fields within selected content types.
Enable Image JavaScript Crop & Apply to Image Style
Add JavaScript Crop Effect to a Defined Image Style (ex: Tablet Landscape)
Configure JavaScript Crop Effect
Set Aspect Ratio
Multiple Effects Applied to an Image Style
Now we have multiple effects applied to our landscape image style.
Viewing the Multiple Effects Reveals a Problem
Some Combined Effects Require a Particular Load Order
If you experience a problem similar to this, check the load order of your image style effects. Make sure that the javascript cropping action occurs first in the load order of your effects.
Changing Load Order of Effects Resolves the Problem
JavaScript Crop Applied to Image Field
In addition to providing Javascript Cropping to Image Styles, the Image Javascript Crop module can also provide cropping options on the image upload field of your content types. This works in manner similar to cropping photos on Facebook. The steps below show how to enable javascript cropping on an image field.
Configure Image Crop Style on an Image field
Once Javascript Crop is configured, the Image Field Settings within a chosen content type, will now have a setting labeled “Available imagecrop styles”. Select the "j-crop" option from the list.
“Crop this image” Option Now Available on the Image Field
Now when creating or editing a post using this image field, you will see a button labeled "Crop this image". Click to open the crop tool and cropping options.
Drag & Adjust Crop Area
Within the popup window, use the anchors on the corners of the highlighted area to decrease or increase area of the crop and/or drag the entire crop area to change the X and Y coordinates of the crop.
Final Image with Custom Crop
There are many types of other effects that can be combined to create all sorts of variations of an image for responsive displays. The examples above are basic and fairly simple, yet with a little creativity and experimentation these concepts can be expanded to serve more complex scenarios.
