#244 Gravatar

Les avatars ont un rôle important dans le web d'aujourd'hui, en particulier dans les applications web “sociales”. Si vous voulez ajouter l'affichage d'avatars à l'une des vôtres, vous pourriez jeter un œil à Gravatar qui fournit un moyen pratique de le faire. Tout ce dont vous avez besoin, c'est d'une adresse e-mail pour chaque utilisateur. Nul besoin, donc, de devoir gérer l'envoi de fichiers, le cropping ou encore le caractère des images fournies par l'utilisateur, Gravatar se charge de tout. Donnez lui simplement une adresse e-mail et l'avatar correspondant vous est retourné.

Dans cet épisode, nous allons ajouter Gravatar à une application Rails simple qui contient un modèle User. Trois utilisateurs sont enregistrés, chacun avec une adresse e-mail différente et la page index liste une colonne avatar contenant “TODO”. Nous allons utiliser Gravatar pour ajouter un avatar à chaque utilisateur.

Un certain nombre de plugins permettant l'ajout de Gravatar à Rails existent. Il est cependant tellement facile de le faire à la main que nous n'en utiliserons pas. Commençons par modifier le code de la vue chargé de créer le tableau vu ci-dessus, ce qui ressemble à ceci :

<% for user in @users %>
  <tr>
    <td>TODO</td>
    <td><%= user.email %></td>
    <td><%= link_to "Show", user %></td>
    <td><%= link_to "Edit", edit_user_path(user) %></td>
    <td><%= link_to "Destroy", user, :confirm => 'Are you sure?', :method => :delete %></td>
  </tr>
<% end %>

Nous allons remplacer la première cellule du tableau, contenant TODO, par un appel à image_tag. L'URL de l'image sera fournie par un helper appelé avatar_url, que nous allons écrire. Ce helper prendra en paramètre un utilisateur.

<% for user in @users %>
  <tr>
    <td><%= image_tag avatar_url(user) %></td>
    <td><%= user.email %></td>
    <td><%= link_to "Show", user %></td>
    <td><%= link_to "Edit", edit_user_path(user) %></td>
    <td><%= link_to "Destroy", user, :confirm => 'Are you sure?', :method => :delete %></td>
  </tr>
<% end %>

Nous allons ensuite écrire la méthode avatar_url dans la classe ApplicationHelper. Le seul point délicat est la génération de l'id que gravatar attend. C'est un hash MD5, en minuscules, de l'adresse e-mail de l'utilisateur, ce qui est donc relativement facile.

module ApplicationHelper
  def avatar_url(user)
    gravatar_id = Digest::MD5::hexdigest(user.email).downcase
    "http://gravatar.com/avatar/#{gravatar_id}.png"
  end
end

Lorsque l'on recharge la page, nous allons maintenant voir un avatar pour les deux comptes qui ont un Gravatar associé. Pour celui qui n'en a pas, nous obtenons l'image par défaut de Gravatar.

Personnaliser les images de Gravatar

Un certain nombre de paramètres peuvent être passés en querystring dans l'URL Gravatar pour personnaliser son comportement et nous pouvons les trouver, en détail, sur le site de Gravatar. Par exemple, passer le paramètre s permet de changer la taille de l'avatar, comme ceci :

http://gravatar.com/avatar/9a295994737a47683a4da4ed47aef7dd.png?s=200

L'option d peut être utilisée pour fournir une image par défaut alternative dans le cas où aucun avatar n'est trouvé pour l'utilisateur, comme ceci :

http://gravatar.com/avatar/84ce1adb94b67014236a909fa4c1269d.png?d=http%3A%2F%2Fasciicasts.com%2Fimages%2Frails.png

Nous pouvons également passer l'option r pour changer le caractère de l'image et, si notre site utilise HTTPS, nous pouvons obtenir les images de manière sécurisées en passant par https://secure.gravatar.com/ en début d'URL. Nous allons utiliser quelques unes de ces options pour dimensionner les avatars de notre application à 48 pixels, la même taille que twitter utilise, ainsi que pour fournir une image par défaut différente.

module ApplicationHelper
  def avatar_url(user)
    default_url = "#{root_url}images/guest.png"
    gravatar_id = Digest::MD5::hexdigest(user.email).downcase
    "http://gravatar.com/avatar/#{gravatar_id}.png?s=48&d=#{CGI.escape(default_url)}"
  end
end

Lorsque nous rechargeons la page, nous pouvons constater que les images sont plus petites et que notre image par défaut est utilisé pour le compte qui n'a pas de Gravatar.

Utiliser les images d'autres sites avec OmniAuth

Cette solution pour les avatars fonctionne particulièrement bien lorsqu'elle est utilisée de pair avec OmniAuth. Si vous n'êtes pas familiarisé avec OmniAuth, l'épisode 241 [regarder, lire] donne une première approche de son utilisation au sein d'une application Rails. La raison pour laquelle OmniAuth fonctionne bien dans cette situation est que, si l'utilisateur de connecte via Facebook ou Twitter, il a déjà un avatar sur ce service et cette image peut être récupérée dans la propriété image du hash user_info que retourne OmniAuth. Si l'utilisateur ne s'est pas connecté via l'un de ces services, nous pouvons nous rabattre sur Gravatar de manière à ce que chaque utilisateur ait un avatar.

Nous n'allons pas ajouter OmniAuth à cette application. Nous avons par contre ajouté un champ avatar_url à notre modèle User pour simuler cette partie des données d'OmniAuth. Nous allons commencer par modifier un des utilisateurs pour lui ajouter un avatar provenant de Twitter.

Nous devons modifier notre méthode avatar_url dans ApplicationHelper de manière à utiliser l'avatar stocké de l'utilisateur si celui-ci en a un.

module ApplicationHelper
  def avatar_url(user)
    if user.avatar_url.present?
      user.avatar_url
    else
      default_url = "#{root_url}images/guest.png"
      gravatar_id = Digest::MD5::hexdigest(user.email).downcase
      "http://gravatar.com/avatar/#{gravatar_id}.png?s=48&d=#{CGI.escape(default_url)}"
    end
  end
end

Lorsque l'on recharge la page, on constate que le compte disposant de son propre avatar affiche bien ce dernier tandis que les autres utilisent toujours Gravatar.

C'est tout pour cet épisode. Il est court mais il couvre assez pour que vous puissiez commencer à utiliser Gravatar dans vos applications Rails.