CMS Development

bshirshekar1
Membro

Need to make image round

resolver

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 Avaliação positiva
2 Solução aceitas
Chris-M
Solução
Top colaborador(a)

Need to make image round

resolver

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

Exibir solução no post original

Roworo
Solução
Participante

Need to make image round

resolver

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

Exibir solução no post original

0 Avaliação positiva
4 Respostas 4
TCrause
Membro

Need to make image round

resolver

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

0 Avaliação positiva
Roworo
Solução
Participante

Need to make image round

resolver

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

0 Avaliação positiva
bshirshekar1
Membro

Need to make image round

resolver

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 Avaliação positiva
Chris-M
Solução
Top colaborador(a)

Need to make image round

resolver

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