#35: Gravatar with Phoenix

View source

Gravatar

---

Here we have a profile page that has a bit of info about a user like their name and their email. It would be nice if we could include an avatar for their profile picture here as well.

In this episode we’ll be using Gravatar - A Globally Recognized Avatar - to display avatars. Gravatar is a great option because it let’s you easily include avatars on your site in hardly any time.

There’s even a great package exgravatar that makes using Gravatar in your application dead simple.

For this episode let’s have some fun and implement a simple function to display a user’s gravatar. Let’s start by checking out Gravatar’s documentation

There are 3 steps we need to take.

1) Make sure any leading or trailing whitespace is removed.

2) Force the email string to lowercase.

3) md5 encode it.

Let’s create a function to handle this in our user_view.ex module.

And we’ll define a new function called gravatar and it will take our email.

Since we’ll be doing a series of transformations, this is a perfect case to build up a small pipeline with the pipe operator.

Let’s start with our email.

Then let’s make sure the leading and trailing whitespace is removed. We can do that with String.trim

Then let’s make sure our email is lowercase with String.downcase

Now we need to md5 hash our email.

One way we could do this is with the :crypto.hash(:md5, email) however, this wouldn’t work with our existing pipeline. So let’s use another fucntion - erlang:md5

In fact, let’s open IEx and see how it works.

$ iex
> email = "hello@elixircasts.io"
"hello@elixircasts.io"
> :erlang.md5(email)
<<69, 30, 81, 128, 223, 229, 30, 58, 23, 136, 194, 25, 163, 251, 9, 154>>

A binary is returned.

Let’s base 16 encode it with the Base.encode16 function.

> :erlang.md5() |> Base.encode16()
"451E5180DFE51E3A1788C219A3FB099A"

Great, our it returns our string, however it’s all upper case. We can pass in the case: :lower option to tell it to return a lowercase sting.

> :erlang.md5() |> Base.encode16(case: :lower)
"451e5180dfe51e3a1788c219a3fb099a"

Perfect. Now let’s go back to our user_view.ex module.

And we’ll add our new function to our pipeline.

Now that we have our hash, we need to finish our image url.

Let’s paste in the URL for our Gravatar and then interpolate the hash.

We can also specify the size of the image we want. Let’s add a query string of s and then the dimension in pixels. And let’s go ahead and build the image tag here with img_tag.

Alright now we can go to our user show template. And we’ll include our gravatar function, passing in the user’s email.

Template path: lib/teacher_web/templates/user/show.html.eex

<h2><%= @user.full_name %>'s profile</h2>
<%= gravatar(@user.email) %>
<p>Email: <%= @user.email %></p>

Then if we go back to our browser - our Gravatar is displaying perfectly.

Now let’s go to to a user that doesn’t have a Gravatar setup - and we see the default Gravatar.

There are a few ways we can make this a look a little more interesting.

There are a few different options we can use for defaults avatars. Let’s use the identicon option.

Back in our user_view.ex module, we’ll append d=identicon to our URL.

lib/teacher_web/views/user_view.ex

defmodule TeacherWeb.UserView do
  use TeacherWeb, :view

  def gravatar(email) do
    hash = email
      |> String.trim()
      |> String.downcase()
      |> :erlang.md5()
      |> Base.encode16(case: :lower)

    img = "https://www.gravatar.com/avatar/#{hash}?s=150&d=identicon"
    img_tag(img)
  end
end

And if we refresh our page, we see the default Gravatar being displayed.