Drupal ImageCache Actions Module: Create Overlays and Watermarks Tutorial

I'm going to show you how to add media overlays or watermarks with Drupal's ImageCache Actions module. Create automatic call to actions in this tutorial.

Utilizing the Power of the Play Button

As content strategists and business professionals, we strive to engage users with our content. Whether we are promoting a product line, telling our story, selling tickets to an event, or like me—providing tutorial videos—we want to reach users. In my previous Drupal tutorial video I showed you how to add YouTube videos to your Drupal 7 website using the Media and Media: YouTube modules. First, why is this valuable for your web presence?

Video Call to Action for Conversions

Now that you’ve successfully added video to your content strategy and to your Drupal 7 website, we need to utilize a universally recognized call to action: the Play Button. Use play buttons to guide users to your video content.

Play Buttons Increase Click Through Rates

Utilizing the Play Button to guide users towards a specific goal or action through persuasive design and by triggering a psychological response touches on a content strategy known as Conversion Centered Design (CCD). Although I’m going to primarily focus on utilizing play buttons on your Drupal 7 website, the power of the Play Button can be utilized in email marketing campaigns and on social media where the content strategy has shown proven results. Having an image with a play symbol overlay in your email marketing campaign can increase click through rates as much as 200%-300%. It should be no surprise that the concept of the Play Button is a powerful marketing tool, which is why you should also be utilizing it in your Drupal 7 website.

Automate Play Button Overlays

If you recall from my Drupal Media module tutorial video, Media: YouTube module provides a way to display the YouTube video thumbnail while giving you the flexibility to style the thumbnail with your site's image styles. The YouTube video thumbnail does not apply a Play Button overlay to distinguish video content from regular images nor does it trigger a call to action for users. However, its flexibility allows you to customize your YouTube thumbnail through Drupal image styles. The ImageCache Actions module let's us automate this process. 

Getting Started with the ImageCache Actions Module

In this Drupal tutorial, I’m going show you how to apply a Play Button overlay to your YouTube preview images. We'll use the ImageCache Actions module to automate the process.

The ImageCache Actions module actually provides a suite of additional image affects that can be used in combination with the core Drupal image styles. These effects include:

• Watermarking
• Overlays
• Text Overlay
• Color-Shifting
• Brighten/Darken
• Alpha Bending
• Canvas Manipulation
• Background (Underlay)
• File Format Switcher
• Rounded Corners
• Aspect Switcher
• Custom Actions
• Posterize
• Scale/Resize
• Adjust Color Levels
• Desaturate

You can apply CSS to create a Play Button overlay in many instances, however I find that utilizing the ImageCache Actions module provides a swift solution. This is especially relevant when used in combination with the Colorbox module or another process which opens the video in a lightbox.

Download and Install the ImageCache Actions Module

First, head over to Drupal.org and the project page of ImageCache Actions. I'm also using the Media and Media: YouTube modules to create a use case for this tutorial (video thumbnails in need of play overlays). Be sure to grab any dependencies, too.

If using Drush, execute this command to install ImageCache Actions and ImageCache Canvas Actions submodule:

drush en imagecache_actions imagecache_canvasactions -y

Primary modules

• ImageCache Actions
• Media
• Media: YouTube

Dependencies

• File Entity
• Views

For those not using Drush, be sure to enable the relevant modules as depicted:

I'm working under the impression that you already know how to download and install modules through Drush or manually.

Module and Drupal Core Versions

I am using Media module 7.x-2.0 alpha 4; Media: YouTube module 7.x-2.0-rc5; and ImageCache Actions module 7.x-1.5 in this tutorial. You'll need to use Drupal 7 to follow this tutorial.

Creating a Play Button overlay with ImageCache Actions

Whether you create your own, purchase one online, or hire a designer to create one for you, you must have a Play Button image to complete your new video image style.  They’re many options available, and you may want to consider your site design palette or CCD when planning and designing your Play Button.

Play Button Image

Today, I am using a Play Button that I previously created. This Play Button is a simple triangular button that is 40x40 pixels. Feel free to use it for your own project. If you're having trouble with this tutorial, you can always look into a Drupal consulting expert.

Now, you can either upload your Play Button image directly to your theme's folder or you can add your Play Button image to your site through Drupal's file manager. If you want to use Drupal's file manager, you will need to navigate to Admin → Content → Files and upload your Play Button image.

I am going to assume that you already know how to upload images to your Drupal 7 site, so I will be skipping the full process.

Add and Configure the Video Image Style

Now you’ve downloaded and enabled the ImageCache Actions module, ImageCache Canvas Actions submodule, and designed & uploaded your Play Button image. If you haven’t done so already, you now need to determine where you want the video Play Button to be used on your YouTube thumbnail image.

In my case, I’ve created a Display using the Views module for a News listing, and I want to distinguish my Video content from my regular images. I want to keep the same scale and crop ratios as my regular image in this listing, but add the Play Button overlay for my videos. For all other media in this listing, I am utilizing my image style 220x160.

The below image illustrates my 220x160 image style.

I’ll then navigate to Configuration → Media → Image Styles and select Add Style.

Next, I name my image style appropriately and select Create New Style.

I’ll add and configure the Scale and Crop as illustrated in the 220x160 image style. Then, I’ll add an Overlay (Watermark) as seen in the image below.

The X and Y offsets configure the positioning of your watermark or overlay on your original image. For my use case, I want to center the Play Button overlay on my YouTube preview thumbnail, and so I will choose center for both my X and Y offsets. You can then choose the opacity levels for your Play Button overlay image. In my case, I’m going choose 80, which represents 80% opacity. This makes the overlay slightly transparent.

For File Name, add the relative or absolute path of your file.

The below image illustrates the configuration of my Overlay (watermark) image style.

Once finished, select Update Style. Your image style should save successfully.

Update and Configure the Video File Type

You will now need to navigate to Structure→File Types so that you can apply your new video style to your YouTube thumbnail image.

Under Video file type, select Manage File Display.

Select the Teaser Display and update your image style to new Play Button image style, which in my case is 220x160-video.

Save your configuration.

Configure the View Display

Navigate to Structure → Views and select the View you wish to add your YouTube thumbnail image. Under Fields, select Add.

Choose your Video field from the field list. Then, select Apply and configure your Video field. For Formatter, select Rendered File. For the View mode, select Teaser.

Apply your Display and Save your View.

If you navigate to the path your updated View Display, the Play Button overlay should be visible on your YouTube video thumbnail.

Improve Conversions with ImageCache Actions Module Overlays

Use this tutorial to add play button overlays to your video content previews. These overlays act as call to actions, increasing click through rates and telling users to expect video content. Drupal's ImageCache Actions module is capable of adding many effects to image styles, but watermarks or overlays are one of the most common. Following this tutorial will fully automate the process for you. As new content is added, your image effect will apply automatically.