244: Gravatar
Other translations:
Other formats:
Las imágenes de avatar juegan cada vez un papel más importante en la web, sobre todo en las aplicaciones sociales. Si queremos añadir imágenes de avatar a una aplicación escrita por nosotros deberíamos considerar el uso de Gravatar, que proporciona una forma muy cómoda de hacerlo. Lo único que tenemos que gestionar es una dirección de correo para cada usuario, y no hace falta que nos preocupemos de la subida de archivos, el recorte de imágenes o que los usuarios suban imágenes inapropiadas, porque esto lo gestionará Gravatar. Tan sólo le tenemos que dar una dirección de correo y nos devolverá el avatar de dicho usuario.
En este episodio integraremos Gravatar con una aplicación Rails sencilla que tiene un modelo User. Ahora mismo dicho modelo dispone de tres instancias o usuarios (cada uno de ellos con una dirección de correo electrónico diferente) y la acción index muestra una columna avatar que aparece marcada como pendiente. Con Gravatar añadiremos una imagen de avatar para cada usuario.
Están disponibles varias extensiones que permiten añadir Gravatar a Rails pero es algo tan fácil de hacer que no vamos a usar ninguna de ellas. Empezaremos modificando el código de la vista que muestra la tabla anterior, que tiene el siguiente aspecto:
/app/views/users/index.html.erb
<% 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 %>
Cambiaremos el texto TODO de la primera celda de la table por una etiqueta image_tag. La URL de la imagen vendrá dada por un método de ayuda que escribiremos más adelante llamado avatar_url, y que recibe como argumento un usuario.
/app/views/users/index.html.erb
<% 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 %>
Escribamos a continuación el método avatar_url en la clase ApplicationHelper. Lo único complicado aquí es generar el identificador que Gravatar espera recibir de nosotros. Se trata de un hash MD5 en minúsculas generado a partir de la dirección de correo del usuario:
/app/helpers/application_helper.rb
module ApplicationHelper
def avatar_url(user)
gravatar_id = Digest::MD5::hexdigest(user.email).downcase
"http://gravatar.com/avatar/#{gravatar_id}.png"
end
end
Si ahora se recarga la página veremos las imágenes de avatar de las dos cuentas de usuarios que tienen asociada una imagen de Gravatar. Para el usuario que no lo tiene se muestra la imagen por defecto de Gravatar.
Personalización de las imágenes de Gravatar
Hay varios parámetros que podemos pasar en la solicitud de URL a Gravatar para modificar su comportamiento, y los detalles se pueden encontrar en la web de Gravatar. Por ejemplo si se añade el parámetro s se puede modificar el tamaño de la imagen de avatar:
http://gravatar.com/avatar/9a295994737a47683a4da4ed47aef7dd.png?s=200
La opción d se puede utilizar para pasar una imagen por defecto alternativa si no se encuentra un avatar para el usuario:
http://gravatar.com/avatar/84ce1adb94b67014236a909fa4c1269d.png?d=http%3A%2F%2Fasciicasts.com%2Fimages%2Frails.png
También se puede pasar la opción r para modificar la clasificación de la imagen o, si nuestro sitio utiliza HTTPS, podemos recuperar las imágenes de forma segura utilizando https://segure.gravatar.com como dominio de la URL. Vamos a usar un par de estas opciones para modificar el tamaño de las imágenes de avatar a 48 píxeles, que es el mismo tamaño que utiliza Twitter, y para pasar una imagen por defecto distinta:
/application/helpers/application_helper.rb
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
Si se recarga la página las imágenes aparecerán más pequeñas y ahora se mostrará nuestra imagen por defecto para la cuenta que no tiene imagen de Gravatar.
Uso de imágenes de otros sitios con OmniAuth
Esta solución de imágenes de avatar funciona especialmente bien con OmniAuth. Los que no estén familiarizados con OmniAuth encontrán información en el episodio 241 [verlo, leerlo] donde se explicaba como empezar a usarlo con una aplicación Rails. El motivo por el que OmniAuth funciona muy bien con Gravatar es que si un usuario inicia la sesión en nuestro sitio utilizando Facebook o Twitter ya tendrá una imagen de avatar de estos servicios, imagen que se puede recuperar utilizando la propiedad image del hash user_info devuelto por OmniAuth. Si el usuario no ha iniciado sesión por uno de estos servicios se puede utilizar Gravatar como último recurso de forma que todos los usuarios tengan algún avatar.
No añadiremos OmniAuth a esta aplicación pero como apaño hemos añadido un campo avatar_url al modelo User para simular este dato de OmniAuth. Primero modificaremos uno de los usuarios para ponerle una imagen de avatar de Twitter.
A continuación tenemos que cambiar el método avatar_url de ApplicationHelper para que utilice el avatar almacenado de un usuario si está presente.
/app/helpers/application_helper.rb
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
Al cargar la página veremos que ahora la cuenta que tiene su propio avatar en Twitter mostrará esta imagen mientras que las otras se obtendrán de Gravatar.
Y con esto concluye este episodio, breve pero esperamos que haya servido para que empecemos a usar avatares en nuestras aplicaciones Rails.