Personalizando o avatar nos comentários

Caso seu template seja convertido do Wordpress, siga o tutorial: Personalizando avatar nos comentários de templates convertidos (Wordpress para Blogger).

O Marcos Lemos (Ferramentas Blog) é gente boa demais! Ele faz um tutorial ensinando a colocar avatar nos comentários e no próprio post deixa uma cobrança disfarçada de elogio para nós (Ariane, HTMHelen, Juliana Sardinha e MamaNunes) fazermos posts ensinando a personalizar o recurso.

Agradeço a confiança do Marcos e já estou publicando a minha contribuição. Na verdade eu tive que aprender a personalizar para o próprio HTMHelen. Mesmo com o código as imagens não apareceram nos comentários “de cara”, então tive que personalizar o CSS.

Faça tudo em um blog de testes primeiro!

1. Ativando o recurso

• Configurações » Comentários.
• Marque Sim para a pergunta Mostrar imagens de perfil nos comentários?
• Salve.

Teste. Caso o seu template seja original, pode ser que funcione sem precisar alterar nenhum código. Caso não funcione, prossiga:

2. Inserindo o código

Siga o tutorial do IceBreaker. Teste novamente. Pode ser que os avatares não apareçam ainda porque o CSS ainda não está ajustado.

3. Ajustando o tamanho da imagem

Insira o seguinte código na folha de estilos do Blogger, sendo que onde está escrito 55 você insere os valores desejados de largura (width) e altura (height).

div.avatar-image-container {width:55px; height:55px;}
div.avatar-image-container img.delayLoad {width:55px; height:55px;}
]]></b:skin>

4. Imagem alternativa

Caso o usuário não tenha avatar ou qualquer erro/lentidão impeça que ele apareça, você pode estipular uma imagem padrão, que na verdade é um background. Use seu editor de imagens favorito (recomendo o IrfanView) para redimensionar a imagem para o tamanho exato que você estipulou acima.

Para hospedar a imagem você pode usar o próprio Picasa ou seu host de imagens favorito.

Para que isso funcione é preciso ter estipulado as medidas corretamente no passo 3. Veja o código que eu usei aqui no HTMHelen:

div.avatar-image-container {background:url(http://enderecodaimagem.gif) no-repeat center center; width:55px; height:55px;}
div.avatar-image-container img {display:none;}
div.avatar-image-container img.delayLoad {display:block; width:55px; height:55px;}
]]></b:skin>

5. Bordas, margens e espaçamento

24/09/2009 → O código anterior não estava escondendo a borda padrão do avatar, então foi acrescentada a seguinte linha:

#comments-block .avatar-image-container img {border:0px;}

Caso você já tenha lido e praticado o tutorial Margens e espaçamento, está craque no assunto. Mas para quem ainda não teve oportunidade, segue o exemplo completo de como precisei fazer todos esses ajustes aqui no HTMHelen:

dt.comment-author {padding-left:20px; padding-bottom:20px;}

dd.comment-body {padding-left:20px;}

div.avatar-image-container {margin:0px; padding:0px; padding-left:20px; padding-right:5px; background:url(http://lh3.ggpht.com/_HlIyV_enpD8/SrNrveaWOsI/AAAAAAAAHns/S5DR5UrDbGw/s800/avatar-comentarios.gif) no-repeat center center; width:55px; height:55px;}

#comments-block .avatar-image-container img {border:0px;}

div.avatar-image-container img {display:none;}

div.avatar-image-container img.delayLoad {display:block; padding:0px; margin:0px; width:55px; height:55px;}

]]></b:skin>

Resultado com um comentário usando OpenID e outro usando a conta do Blogger:

A palavra exemplo não foi usada à-toa. Você precisará ajustar pixel a pixel para que o avatar fique bem encaixado no leiaute, porque isso depende totalmente de todas as customizações que já foram feitas antes.

Até mais!