2

Users can insert images on my site...i want that all of them are displayed in a similar fashion. So i created a new style under Image Styles. However, how can i make sure that all images appear as circled. Even if a user inserts a square image, the final display should appear in a circle. I do not find any option to do so. Any help or advice.

Thanks

  • What method are users using to "insert" an image onto your site? – davidcl Mar 3 '13 at 16:32
  • i have create a field called for inserting them as images but i do have media module installed – why Mar 3 '13 at 23:52
5

To create the image style you want, you'll need to install the ImageCache Actions module to get the "Rounded Corners" effect. Note that when you install this module, you need to turn on several different modules in drupal (and I'm not sure which one provides "Rounded Corners"): image_styles_admin, imagecache_canvasactions, image_effects_text, imagecache_customactions, imagecache_coloractions, imagecache_autorotate, imagecache_actions.

Once you have the Rounded Corners effect, you should be able to create the behavior you are looking for. Here's an example:

Creating a rounded image style using imageCache actions

The only thing that you can't see on the screenshot is the "radius" setting for the rounded corners effect. To get a truly round image, it should be set to half of the height/width used in the scale & crop step. In the example, scale & crop is set to 100x100 and radius is set to 50. If you set scale & crop to 500x500, you'd set radius to 250.

Once you've got the image style you want, go to Administration > Structure > Content Types, and choose the content type that has the image field. Go to the "Manage Display" tab, and click on the settings icon for the image field. This will allow you to select the image style to be used for this image field.

You may need to do this for multiple display modes for your content type, for example "Default" and "Teaser."

  • i know that but how can i make them appear in circle, i.e, how to create a style for that – why Mar 4 '13 at 3:12
  • Okay, I thought from your original post that you had already created the image style. I've updated the answer-- to create that image style, use the ImageCache Actions module. – davidcl Mar 4 '13 at 4:48
  • hey...i tried creating a style but there is no option to create a circular image style..would really appreciate some help – why Mar 4 '13 at 5:02
  • More details added. If this doesn't solve the problem, maybe a description of where you're running into trouble would help. – davidcl Mar 4 '13 at 5:26
  • i have added that style...in the preview its showing a rounded image...however when i go to the node it still appears as a square... i have cleared all the cache but still no effect... – why Mar 4 '13 at 5:56
0

You can create png masks for your user pictures above them and clip visually actual user pictures. Masks should be in the color of background and added with css above the bare image tag in some of existing field wrappers.

But, there may be different sizes showing up in your site. So you need a mask and css style for every appearance. User should be forced to enter x=y image, or their images should be cropped or they would not fit circle.

It needs more investigation, planning and some precise design photoshop effort, but on the bright side you won't use any extra module.

From the other side, if you can spend some more computing power/installing few modules, proposed way to do it drupal way is more "secure".

  • 1
    Actually, if you are going to use CSS to do it, it's probably better to use border-radius: 50% instead of a PNG mask. Certainly less work! – davidcl Mar 4 '13 at 14:34

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.