Round image on bootstrap card

This public forum is for user-to-user discussions of PHPMaker. Note that this is not support forum.
Post Reply
christ2000
User
Posts: 519

Round image on bootstrap card

Post 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}}}&nbsp;{{{value contact_id}}}</p>            
		<p class="card-text"><h6>{{{value MainPhone}}}&nbsp;&nbsp;  {{{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


mobhar
User
Posts: 11660

Post 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.


arbei
User
Posts: 9284

Post by arbei »

You may use Bootstrap Borders -> Radius.


christ2000
User
Posts: 519

Post 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}}} ?


arbei
User
Posts: 9284

Post 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.


christ2000
User
Posts: 519

Post 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}}}&nbsp;{{{value contact_id}}}</p>            
		<p class="card-text"><h6>{{{value MainPhone}}}&nbsp;&nbsp;  {{{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


christ2000
User
Posts: 519

Post 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}}}&nbsp;{{{value contact_id}}}</p>            
		<p class="card-text"><h6>{{{value MainPhone}}}&nbsp;&nbsp;  {{{value _Email}}}</h6></p>
  </div>
	</div>

the problem i have now is get the value of the EmployeePicture to insert on the image url


arbei
User
Posts: 9284

Post by arbei »

  1. You may want to read CSS Descendant combinator.
  2. As said {{{value fieldname}}} is HTML (which should contain the <img> already), you cannot put it inside HTML attribute.
  3. CSS class name starts with "." in <style> tag and stylesheets.

christ2000
User
Posts: 519

Post 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}}}&nbsp;{{{value contact_id}}}</p>            
		<p class="card-text"><h6>{{{value MainPhone}}}&nbsp;&nbsp;  {{{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


arbei
User
Posts: 9284

Post by arbei »

christ2000 wrote:

<img class="img-circulo" src='{{url: {{{dbvalue EmployeePicture}}} }}'>

  1. 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.
  2. 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.

Post Reply