Need to make image round

[bshirshekar1]

Can anyone tell me where I add the border-radius:50% to this code to make the images in this module round?

[Chris-M · Accepted solution]

Hi @bshirshekar1,

you have to add it to the:

<img src="{{ item.image_field.src }}  alt="{{ item.image_field.alt }}" {{ sizeAttrs }}>

you could do something like this

<img src="{{ item.image_field.src }}  alt="{{ item.image_field.alt }}" {{ sizeAttrs }} style="border-radius:50%;">

but...

with the {{ sizeAttrs }}, you will get a style command for height and width (style="height:xx; width:xx)" which will get overwritten by the style="border-radius: 50%"; since both are full style=xx commands and this comes last.

Better way is to take the css class "customer-team-inner-item" and give the img the border radius:

.customer-team-inner-item .image img {
  border-radius: 50%;
}

with this you can still keep the size attribute of the image {{ sizeAttrs }};

- Chris

[TCrause]

Hello - I dont understand where to add this code? Can you please advise?

[Roworo · Accepted solution]

On the line #18, it should be like:

<img  src='{{ item.image_field.src}}' alt=' {{i tem.image_field.src}}' {{sizeAttrs}}  style='border-radius: 50%'>

But if you want to make it more dynamic you could use the number_field:

<img src='{{ module.image_field.src }}' class='myImage'>

{% set border =  module.number_field|string ~'%' %}

<style>
.myImage{
  border-radius: {{border}};
}
</style>

 With this you can set the radius dynamically, you have to put the 'style' tag on the HTML+HUBL section, because the .css section won't recognize the '{{border}}'

[bshirshekar1]

Thank you - I updated line #18 to <img  src='{{ item.image_field.src}}' alt=' {{i tem.image_field.src}}' {{sizeAttrs}}  style='border-radius: 50%'> and it worked perfectly!

[Chris-M · Accepted solution]

Hi @bshirshekar1,

you have to add it to the:

<img src="{{ item.image_field.src }}  alt="{{ item.image_field.alt }}" {{ sizeAttrs }}>

you could do something like this

<img src="{{ item.image_field.src }}  alt="{{ item.image_field.alt }}" {{ sizeAttrs }} style="border-radius:50%;">

but...

with the {{ sizeAttrs }}, you will get a style command for height and width (style="height:xx; width:xx)" which will get overwritten by the style="border-radius: 50%"; since both are full style=xx commands and this comes last.

Better way is to take the css class "customer-team-inner-item" and give the img the border radius:

.customer-team-inner-item .image img {
  border-radius: 50%;
}

with this you can still keep the size attribute of the image {{ sizeAttrs }};

- Chris