More Responsive Image Effects for Drupal 7
by Trent Wyman
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
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
Changing Load Order of Effects Resolves the Problem
Configure Image Crop Style on an Image field
“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.