#244 Gravatar
- Download:
- source codeProject Files in Zip (93.9 KB)
- mp4Full Size H.264 Video (14.2 MB)
- m4vSmaller H.264 Video (7.48 MB)
- webmFull Size VP8 Video (14.9 MB)
- ogvFull Size Theora Video (17.7 MB)
Atualmente avatars são muito importantes, especialmente em aplicações sociais. Se você quer adicionar imagens de avatar para alguma aplicação, você deve dar uma olhada no Gravatar, que fornece uma maneira interessante de fazer isso. Tudo que você precisa é de um endereço de email para cada usuário, e assim não há necessidade da sua aplicação tratar arquivos anexos, crop de imagens, ou se preocupar se os usuários estão fazendo upload de imagens inapropriadas, pois isso é feito pelo Gravatar. Apenas forneça um endereço de email para o avatar do usuário será fornecido.
Vamos adicionar o Gravatar em uma simples aplicação Rails com um modelo User
. Ela tem atualmente três usuários, cada um com um diferente endereço de email e a página index
mostra uma coluna avatar
com "TODO".
Existem muitos plugins disponíveis para adicionar o Gravatar ao Rails, mas é tão fácil fazer isso do zero que nós não queremos usar um plugin. Vamos começar modificando a view que renderiza a tabela mostrada acima. A view está assim:
<% 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 %>
Vamos substituir o texto TODO, na primeira célula da tabela, com uma image_tag
. A url da imagem será gerada por um método helper, que vamos escrever, chamado avatar_url
. Ele recebe um usuário como parâmetro.
<% 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 %>
Agora vamos escrever o método avatar_url
no ApplicationHelper
. O único truque é a geração do id que o Gravatar espera. O id é um hash MD5 em minúsculas do endereço de email do usuário, o que é bastante simples.
module ApplicationHelper def avatar_url(user) gravatar_id = Digest::MD5::hexdigest(user.email).downcase "http://gravatar.com/avatar/#{gravatar_id}.png" end end
Quando recarregarmos a página agora, vamos ver as imagens dos avatars para as duas contas que tem imagens do Gravatar associadas a elas. Para a que não tem, vamos ver uma imagem padrão do Gravatar.
Customizando imagens do Gravatar
Existem alguns parâmetros que podem ser passados na url do Gravatar para customizar seu comportamento e mais detalhes podem ser encontrados no site do Gravatar. Passando, por exemplo, o parâmetro s
, vamos mudar o tamanho do avatar, assim:
http://gravatar.com/avatar/9a295994737a47683a4da4ed47aef7dd.png?s=200
A opção d
pode ser usada para fornecer uma imagem alternativa, se não for encontrado um avatar para o usuário.
http://gravatar.com/avatar/84ce1adb94b67014236a909fa4c1269d.png?d=http%3A%2F%2Fasciicasts.com%2Fimages%2Frails.png
Podemos passar a opção r
para mudar a classificação e se o seu site usa HTTPS, então podemos obter imagens com segurança usando o endereço https://secure.gravatar.com/
. Vamos usar algumas dessas opções para redimensionar os avatars para 48 pixels, assim como o Twitter usa, e para fornecer uma imagem alternativa diferente.
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
Quando recarregarmos a página agora, as imagens estarão menores e nossa imagem padrão customizada será mostrada para a conta que não tem uma imagem no Gravatar.
Usando imagens de outros sites com OmniAuth
Essa solução de avatar funciona especialmente quando está junto com o OmniAuth. Se você não está familiarizado com o OmniAuth, o episódio 241 [assistir, ler] aborda como usá-lo em uma aplicação Rails. O motivo do OmniAuth funcionar bem aqui é que se um usuário entrar no seu site através do Facebook ou Twitter, então ele já terá um avatar desses serviços e ela pode ser obtida da propriedade image
do hash user_info
que o OmniAuth retorna. Se um usuário não entrou através de um desses serviços, então podemos usar o Gravatar como uma alternativa, para que cada usuário sempre tenha um avatar.
Não vamos adicionar o OmniAuth nessa aplicação, mas vamos adicionar um campo avatar_url
ao nosso modelo User
para simular essa parte dos dados do OmniAuth. Primeiro vamos modificar um dos usuários para adicionar o avatar do Twitter.
Depois vamos modificar nosso avatar_url
no ApplicationHelper
para que ele use o avatar já armazenado, se ele existir.
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
Quando recarregamos a página, o usuário que tiver um avatar armazenado, será mostrado. Para os outros, ainda pegaremos do Gravatar.
É isso. Foi rápido mas espero que tenha abordado tudo para você usar avatar nas suas aplicações Rails.