Creating an Image Effect to put a play button on Video thumbnails

Jeff Geerling | March 9, 2012, 12:03 a.m. | Original

I had a rather interesting feature to implement on flocknote lately (after doing a pretty vast redesign of the UX/UI on the site over the past month... it was refreshing to dig into PHP again!):

We want to allow insertion of YouTube and Vimeo (and potentially other) videos into 'Notes' on the site, and there are a few moving parts in this equation:

I had to create a text format filter similar to the 'Embedded media inline' module in Drupal 6 so people could simply put a 'merge tag' in their Note (like [video=URL] ) where they want the video to appear.
When a user views the embedded video on the site, the video should show at a uniform width/height, and be able to play the video (basically, a merge tag the user enters should be converted to the proper embed code for the provider (in this case, an </code>with the proper formatting).</li><li>When a user sees the video in the note email, the video can't actually play since very few email clients support any kind of video embedded in an email. So, instead, the video shows as a frame with a play button on top (this is the trickiest part), and links to the video on YouTube, Vimeo, etc.</li></ul><h3>Creating my own Image Effect for a Video Play Button</h3>What I wanted to end up with was an image that had a custom-made iOS-style play button (play icon in a circle with a translucent grey background) right in the middle (I like the simple look of videos on my iPad...):<figure><img src=/blog/2012/creating-image-effect-place/video-play-button-example-resized.png alt="Video Play Button Example" width=300 height=225></figure>So, I decided to work with Drupal's Image Effect API and expose a new image effect, aptly named 'Video Play Button', to Drupal's simple set of 'Resize, Scale, etc.' image effects. This is a pretty simple process:<ol><li>Implement <a href=https://api.drupal.org/api/drupal/modules!image!image.api.php/function/hook_image_effect_info/7>hook_image_effect_info()</a> to tell Drupal about the new effect.</li><li>Process the image (in <code>$image->resource</code>) in the 'effect callback' that you defined in hook_image_effect_info().</li></ol>In my case, I calculated the center of the image to be processed, then subtracted half the play button's width and height (respectively) from the center dimensions, and used those dimensions, along with the image handle (<code>$image->resource</code>) and the play button image (I used drupal_get_path() to get the path to my custom module directory, and put the image in 'images/play-button.png') to build the final graphic using PHP GD library's <a href=https://php.net/manual/en/function.imagecopy.php>imagecopy()</a> function.Here's the image effect info hook implementation and callback I wrote to put the play button on top of the image:<div class=highlight><pre tabindex=0 style=color:#e6edf3;background-color:#0d1117;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-text-size-adjust:none><code class=language-gdscript3 data-lang=gdscript3>&lt;?php /** * Implements hook_image_effect_info(). */ function mymodule_image_effect_info() { return array( &#39;mymodule_video_play_button&#39; =&gt; array( &#39;label&#39; =&gt; t(&#39;Video Play Button&#39;), &#39;help&#39; =&gt; t(&#39;Adds a video play button in the middle of a given image.&#39;), &#39;effect callback&#39; =&gt; &#39;mymodule_video_play_button_callback&#39;, &#39;dimensions passthrough&#39; =&gt; TRUE, ), ); } /** * Video Play Button image callback. * * Adds a video play button on top of a given image. * * @param $image * An image object returned by image_load(). * * @return * TRUE on success. FALSE on failure to colorize image. */ function mymodule_video_play_button_callback(&amp;$image) { // Make sure the imagecopymerge() function exists (in GD image library). if (!function_exists(&#39;imagecopymerge&#39;)) { watchdog(&#39;image&#39;, &#39;The image %image could not be processed because the imagecopymerge() function is not available in this PHP installation.&#39;, array(&#39;%file&#39; =&gt; $image-&gt;source)); return FALSE; } // Verify that Drupal is using the PHP GD library for image manipulations // since this effect depends on functions in the GD library. if ($image-&gt;toolkit != &#39;gd&#39;) { watchdog(&#39;image&#39;, &#39;Image processing failed on %path. Using non GD toolkit.&#39;, array(&#39;%path&#39; =&gt; $image-&gt;source), WATCHDOG_ERROR); return FALSE; } // Calculate the proper coordinates for placing the play button in the middle. $destination_x = ($image-&gt;info[&#39;width&#39;] / 2) - 35; $destination_y = ($image-&gt;info[&#39;height&#39;] / 2) - 35; // Load the play button image. $play_button_image = imagecreatefrompng(drupal_get_path(&#39;module&#39;, &#39;mymodule&#39;) . &#39;/images/play-button.png&#39;); imagealphablending($play_button_image, TRUE); // Preserve transparency. imagealphablending($image-&gt;resource, TRUE); // Preserve transparency. // Use imagecopy() to place the play button over the image. imagecopy( $image-&gt;resource, // Destination image. $play_button_image, // Source image. $destination_x, // Destination x coordinate. $destination_y, // Destination y coordinate. 0, // Source x coordinate. 0, // Source y coordinate. 70, // Source width. 70 // Source height. ); return TRUE; } ?&gt; </code></pre></div>...and a PSD of the play button is attached, in case someone else wants to save themselves 10 minutes' drawing in Photoshop :)There's another great example image effect, if you want to look at more examples, in the <a href=https://drupal.org/project/examples>Examples for Developers</a> modules' image_example.module.<h3>imagecopy() vs. imagecopymerge()</h3>...and Photoshop Save for Web vs. PNGOut optimization...I spent almost an hour working on a couple different problems I encountered caused partly by the fact that I was using a compressed/optimized PNG file, and partly by the fact that I was misreading the PHP.net documentation for two GD library image copy functions, <a href=https://php.net/manual/en/function.imagecopy.php>imagecopy()</a> and <a href=https://php.net/manual/en/function.imagecopymerge.php>imagecopymerge()</a>.First of all, instead of spending a ton of time struggling with weird file dimension issues, transparency issues, etc., and thinking your code is causing the problemâeven though it mayâalso try different image files or try exporting the image file you're manipulating/using a different way. In my case, the image I was using was run through PNGout to remove any extraneous data, but apparently too much data was removed for PHP's GD library to understand the file correctlyâin my case, the file's dimensions were distorted, the alpha transparency was not respected, and the image had lines of interpolation... all because I had tried to use an optimized PNG instead of the direct 'Save for Web...' image from Photoshop.With regard to GD image functions, imagecopy() allows you to put one image on top of another one, hopefully preserving alpha transparency, etc., while imagecopymerge() puts an image on top of the other without preserving alpha transparency, but while allowing you to set the opacity of the source image manually (from 0-100%). I was originally trying to get imagecopymerge() to put a circle 'play' button (iOS-style) on top of the video image, but I found that the function was putting a square frame with a grey background instead of the nice transparent area around the circle. Switching to imagecopy() seemed to preserve the 24-bit PNG alpha transparency better.<a href="https://bugs.php.net/bug.php?id=23815">This bug report on php.net</a> was especially enlightening when I was researching why imagecopymerge() wasn't working for me.<h3>Conclusion</h3>There are a few other moving parts to this equation, like retrieving the YouTube or Vimeo video frames, building the proper markup for different displays (on-site, email, mobile, etc.), etc., that I haven't gone into here, but I figured I'd share my experience creating a custom image effect here in case someone else wants to do something similar (like put watermarks on images for a photo site, or something like that).</section><div class=related-posts><h2 class=title>Further reading:</h2><ul class=list><li class=mb2><a href=/blog/2011/wysiwyg-force-linebreaks/>WYSIWYG Force Linebreaks - a Module for Input Format/WYSIWYG Zen</a></li><li class=mb2><a href=/blog/2012/filtersearch-multiple-fields/>Filter/Search on multiple fields with Views 3.x</a></li><li class=mb2><a href=/blog/2012/moving-comments-block-drupal-7/>Moving Comments into a Block - Drupal 7</a></li></ul></div><div class=post-tags><nav class="nav tags"><ul class=tags><li><a href=/tags/drupal/>drupal</a></li><li><a href=/tags/drupal-7/>drupal 7</a></li><li><a href=/tags/drupal-planet/>drupal planet</a></li><li><a href=/tags/filters/>filters</a></li><li><a href=/tags/gd/>gd</a></li><li><a href=/tags/image/>image</a></li><li><a href=/tags/image-effects/>image effects</a></li><li><a href=/tags/input-formats/>input formats</a></li><li><a href=/tags/php/>php</a></li><li><a href=/tags/video/>video</a></li></ul></nav></div></div></div><div class=comments><h2 class=title>Comments</h2><script>var remark_config={host:"https://comments.jeffgeerling.com",site_id:"jeffgeerling_com",theme:window.matchMedia&&window.matchMedia("(prefers-color-scheme:dark)").matches?"dark":"light",simple_view:!0,show_email_subscription:!1,show_rss_subscription:!1,no_footer:!0};window.matchMedia("(prefers-color-scheme:dark)").addEventListener("change",e=>{const t=e.matches?"dark":"light";window.REMARK42.changeTheme(t)})</script><script>!function(e,t){for(s=0;s<e.length;s++){var s,n=t.createElement("script"),o=".js",i=t.head||t.body;"noModule"in n?(n.type="module",o=".mjs"):n.async=!0,n.defer=!0,n.src=remark_config.host+"/web/"+e[s]+o,i.appendChild(n)}}(remark_config.components||["embed"],document)</script><div id=remark42></div></div></article></main><footer><div style=display:flex><a class=soc href=https://www.youtube.com/c/JeffGeerling rel=me title=YouTube><svg class="feather"><use href="/svg/feather-sprite.51cf5647cb1987f769b616558f2620fd9423d72058490231b391bf6aa3744b55.svg#youtube"/></svg></a><a class=border></a><a class=soc href=https://github.com/geerlingguy rel=me title=GitHub><svg class="feather"><use href="/svg/feather-sprite.51cf5647cb1987f769b616558f2620fd9423d72058490231b391bf6aa3744b55.svg#github"/></svg></a><a class=border></a><a class=soc href=/sponsor/ rel=me title=Sponsor><svg class="feather"><use href="/svg/feather-sprite.51cf5647cb1987f769b616558f2620fd9423d72058490231b391bf6aa3744b55.svg#dollar-sign"/></svg></a><a class=border></a><a class=soc href=https://twitter.com/geerlingguy/ rel=me title=Twitter><svg class="feather"><use href="/svg/feather-sprite.51cf5647cb1987f769b616558f2620fd9423d72058490231b391bf6aa3744b55.svg#twitter"/></svg></a><a class=border></a><a class=soc href=https://www.instagram.com/geerlingguy rel=me title=Instagram><svg class="feather"><use href="/svg/feather-sprite.51cf5647cb1987f769b616558f2620fd9423d72058490231b391bf6aa3744b55.svg#instagram"/></svg></a><a class=border></a></div><div class=footer-info>Â© 2026 Jeff Geerling | As an Amazon Associate I earn from qualifying purchases.</div></footer></div></body><script>(function(e,t,n,s,o,i){t[s]=t[s]||function(){(t[s].q=t[s].q||[]).push(arguments)},o=e.createElement("script"),i=e.getElementsByTagName("script")[0],o.async=1,o.src=n,o.id="fathom-script",i.parentNode.insertBefore(o,i)})(document,window,"//analytics.midwesternmac.com/tracker.js","fathom"),fathom("set","siteId","UROTN"),fathom("trackPageview")</script></html>

HHS Mandate - Why Birth Control? A First Timer's Guide to DrupalCon

Creating an Image Effect to put a play button on Video thumbnails

Menu