How to Add Circle Image Style into Rotating Banner SlideShow

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:

<?php
function sfdev_preprocess_image(&$vars) {
  if(isset(
$vars['attributes']['class']) && $vars['attributes']['class'] == 'rb-background-image') {
   
$url_splits = explode(variable_get('file_public_path', conf_path() . '/files/'), $vars['path']);
   
$vars['path'] = image_style_url('circle', file_build_uri($url_splits[1]));
  }
}
?>

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:

Comments

What about using CSS? If you have square images it is easy:
border-radius: 50%;
-webkit-border-radius: 50%;
-moz-border-radius: 50%;

but It works in CSS3 only, my solution is more compatible

Add new comment

Plain text

  • No HTML tags allowed.
  • Web page addresses and e-mail addresses turn into links automatically.
  • Lines and paragraphs break automatically.
By submitting this form, you accept the Mollom privacy policy.
Image CAPTCHA
Enter the characters shown in the image.