During update work of the site of our Drupal department (http://php.sfdev.com) we faced following task: to upload rectangular images but to show circle ones on the pages of our site.

In the case if we are going to display circle image form Image or Media field it is easy to set image style preset and use it in the field display. But Rotating banner (https://drupal.org/project/rotating_banner) does not allow to use image styles without hack module.

It is extremely worth practice to hack contributes module even in no feather development status :-)

But how can avoid to hack module and use image style to make image be circle?

By the way to do circle images with image style preset you can use ImageCache Action Module (https://drupal.org/project/imagecache_actions)

Ok, back to our task. We can try to use hook_preprocess_image(). In our theme template.php file we put following code:

<span style="color: #000000"><span style="color: #0000BB">&lt;?php<br></span><span style="color: #007700">function </span><span style="color: #0000BB">sfdev_preprocess_image</span><span style="color: #007700">(&amp;</span><span style="color: #0000BB">$vars</span><span style="color: #007700">) {<br>&nbsp; if(isset(</span><span style="color: #0000BB">$vars</span><span style="color: #007700">[</span><span style="color: #DD0000">'attributes'</span><span style="color: #007700">][</span><span style="color: #DD0000">'class'</span><span style="color: #007700">]) &amp;&amp; </span><span style="color: #0000BB">$vars</span><span style="color: #007700">[</span><span style="color: #DD0000">'attributes'</span><span style="color: #007700">][</span><span style="color: #DD0000">'class'</span><span style="color: #007700">] == </span><span style="color: #DD0000">'rb-background-image'</span><span style="color: #007700">) {<br>&nbsp;&nbsp;&nbsp; </span><span style="color: #0000BB">$url_splits </span><span style="color: #007700">= </span><span style="color: #0000BB">explode</span><span style="color: #007700">(</span><span style="color: #0000BB">variable_get</span><span style="color: #007700">(</span><span style="color: #DD0000">'file_public_path'</span><span style="color: #007700">, </span><span style="color: #0000BB">conf_path</span><span style="color: #007700">() . </span><span style="color: #DD0000">'/files/'</span><span style="color: #007700">), </span><span style="color: #0000BB">$vars</span><span style="color: #007700">[</span><span style="color: #DD0000">'path'</span><span style="color: #007700">]);<br>&nbsp;&nbsp;&nbsp; </span><span style="color: #0000BB">$vars</span><span style="color: #007700">[</span><span style="color: #DD0000">'path'</span><span style="color: #007700">] = </span><span style="color: #0000BB">image_style_url</span><span style="color: #007700">(</span><span style="color: #DD0000">'circle'</span><span style="color: #007700">, </span><span style="color: #0000BB">file_build_uri</span><span style="color: #007700">(</span><span style="color: #0000BB">$url_splits</span><span style="color: #007700">[</span><span style="color: #0000BB">1</span><span style="color: #007700">]));<br>&nbsp; }<br>}<br></span><span style="color: #0000BB">?&gt;</span></span>

Fortunately each rotating banner add 'rb-background-image' to each image. So we can separate this kind of images from the other ones:if(isset($vars['attributes']['class']) && $vars['attributes']['class'] == 'rb-background-image') {

Before implementing hook_preprocess_image we should create 'circle' image style to use it in this function.
To make Drupal create circle image we should just simply request it via image style URL:image_style_url('circle', file_build_uri($url_splits[1]));
So the main idea to put image style URL instead original one.

By the way, after some discussions we decide to create circle images manually, because in some cases they should not be circle :-)
And these cases are not predictable :-(

Blog tags:

• Planet Drupal
• FAQ