Resize an avatar and have it top of an image

DeeM52 · July 6, 2016, 10:07pm

Hey guys!

My first post here

I am trying to create the following view in my app (sketch on the right).

I would like the avatar to be a little bigger and overlap on the right with the picture.
Have a heart icon on top right of the image
Have good overall spacing between the avatar, title and bottom icons

I have the following code at the moment.

<ion-item>

    <img src="image.url"/>

    <ion-item-content>
        <h2 class="card-title">
            Nine Inch Nails Live
        </h2>
        <ion-avatar class="profilepic" item-right>
            <img src="image.url"/>
        </ion-avatar>
    </ion-item-content>

    <ion-row no-padding>
        <ion-col>
            <button clear small danger>
                <ion-icon name='star'></ion-icon>
                <label text-capitalize>Favorite</label>
            </button>
        </ion-col>
        <ion-col text-center>
            <button clear small danger>
                <ion-icon name='musical-notes'></ion-icon>
                <label text-capitalize>Listen</label>
            </button>
        </ion-col>
        <ion-col text-right>
            <button clear small danger>
                <ion-icon name='share-alt'></ion-icon>
                <label text-capitalize>Share</label>
            </button>
        </ion-col>
    </ion-row>

</ion-item>

Can someone help me with this?

Thanks ^^

DeeM52 · July 7, 2016, 5:52pm

Ok guys. This is the progress I have made so far.

Avatar is resized with css but it’s no longer a circle. Is it possible to have a circle?
Avatar is on the left side but image goes on top of it. z-index doesn’t seem to work on this.

Is there a better way to implement this? Thanks.

Here’s the html code

<ion-item>
    <div class="fav-icon1">
        <img src="image_url"/>
        <button clear danger large class="fav-icon2">
                <ion-icon ios="ios-heart-outline" md="md-heart-outline"></ion-icon>
        </button>
    </div>
    <ion-item>
        <h2>
            Nine Inch Nails Live
        </h2>
        <ion-avatar item-right class="profilepicposition">
            
                <img class="profilepicsize" src="image_url"/>
            
        </ion-avatar>
    </ion-item>

    <ion-row no-padding>
        <ion-col>
            <button clear small danger>
                <ion-icon name='star'></ion-icon>
                <label text-capitalize>Favorite</label>
            </button>
        </ion-col>
        <ion-col text-center>
            <button clear small danger>
                <ion-icon name='musical-notes'></ion-icon>
                <label text-capitalize>Listen</label>
            </button>
        </ion-col>
        <ion-col text-right>
            <button clear small danger>
                <ion-icon name='share-alt'></ion-icon>
                <label text-capitalize>Share</label>
            </button>
        </ion-col>
    </ion-row>
</ion-item>

And the css code

.profilepicposition  {
    position: absolute;
    top: -80%;
    right: 0%;
    z-index: 89;
}


.profilepicsize  {
    width: 100% !important;  
    height : 100% !important;  
    max-width: 50px !important;  //any size
    max-height: 50px !important; //any size 
}

.fav-icon1 {
    position: relative;
}

.fav-icon2 {
    position: absolute;
    top: 6%;
    right: 4%;
}

skoff · July 7, 2016, 7:45pm

did you try to put a z-index to both item not only one. And there’s no need to put 89 as a value. 0 and 1 should do the job. Unless there’s something specific for ion element I’m not aware of.

DeeM52 · July 7, 2016, 8:41pm

Just tried. I’ve put a z-index value on the image and on the image’s div but no result. It stays the same. Image is overlapping the avatar.

For z-index value, I’ve put a high value just to try it out.

piyukore · July 8, 2016, 1:41pm

z-index should work , just check in the debug tools what classes have what values of z-index.

and I would recommend using fixed sizes for .profilepicsize class rather than % values and use border-radius as half the value of height and width.

This should work

DeeM52 · July 8, 2016, 2:01pm

Thank you very much!! This has solved the shape problem and I’ve got a circle now

.profilepicposition has position:absolute value and by adding position:static to the ‘ion-item’ containing the avatar, it solved the problem. Avatar is on top of the image ^^

Bonus question: Is it possible to have a small white border on the avatar?

piyukore · July 8, 2016, 2:04pm

sure … use normal border style like
border: 3.5px solid #fff;
and it should work

DeeM52 · July 8, 2016, 2:07pm

@piyukore problem solved

I’m new to Ionic and programming in general. Thank you for your help.

piyukore · July 8, 2016, 2:23pm

