Round image on item-thumbnail

ionic-v1
1

Hi …
How to make img on the item-thumbnail become round like this…

image
Screenshots_2015-04-02-15-21-50.png1077×1305 443 KB

Already try this…

<ion-item class="item item-thumbnail-left" menu-close ui-sref="app.user.profile({objId: userId})" >  
              <img ng-src="../img/{{user.picProfile}}" style="border-radius:50%;">                
              <p><h2>{{user.firstName}} {{user.lastName}}</h2></p> 
</ion-item>

when the image resolution is 736x552 then the image become elipse and
when the image resolution is 479x637 then image become circle but image inside circle so weird.

and then i come with another solution using this

<ion-item class="item item-thumbnail-left" menu-close ui-sref="app.user.profile({objId: userId})" >  
          <img style="background-image:url('../img/{{user.picProfile}}'); border-radius:50%; background-position:center center; background-size:cover; width:100%; height:100%;">                
          <p><h2>{{user.firstName}} {{user.lastName}}</h2></p>
      </ion-item>

And the result was quite ok.Can i use this method ?? which one is better regarding to performance?? using img or background-image??

Thanks in advance.

2 Likes
2

Try applying the class item-avatar to the ion-item directive. That should make the image round.

image

3

Thanks @orthodoc for ur reply…
tested and it works…
but i want the image as big as the item-thumbnail…
can u do that ???

Thanks in advance.

4

You can do that with custom css. Hopefully you have enabled sass, If not do, ionic setup sass from the root folder.

Then add a custom class, say: item-profile

<ion-item class="item-profile">
  <div class="item-avatar">
    <img ng-src="{{userData.imgUrl}}">
  </div>
</ion-item>

Open up your ionic.app.scss file (located under the scss folder), and add the following scss:

.item-profile {
  height: 150px;
  .item-avatar > img:first-child {
    max-width: 100px;
    max-height: 100px:
  }
}

You will get something like the screenshot. You can play around with the item-profile height and the img max-height to get at what you feel is adequate.

image
large_profile.jpg720×1280 29.3 KB

However, I must remind you that the ionic guys have set the avatar image size at 40px for some good reason. And everything flows around these fixed settings. So unless and until really required don’t mess around too much with the default settings.

Good luck!

5

Great tips and thanks to @orthodoc.

But i still curios why if using item-thumbnail then the image become weird, press??
Fyi, i try using image size 736x552 or 479x637.
Is there a max size for image to scale natural for item-thumbnail ??
I want to use item-thumbnail for user to upload their profile picture and we don’t know exactly what size the image they upload.

Any tip from @orthodoc @mhartington to do that??

Thanks in advance.