Need to make image round

SOLVE
Highlighted
New Contributor

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

 

Screenshot 2020-06-11 15.43.53.png

 

0 Upvotes
2 Accepted solutions

Accepted Solutions
Highlighted
Solution
Top Contributor

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

View solution in original post

Highlighted
Solution
Occasional Contributor

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}}'

View solution in original post

0 Upvotes
3 Replies 3
Highlighted
Solution
Top Contributor

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

View solution in original post

Highlighted
Solution
Occasional Contributor

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}}'

View solution in original post

0 Upvotes
Highlighted
New Contributor

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!

0 Upvotes