Blogger: Avatares en los comentarios

Ayer, Blogger anunciaba que ya estaba disponible una nueva mejora, la posibilidad de mostrar el avatar de los usuarios en los comentarios, algo que hacía tiempo se lograba mediante un truco que dejó de funcionar y es probable que haya muchos que no se hayan dado cuenta que existe ya que solemos manipular esa parte de la plantilla.

La imagen a mostrar es la que hayamos agregado a nuestro perfil (Escritorio | Ver perfil | Editar perfil | Editar foto) si es que hemos agregado alguna, el ícono de Blogger si no subimos ninguna , el ícono de OpenId si se está usando ese método de ingreso o una imagen en blanco si es un usuario anónimo o utiliza su dirección URL.

Para que esto funcione, primero que nada deberemos verificar que en la Configuración | Comentarios, esté marcada la casilla correspondiente:

¿Mostrar imágenes de perfil en los comentarios? Sí No

Como elemento adicional, en la Vista Previa de los comentarios aparece un enlace Agregar foto para hacerlo directamente desde allí en caso de no tener ninguna.

Hasta acá todo es simple pero, lo complicado es que la mayoría de las plantillas no poseen el código necesario ya que es algo que sólo aparece en los blogs nuevos y, para colmo, probablemente hemos agregado mucha personalización en ese sector así que lo mejor es comenzar desde el código elemental.

<dl expr:class='data:post.avatarIndentClass' id='comments-block'>
  <b:loop values='data:post.comments' var='comment'>
    <a expr:name='"comment-" + data:comment.id'/>
    <dt expr:class='&quot;comment-author &quot; + data:comment.authorClass' expr:id='data:comment.anchorName'>
      <b:if cond='data:comment.favicon'>
        <img expr:src='data:comment.favicon' height='16px' style='margin-bottom:-2px;' width='16px'/>
      </b:if>
      <a expr:name='data:comment.anchorName'/>
      <b:if cond='data:blog.enabledCommentProfileImages'>
        <data:comment.authorAvatarImage/>
      </b:if>
      <b:if cond='data:comment.authorUrl'>
        <a expr:href='data:comment.authorUrl' rel='nofollow'><data:comment.author/></a>
      <b:else/>
        <data:comment.author/>
      </b:if>
      <data:commentPostedByMsg/>
    </dt>
    <dd class='comment-body'>
      <b:if cond='data:comment.isDeleted'>
        <span class='deleted-comment'><data:comment.body/></span>
      <b:else/>
        <p><data:comment.body/></p>
      </b:if>
    </dd>
    <dd class='comment-footer'>
      <span class='comment-timestamp'>
        <a expr:href='data:comment.url' title='comment permalink'>
          <data:comment.timestamp/>
        </a>
        <b:include data='comment' name='commentDeleteIcon'/>
      </span>
    </dd>
  </b:loop>
</dl>

No va a ser sencillo explicar esto y de aquí en adelante hay que ser prudentes así que, ya mismo, antes de intentar nada, hay que guardar la plantilla y tener un backup. Mejor aún si todo se hace en un blog de pruebas con una copia de la plantilla original.

En las entradas Blogger y los comentarios 1 | 2 | 3 se habla del contador de comentarios y de una clase CSS para mostrar los comentarios pares e impares con fondos diferenciados. Ambas cosas siguen funcionando normalmente.

<dl expr:class='data:post.avatarIndentClass' id='comments-block'>
  <!-- ponemos el contador a cero -->
  <script type='text/javascript'>var contadorComentarios=0;</script>
  <b:loop values='data:post.comments' var='comment'>
    <!-- agregamos un bloque para darle un nombre único a cada comentario -->
    <div class='' expr:id='data:comment.id'>
      <a expr:name='&quot;comment-&quot; + data:comment.id'/>
      <dt expr:class='&quot;comment-author &quot; + data:comment.authorClass' expr:id='data:comment.anchorName'>
        <b:if cond='data:comment.favicon'>
          <img expr:src='data:comment.favicon' height='16px' style='margin-bottom:-2px;' width='16px'/>
        </b:if>
        <a expr:name='data:comment.anchorName'/>
        <b:if cond='data:blog.enabledCommentProfileImages'>
          <data:comment.authorAvatarImage/>
        </b:if>
        <span class='autorcomentario'>
          <b:if cond='data:comment.authorUrl'>
            <a expr:href='data:comment.authorUrl' rel='nofollow'><data:comment.author/></a>
          <b:else/>
            <data:comment.author/>
          </b:if>
        </span>
        <data:commentPostedByMsg/>
        <!-- el código del contador -->
        <span class='comentacontador'>
          <a expr:href='"#comment-" + data:comment.id' title='Vinculo al comentario'>
            <script type='text/javascript'>
              contadorComentarios=contadorComentarios+1;
              document.write(contadorComentarios)
            </script>
          </a>
        </span>
      </dt>
      <dd class='comment-body'>
        <b:if cond='data:comment.isDeleted'>
          <span class='deleted-comment'><data:comment.body/></span>
        <b:else/>
          <p><data:comment.body/></p>
        </b:if>
      </dd>
      <dd class='comment-footer'>
        <span class='comment-timestamp'>
          <a expr:href='&quot;#comment-&quot; + data:comment.id' title='comment permalink'><data:comment.timestamp/></a>
          <b:include data='comment' name='commentDeleteIcon'/>
        </span>
      </dd>
      <!-- establecemos la clase del comentario -->
      <script type='text/javascript'>ContarC(&#39;<data:comment.id/>&#39;)</script>
    </div>
  </b:loop>
</dl>

Los distintos trucos para identificar a los comentaristas ya no tiene mucho sentido si se usan las imágenes de los perfiles aunque habría que mejorar un poco la visualización de algunos avatares y sobre todo, ver si es posible usar alguna imagen por defecto que reemplace las imágenes inexistentes. Habrá que estudiar el asunto.

Las definiciones CSS que controlan esto son cargadas por Blogger mismo así que si queremos modificarlas, deberemos sobrescribirlas agregando el estilo debajo de <body>. Estas son las propiedades por defecto:

#comments-block.avatar-comment-indent { /* es la lista completa DL */
  margin-left: 45px; /* esto puede complicar la salida de los datos */
  position: relative;
}
#comments-block.avatar-comment-indent dd { /*  */
  margin-left: 0;
}
#comments-block .avatar-image-container { /* el contenedor de las imágenes */
  height: 37px;
  left: -45px;  /* aparentemente compensa el margen */
  position: absolute;
  width: 37px;
}
#comments-block .avatar-image-container img { /* las imágenes tienen un borde gris */
  border: 1px solid #CCCCCC;
  float: right;
}
#comments-block .avatar-image-container.avatar-stock img { /* cuando no hay imagen y se usan iconos normales */
  border-width: 0;
  padding: 1px;
}

En lo personal, eliminé esos márgenes y la posición absoluta. Además, agregué un padding, un fondo y un borde en las imágenes porque sino, quedaban fuera del área de comentarios o simplemente no se veían:

#comments-block .avatar-image-container {
  float: left;
  position: static;
}
#comments-block.avatar-comment-indent {
  margin-left: 0;
}#comments-block .avatar-image-container img {
  background-color: #VALOR;
  border: 1px solid #VALOR;
  float: none;
  padding: VALORpx;
}

Sin duda, habrá mucho más que arreglar.