Trent Wyman

Guest Blogger

Continued from: Responsive Images and Effects for Drupal 7  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).

Description: screenshot-33.png


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.

Description: screenshot-34.png

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.

Description: screenshot-35.png


Update Image Style Effect

Now we have two effects applied to the same image style preset that targets only landscape tablet displays.

Description: screenshot-36.png


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.

Description: screenshot-37.png


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

Description: screenshot-40.png


Add JavaScript Crop Effect to a Defined Image Style (ex: Tablet Landscape)

Description: screenshot-41.png


Configure JavaScript Crop Effect

Description: screenshot-42.png


Set Aspect Ratio

Description: screenshot-43.png


Multiple Effects Applied to an Image Style

Now we have multiple effects applied to our landscape image style.

Description: screenshot-44.png


Viewing the Multiple Effects Reveals a Problem

Description: screenshot-45.png


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.
Description: screenshot-47.png


Changing Load Order of Effects Resolves the Problem

Description: screenshot-48.png


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.

Description: screenshot-49.png


“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.

Description: screenshot-50.png


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.

Description: screenshot-51.png


Final Image with Custom Crop

Description: screenshot-52.png


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.


Read more entries by Trent Wyman.


I'm curious on what happens if you use both. Did you test that scenario by any chance? ☺

I have not tested that specifically, but I assume it would work since the image style crop effect would be applied after the jcrop effect when the node is saved. One would just need to consider the additional cropping that would occur and make sure that the jcrop is within the dimensional range of the image style crop. It's probably not a good idea to use both except in unique cases.

Refresh Type the characters you see in this picture. Type the characters you see in the picture; if you can't read them, submit the form and a new image will be generated. Not case sensitive.  Switch to audio verification.