keep coding and it will be easy with time

Andrea-W · August 10, 2016, 1:26pm

Simil problem, but can’t solve.

The icon is half visible. How to fix?
(It’s a list of card, and user can reorder it)

.html

<ion-content class="cards-bg">
    <ion-list no-lines reorder="true" (ionItemReorder)="reorderItems($event)">
        <ion-item *ngFor="let lista of elencoListe">
            <ion-card>
                <div class="item">
                    <ion-card-title>
                        {{lista.titolo}}
                    </ion-card-title>
                    <ion-avatar item-right class="imgListaPosition">
                        <img src="{{lista.userImg}}" class="imgListaSize" />
                    </ion-avatar>
                </div> 
                <ion-card-content>
                    Frequenza: {{lista.frequenza}}
                    <p>
                    Descrizione: {{lista.descrizione}}
                    </p>
                </ion-card-content>                               
            </ion-card>
        </ion-item>
    </ion-list>
</ion-content>

.scss

.cards-bg {
    background-color: #f4f4f7;
    ion-item {
        background-color: #f4f4f7;
    }
}

.imgListaPosition {
    position: absolute;
    z-index: 5;
    top: 20%;
    left: 80%;
}

.imgListaSize {
    width: 100px;  
    height : 100px;  
    max-width: 100px;
    max-height: 100px;
    border-radius: 50px;
}

DeeM52 · August 11, 2016, 10:55am

Can you put your .ts file code?

Andrea-W · August 11, 2016, 11:07am

Solved btw
And the rounded icon can also be non-square image:

.scss

ion-card img {
    margin: auto;
    width: 15vw;
    height: 15vw;
    border-radius: 50%; // half for rounding */
    object-fit: cover; /* Scale the image - Center and crop image*/
    object-position: center; /* Center the image within the element - Center and crop image*/
}

.ts

<ion-item no-lines>
    <ion-card>
        <ion-card-content (click)="takePhoto()">
            <img class="imgModal" [src]="givenImg" *ngIf="givenImg" />
        </ion-card-content>
    </ion-card>
</ion-item>

credit: http://jonathannicol.com/blog/2014/06/16/centre-crop-thumbnails-with-css/

DeeM52 · August 11, 2016, 11:33am

Thanks for the link. Really interesting

I tried your previous code, it worked by taking out the slash at the end of the image tag

<img src=“{{lista.userImg}}” class=“imgListaSize”>

Andrea-W · August 11, 2016, 1:30pm

Yeah, I don’t know whether to use it or not.

DeeM52 · August 11, 2016, 1:44pm

On stackoverflow, people had recommended to use pixel instead of vw.

I am not sure of the advantages and the reason behind this.

As long as it works, you can keep on building. ^^

Andrea-W · August 11, 2016, 1:46pm

Well, pixel would be a problem if i run my app on tablet (maybe 2000x1500) or on an old phone (640x480).
I’m wrong?

DeeM52 · August 11, 2016, 2:01pm

There is a problem in rendering vw in iOS. I don’t know how this translates with ionic.

Best would be to try and test it on device or emulators and see what happens.

rroque6428 · February 2, 2017, 12:32pm

Hi guys,

Many thanks for the discussion! I solved also my problem using different answers from here. Here’s my approach. Just in case someone also needs. Regards.

.html

  <ion-card>
    <div>
      <img src="assets/images/landscape.jpg" (tap)="openGallery()">
      <ion-item class="foo01">
        <ion-avatar item-right>
          <img class="foo02" src="assets/images/landscape.jpg">
        </ion-avatar>
      </ion-item>
    </div>  
    <ion-card-content>      
      <ion-card-title>you</ion-card-title>
    </ion-card-content>
  </ion-card>

.scss

   .cards-bg {
        background-color: #f4f4f7;
    }

    .foo01 {
        margin-top: -15%;
        margin-bottom: -2em;
        background: transparent !important;
    }

    .foo02 {
        margin: auto;
        width: 20vw !important;
        height: 20vw !important;
        border: 1vw solid #fff;
    }

Topic		Replies	Views
How to make an avatar bigger? ionic-v3	2	1379	July 11, 2017
Show image and allow resize ionic-v1	1	2238	July 31, 2014
How to have a big <ion-avatar>? ionic-v3	0	769	December 23, 2016
Static image location on all devices ionic-v3	5	6150	March 10, 2017
Ion-thumbnail adjust size ionic-v3	4	22296	April 24, 2024

Resize an avatar and have it top of an image

Related topics