Blogger: Un poco más sobre los avatares

Es una pena pero Blogger tiene la costumbre de complicar lo sencillo y aquí está otra vez, ofreciendo la posibilidad que se vean los avatares de los comentaristas pero, haciéndolo de tal modo que hay que tomar un curso ascelerado en la NASA para hacer que funcionen y se vean correctamente en muchas plantillas.

Los problemas básicos son dos; el primero es que el nuevo juguete tiene una serie de definiciones de CSS predefinidas, demasiadas propiedades ya que, lo razonable era que no tuvieran ninguna y que cada uno usara esa imagen como le viniera en gana pero, para Blogger, DEBEN tener un borde gris, medir 35x35 y estar a la izquierda ¿Por qué? Nadie sabe pero, es la ley.

/* estas son las propiedades por defecto */

#comments-block .avatar-image-container img {
border:1px solid #CCCCCC;
float:right;
}
#comments-block .avatar-image-container.avatar-stock img {
  border-width:0;
  padding:1px;
}
#comments-block .avatar-image-container {
  height:37px;
  left:-45px;
  position:absolute;
  width:37px;
}
#comments-block.avatar-comment-indent {
  margin-left:45px;
  position:relative;
}
#comments-block.avatar-comment-indent dd {
  margin-left:0;
}
iframe.avatar-hovercard-iframe {
  border:0 none;
  height:9.4em;
  margin:0.5em;
  padding:0;
  width:25em;
}

Para personalizar ese sector, debemos sobrescribir esas definiciones así que es conveniente agregar el estilo después de <body>, entre etiquetas <style> y <style>.

¿Es posible posicionarlo a nuestro gusto?
Sí. Me parece que lo ideal sería adaptar los márgenes y eliminar la posición absoluta. Por ejemplo, así, podría ponerse a la derecha:

#comments-block.avatar-comment-indent {margin-left: 0;}
#comments-block .avatar-image-container {float: right; position: static;}

¿Es posible quitarle el borde o cambiarlo por otro?
Sí. De esta manera:

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

¿Es posible cambiar el tamaño de los avatares?
Sí. Aunque no podemos cambiar el ancho y el alto de la imagen en si misma, podemos valernos del CSS para establecer valores mínimos; de este modo, por ejemplo, los mostramos de 45x45:

#comments-block .avatar-image-container img {min-height: 45px; min-width: 45px;}

Y si quisiéramos lo contrario, usaríamos otras propeidades; por ejemplo, los mostramos de 24x24:

#comments-block .avatar-image-container img {max-height: 24px; max-width: 24px;}

Incluso, si el tamaño nos parece correcto, convendría usar min-height y min-width siempre porque he visto que ciertos avatares no se muestran bien; por algún motivo, se ven rectangulares y no cuadrados.

El segundo problema molesto que vi es que si el comentarista no se identifica a través de una cuenta de Blogger, lo que se muestra es un ícono pero, vaya uno a saber por qué motivo, ese ícono no es de 35x35 sino de 16x16 así que queda un espacio vacio. Para resolver esto, podríamos usar un truco.

La etiqueta IMG admite estilos CSS, uno de ellos es background (fondo) y normalmente lo usaríamos para darle un color de fondo si es transparente o enmarcarla de alguna manera; pero background tambien admite colocar una imagen de fondo. Claro, por lo general esto sería una tontera ya que no lo veríamos nunca pero, en este caso, podría ayudarnos ya que Blogger genera dos códigos diferentes, uno cuando se usan sus cuentas y otro para el resto de los ingresos.

<div class="avatar-image-container vcard">
 ....... avatares de 35x35 .......
</div>

<div class="avatar-image-container avatar-stock">
 ....... íconos de 16x16 .......
</div>

Usando esos datos, podemos utilizar otra imagen personal que sea el fondo y ocultar la imagen del ícono:

#comments-block .avatar-image-container.avatar-stock img {display:none;}
#comments-block .avatar-image-container.avatar-stock {background:transparent url(URL_imagen) no-repeat 50% 50%;}

Algo similar ocurre con algunos avatares que parecen no mostrarse por, vaya uno a saber qué motivo, podemos agregarle un fondo a la imagen por si esta no se muestra:

#comments-block .avatar-image-container img {background: transparent url(URL_IMAGEN) no-repeat 50% 50%;}

Como un ejemplo genérico, estas son las propiedades que he aplicado:

#comments-block.avatar-comment-indent {
  margin-left: 0;
}
#comments-block .avatar-image-container {
  float: left;
  height: 49px;
  position: static;
  width: 49px;
}
#comments-block .avatar-image-container img {
  background:#234 url(URL_noimage.gif) no-repeat 50% 50%;
  border: 1px solid #456;
  display: block;
  float: none;
  min-height: 45px;
  min-width: 45px;
  padding: 2px;
}
#comments-block .avatar-image-container.avatar-stock {
  background: #234 url(URL_noavatar.gif) no-repeat 50% 50%;
  border: 1px solid #456;
}
#comments-block .avatar-image-container.avatar-stock img {
  display: none;
}
img.delayLoad {
  max-height: 45px;
  max-width: 45px;
  min-height: 45px;
  min-width: 45px;
}

Seguramente, hay muchas otras maneras de llegar al mismo resultado o que deben ser aplicadas en casos particulares así que sería bueno que las compartiéramos a ver si podemos sacarle jugo a estos regalitos sin morir en el intento.

ElHackerZ