Skip directly to content

Php

Is there any way to display a round image in Drupal?

on Monday, 6th June 2011 - 22:54

What I would like to do is the following. However, its proving to be incredibly tricky in Drupal.

 

<div class="round-image" 
style="
width:200px;
height:200px;
border:1px solid #fff;
-moz-border-radius:200px;
-webkit-border-radius:100px;
background:url(http://d6.ahasaetharu.net/sites/default/files/images/grass.thumbnail.jpg)">
</div>

So in the end, we found how the image is called in Drupal 7 - in this case 'field-blog-image'. Created a file called field--field-blog-image.tpl.php in the theme directory.

<?php?>
<div class="<?php print $classes; ?> clearfix"<?php print $attributes; ?>>
  <?php if (!$label_hidden) : ?>
    <div class="field-label"<?php print $title_attributes; ?>><?php print $label ?>:&nbsp;</div>
  <?php endif; ?>
  <div class="field-items"<?php print $content_attributes; ?>>
    <?php foreach ($items as $delta => $item) : ?>
      <div class="field-item <?php print $delta % 2 ? 'odd' : 'even'; ?>"
<?php print $item_attributes[$delta]; ?>><?php

      $image_url = image_style_url("thumbnail", $item['#item']['uri']);?>
      <div class="round-image" style="width:200px; float: right; height:200px;
border:0px solid #333333; -moz-border-radius:200px; -webkit-border-radius:200px;
background:url(<?php print $image_url;?>); background-repeat:no-repeat; 
background-position:center; background-size:200px;"></div>
      
      </div>
    <?php endforeach; ?>
  </div>
</div>

Reference: http://api.drupal.org/api/drupal/modules--image--image.module/function/image_style_url/7