Automatic Profile Pictures with Gravatar in Ionic 2

Unless you’re completely new to the Internet, chances are that you either know what a Gravatar is or you have one but just don’t know it. It stands for Globally Recognised Avatar, and the Gravatar website allows third parties to grab an avatar that is associated with your email address.

Some websites (like WordPress) use Gravatar to handle users avatars, so if you’ve ever used a website that integrates with this service then you have probably set up your own Gravatar. Once you have set it once, other websites will be able to use it as well. You can click here to see my Gravatar.

The great thing about using Gravatar is that you don’t need to worry about handling profile pictures yourself, which can be quite a task, and it can also be easier for the user to not have to worry about uploading a profile picture. All you need to do to use a Gravtar is use the following for the src of an image:

https://www.gravatar.com/avatar/ + (MD5 hash of email address)

So, we create an MD5 hash of the email address we want to grab the Gravatar for, and add it to the end of the URL. This is what mine looks like:

https://www.gravatar.com/avatar/44830cc792898eca36922a70d98bf6ea

In this tutorial, I am going to show how you can integrate Gravatar into the signup process in an Ionic 2 application. This will also involve integrating a JavaScript library that will allow us to create an MD5 hash, and listening for user input so that we can change the displayed profile picture instantly.

When we are finished, the application should look something like this:

NOTE: Although we are not dealing with passwords in this tutorial, I feel it is important to mention that you should not use the MD5 hashing algorithm for hashing passwords.

Before we Get Started

Before you go through this tutorial, you should have at least a basic understanding of Ionic 2 concepts. You must also already have Ionic 2 set up on your machine.

If you’re not familiar with Ionic 2 already, I’d recommend reading my Ionic 2 Beginners Guide first to get up and running and understand the basic concepts. If you want a much more detailed guide for learning Ionic 2, then take a look at Building Mobile Apps with Ionic 2.

1. Generate a New Ionic 2 Application

We are going to start off by generating a new Ionic 2 application with the following command:

ionic start ionic2-profile-picture blank --v2

Once that has finished generating, you should make it your working directory by running the following command:

cd ionic2-profile-picture

We are just going to be using the default home page that is generated for this tutorial, so we don’t need to create any other pages.

2. Integrate the crypto-md5 Package

We will be using the crypto-md5 npm package which will allow us to use the MD5 hashing algorithm.

Run the following command to install crypto-md5:

npm install crypto-md5 --save

In order to use that throughout the application, all we will need to do is add the following import into any file we want to use it in:

import md5 from 'crypto-md5';

Then we can create a hash by running:

md5('thing to hash', 'hex');

3. Create the Template

We are going to set up a nice looking sign in or sign up page to host this functionality. We are going to have an email field that, when changed, will send the value to a function that will automatically update the Gravatar to match the email address that was entered.

Modify src/pages/home/home.html to reflect the following:

<ion-content padding>
  <ion-card>
    <ion-item>
      <ion-avatar>
        <img [src]="profilePicture" />
      </ion-avatar>
    </ion-item>

    <ion-card-content>
      <ion-list no-lines>
        <ion-item>
          <ion-label floating>email</ion-label>
          <ion-input
            [(ngModel)]="email"
            (change)="emailChanged()"
            type="email"
          ></ion-input>
        </ion-item>

        <ion-item>
          <ion-label floating>password</ion-label>
          <ion-input [(ngModel)]="password" type="password"></ion-input>
        </ion-item>
      </ion-list>
    </ion-card-content>
  </ion-card>

  <button ion-button icon-right outline color="light">
    Next <ion-icon name="arrow-forward"></ion-icon>
  </button>
</ion-content>

We’ve set the [src] of the avatar at the top of this page to profilePicture, which we will define in the TypeScript file for this page shortly. We’ve also set up two-way data binding with [(ngModel)] on the email and password fields. We don’t actually need the value for the password field in this tutorial, but setting up two-way data binding for the email will allow us to access the current value of the field in the TypeScript file.

Most importantly, we’ve added a (change) listener to the email field so that the emailChanged() function we will define shortly is triggered every time the email field changes.

4. Generate the Gravatar URL

We’re going to set up the TypeScript file now which will allow us to calculate the Gravatar URL based on the email address the user enters, and set it as the avatar in the template by updating the profilePicture variable.

Modify src/pages/home/home.ts to reflect the following:

import { Component } from '@angular/core';
import { NavController } from 'ionic-angular';
import md5 from 'crypto-md5';

@Component({
  selector: 'page-home',
  templateUrl: 'home.html'
})
export class HomePage {

    email: any;
    password: any;
    profilePicture: any = "https://www.gravatar.com/avatar/"

    constructor(public navCtrl: NavController) {

    }

    emailChanged(){
        this.profilePicture = "https://www.gravatar.com/avatar/" + md5(this.email.toLowerCase(), 'hex');
    }

}

We’re importing crpyto-md5 at the top here so that we can use it inside of the emailChanged() function. All this function does is append the MD5 hash of the entered email address to the gravatar URL, and then sets it as the profilePicture. Since the avatar src in the template is bound to this variable, the image will update to the gravatar for that email address instantly (as long as one exists).

5. Add Styling

Finally, we are just going to add a few styles to the page to make it look a little nicer. We are going to use a flex layout to center the card and button in the middle of the screen.

Modify src/pages/home/home.scss to reflect the following:

.ios,
.md {
  page-home {
    .scroll-content {
      background-color: #737486;
      align-items: center;
      display: flex;
      flex-direction: column;
      justify-content: center;
    }

    ion-avatar > img {
      margin: auto;
      width: 80px;
      height: auto;
    }

    ion-input {
      background-color: map-get($colors, light);
      padding-left: 10px;
      color: #6c6c6c;
    }

    ion-label {
      color: #6c6c6c;
    }

    [floating] {
      margin-left: 10px;
    }

    button {
      width: 90%;
    }
  }
}

In the code above, we are using map-get to retrieve the light value that is stored in theme/variables.scss, and we also use the [floating] selector, which allows us to target elements with the floating attribute.

If you serve the application now, it should look something like this:

Summary

Using Gravatar to handle profile pictures greatly simplifies a complex task, and adds a level of personalisation to the application without requiring any additional effort from the user.