homeASCIIcasts

244: Gravatar 

(view original Railscast)

Other translations: En Ru Es Fr

Written by Rafael Carvalho

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".

The users page of our application.

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:

/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 %>

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.

/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 %>

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.

/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

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.

Images from Gravatar are now shown.

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.

/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

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.

Our custom default avatar is now shown.

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.

Adding an avatar_url to a user.

Depois vamos modificar nosso avatar_url no ApplicationHelper para que ele use o avatar já armazenado, se ele existir.

/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

Quando recarregamos a página, o usuário que tiver um avatar armazenado, será mostrado. Para os outros, ainda pegaremos do Gravatar.

The avatar from Twitter is now shown.

É isso. Foi rápido mas espero que tenha abordado tudo para você usar avatar nas suas aplicações Rails.