Can anyone tell me where I add the border-radius:50% to this code to make the images in this module round?
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
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}}’
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!
Hello - I dont understand where to add this code? Can you please advise?