- Subscribe to RSS Feed
- Mark Topic as New
- Mark Topic as Read
- Float this Topic for Current User
- Bookmark
- Subscribe
- Mute
- Printer Friendly Page
Need to make image round
SOLVEJun 11, 2020 3:44 PM
Can anyone tell me where I add the border-radius:50% to this code to make the images in this module round?
Solved! Go to Solution.
- Mark as New
- Bookmark
- Subscribe
- Mute
- Subscribe to RSS Feed
- Permalink
- Email to a Friend
- Report Inappropriate Content
Accepted Solutions
Jun 11, 2020 8:28 PM
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
- Mark as New
- Bookmark
- Subscribe
- Mute
- Subscribe to RSS Feed
- Permalink
- Email to a Friend
- Report Inappropriate Content
Jun 12, 2020 5:05 PM
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}}'
- Mark as New
- Bookmark
- Subscribe
- Mute
- Subscribe to RSS Feed
- Permalink
- Email to a Friend
- Report Inappropriate Content