Page 1 of 1
Round image on bootstrap card
Posted: Sat Jan 28, 2023 8:57 am
by christ2000
Hello, i need to show the profile image on my custom template as round image, i use this code on my css:
img {
width: 65%;
border-radius: 50%;
margin: 0 auto;
box-shadow: 0 0 10px rgba(0,0,0,.2);
}
and this on my custom template:
<div class="card-header border-0">
<h5 class="img-circle ew-user-image">{{{value EmployeePicture}}}</h5>
</div>
<div class="card-block px-2">
<h5 class="card-title">{{{value FullName}}} </h5><br>
<p class="card-text">{{{value Status}}} {{{value Credentials}}} {{{value contact_id}}}</p>
<p class="card-text"><h6>{{{value MainPhone}}} {{{value _Email}}}</h6></p>
</div>
</div>
the problem is using on this way this change all the images on my project and not just the image on the bootstrap card, someone know how fix this?
thanks
Re: Round image on boostrap card
Posted: Sat Jan 28, 2023 9:22 am
by mobhar
You may use your own css class for your custom image instead of img-circle, so that when you define your css code for that your own css class, then it will not affect the existing img-circle css code.
Re: Round image on bootstrap card
Posted: Sat Jan 28, 2023 9:53 am
by arbei
You may use Bootstrap Borders -> Radius.
Re: Round image on bootstrap card
Posted: Sat Jan 28, 2023 11:54 am
by christ2000
Thanks i will try both options, but it not clear if using for example
<h5 class="img-prof">{{{value EmployeePicture}}}</h5>
Will work or i cant use the {{{value EmployeePicture}}} ?
Re: Round image on bootstrap card
Posted: Sat Jan 28, 2023 12:02 pm
by arbei
The {{{value EmployeePicture}}} is HTML (may not just contain the <img> tag), you need to check the actual HTML output and write correct CSS selector (not just .img-prof) to target the <img> tag (e.g. .img-prof img). Also read viewtopic.php?t=53794.
Re: Round image on bootstrap card
Posted: Sun Jan 29, 2023 7:46 am
by christ2000
i change my code following your recommendation but dont work, my code look as:
<div class="card-header border-0">
<div class="image">
<img class="img-prof img" src="/images/empimg/emp8.jpg">
</div>
</div>
<div class="card-block px-2">
<h5 class="card-title">{{{value FullName}}} </h5><br>
<p class="card-text">{{{value Status}}} {{{value Credentials}}} {{{value contact_id}}}</p>
<p class="card-text"><h6>{{{value MainPhone}}} {{{value _Email}}}</h6></p>
</div>
</div>
and my css:
img-prof img{
width: 65%;
border-radius: 50%;
margin: 0 auto;
box-shadow: 0 0 10px rgba(0,0,0,.2);
}
Now, if i chance the class to: "img-circle ew-user-image" on my custom template, then it work but this class it is create by phpmaker, so i dont want to use this class
Re: Round image on bootstrap card
Posted: Sun Jan 29, 2023 8:17 am
by christ2000
now i change the name of the class to "img-circulo" and work, i dont know what is the difference, my code now look as:
<div class="card-header border-0">
<div class="image">
<img class="img-circulo" src="/images/empimg/{{{value EmployeePicture}}}">
</div>
</div>
<div class="card-block px-2">
<h5 class="card-title">{{{value FullName}}} </h5><br>
<p class="card-text">{{{value Status}}} {{{value Credentials}}} {{{value contact_id}}}</p>
<p class="card-text"><h6>{{{value MainPhone}}} {{{value _Email}}}</h6></p>
</div>
</div>
the problem i have now is get the value of the EmployeePicture to insert on the image url
Re: Round image on bootstrap card
Posted: Sun Jan 29, 2023 12:12 pm
by arbei
- You may want to read CSS Descendant combinator.
- As said
{{{value fieldname}}} is HTML (which should contain the <img> already), you cannot put it inside HTML attribute.
- CSS class name starts with "." in <style> tag and stylesheets.
Re: Round image on bootstrap card
Posted: Tue Jan 31, 2023 12:22 am
by christ2000
so far my css look as:
.img-circulo{
width: 65%;
border-radius: 50%;
margin: 0 auto;
box-shadow: 0 0 10px rgba(0,0,0,.2);
and my custom template:
<div class="card-header border-0">
<div class="img-circulo">
{{{EmployeePicture}}}
</div>
</div>
<div class="card-block px-2">
<h5 class="card-title">{{{value FullName}}} </h5><br>
<p class="card-text">{{{value Status}}} {{{value Credentials}}} {{{value contact_id}}}</p>
<p class="card-text"><h6>{{{value MainPhone}}} {{{value _Email}}}</h6></p>
</div>
</div>
i know as you mention i can't use {{{EmployeePicture}}} inside html tag, so how use then?
also try to use:
<img class="img-circulo" src='{{url: {{{dbvalue EmployeePicture}}} }}'>
but doesn't work
thanks
Re: Round image on bootstrap card
Posted: Tue Jan 31, 2023 11:01 am
by arbei
christ2000 wrote:
<img class="img-circulo" src='{{url: {{{dbvalue EmployeePicture}}} }}'>
- If the field value is just the image name, your "src" attribute is wrong. You may inspect HTML element in your browser to check the outputted HTML.
- If you use your own <img> tag, you don't need to write your own CSS class, just use the Bootstrap class ass mentioned above.