Personalizar avatares comentaristas

Como vimos, otra vez funciona cómo es debido el artilugio de los avatares de los comentaristas de Blogger. Hace tiempo que quería usarlo y lo reinstalé, pero para variar, me encontré con el primer problema. Lo cierto es que es un problema menor pero si se puede solucionar ¿por qué no hacerlo?

El caso es que cuando un comentario se produce en anónimo el sistema coloca una imagen sin contenido y el hueco que queda no me gustaba. Por otra parte, yo he cambiado de avatar un par de veces y resulta que los comentarios se graban con el avatar que tenía en cada momento. Como en mi propio blog queda raro que haya comentarios míos con distintos dibujitos, he aprovechado para forzar la impresión de un avatar concreto.

No he podido resolver todos los casos, porque falta por solucionar el tema del hueco para cuando el usuario se identifica con nick+URL. Ahí sigue saliendo, ya que el código propuesto identifica al anónimo precisamente por su ausencia de URL y en este caso, si hay URL. Lo he intentado con la etiqueta data:comment.authorClass que nos descubrió Vagabundia en su post sobre cómo identificar a los autores de los comentarios, pero no he conseguido que saque resultados en esta parte. Espero que una vez lanzada la idea, alguien encuentre una DATA para poder identificar a este tipo de usuarios. Si es así, los comentarios están abiertos. (Actualización al final)

Colocando unos pocos condicionales se puede arreglar todo esto... y a eso vamos.

Localizamos las líneas que comprueban si hemos activado que se vean las imágenes en perfiles...

<b:if cond='data:blog.enabledCommentProfileImages'>
<data:comment.authorAvatarImage/>
</b:if>

...y se sustituyen por estas otras.

<b:if cond='data:blog.enabledCommentProfileImages'>
<!-- Personalizar avatar -->
<!-- si el autor ha grabado alguna URL -->
<b:if cond='data:comment.authorUrl'>
    <!-- mis propios comentarios -->
    <b:if cond='data:comment.author == &quot;TUNOMBRE&quot;'>
    <span class='avatar-image-container'><img src='URL_IMAGEN_PROPIA'/></span>
    <b:else/>
    <!-- cualquier comentarista con URL -->
<data:comment.authorAvatarImage/>
    </b:if>
<!-- no hay URL  -->
<b:else/>
<!-- anónimo -->
<span class='avatar-image-container'><img src='URL_IMAGEN_ANONIMOS'/></span>
</b:if>
</b:if>

En el propio código y mediante comentarios, podeis ver qué hace cada parte. En negrita, lo que teneis necesariamente que cambiar, vuestro nick, vuestra imagen y la imagen para usuarios anónimos. Si no se desea personalizar el propio avatar, entonces simplemente borrar las líneas marcadas en verde.

Si sois varios autores, al contrario. Habrá que añadir más condicionales para distinguir a las diferentes personas con el suyo propio, aunque personalmente, en este último caso, lo que a mí me parece más práctico es dejar el avatar actual de cada uno para no complicar mucho el código.


Otra cosilla. Si el avatar os parece muy pequeño, se queda pegado al nombre del autor o quereis por ejemplo, colocarle un borde, podeis incorporar las siguientes clases antes del /skin y redactar las propiedades que os gusten.

#comments-block .avatar-image-container {
margin-right:5px;
}

#comments-block .avatar-image-container img {
float: none;
width:35px;
height:35px;
border:1px solid #000000;
}

Ojo con el tamaño, porque si lo haceis muy grande, se puede distorsionar demasiado la imagen.

---

Actualización: Para que en todos los casos se vea una imagen y no un hueco, es necesaro añadir

#comments-block .avatar-image-container.avatar-stock {
background:url(URL_IMAGEN_RESTO DE CASOS) transparent no-repeat 50% 50%;}

Esa es la clase que controla los avatares para los casos que no se contemplaban en el código facilitado aquí. Al asignar una imagen de fondo, cuando no hay ninguna, se verá la susodicha. Una vez más, la pista nos la dió Vagabundia.

¿Vemos otro post al azar por si le encuentras utilidad o quizás prefieres ser más metódico y suscribirte a nuestras entradas por correo? También puedes imprimir este artículo y por supuesto compartirlo en redes sociales si fue de tu agrado.

Compartir

Twitter

Pinterest

Facebook

Linkedin

Copy URL

Compartir

Twitter

Pinterest

Facebook

Linkedin

Y muchos más artículos interesantes si nos sigues en...

• Google
• Facebook
• Twitter