Blogger: El código de las imágenes insertadas

Agregar una imagen en una entrada de Blogger es sencillo, la seleccionamos, hacemos un par de clicks y voilá, ya queda colocada pero, las cosas se complican un poquito cuando no nos conformamos con lo que el servicio nos ofrece y ahí surgen las preguntas de por qué no se ve cómo uno quiere o por qué el tamaño no cambia pese a que le ponemos propiedades CSS en la plantilla.

La explicación es fácil, como todo sistema, Blogger nos permite agregar imágenes y nos da una serie de alternativas pero no puede darnos todas, sólo aquellas que ellos suponen que son las normales; si queremos salirnos de esos patrones no queda otra cosa que editar el código HTML y modificarlo para lo cual, necesitamos entenderlo aunque sea mínimamente.

Esto puede ser un problema doble ya que, el código insertado, varía con nuestras opciones pero también varia según el tipo de editor que estemos usando, dirá una cosa si usamos el editor normal y dirá otra si usamos el editor de Blogger Draft o el editor actualizado.

Desde el editor tradicional, una vez que seleccionamos la imagen, podemos indicarle la forma en que se alineará: Ninguno, Izquierda, Derecha, Centrar y el tamaño que deseamos: Pequeñas, Medio, Grandes y el código insertado, si elegimos Centrar/Grandes será algo así:

<a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="http://......./s1600/imagenDEMO.jpg"><img style="display: block; margin: 0px auto 10px; text-align: center; cursor: pointer; width: 400px; height: 300px;" src="http://......./s400/imagesDEMOBASE.jpg" alt="" id="BLOGGER_PHOTO_ID_0000000000000000000" border="0" /></a>

La imagen insertada es un enlace que tiene un evento llamado onblur que vaya uno a saber para qué lo usa Blogger y apunta a la imagen en su tamaño real ya que, siempre, lo que insertamos en una entrada es una miniatura. Al hacer click en la imagen, esta se abrirá en la misma ventana así que si queremos que se abra en otra ventana, deberemos agregarle el atributo target. Podríamos entonces, simplificar ese enlace y dejarlo así:

<a href="http://......./s1600/imagenDEMO.jpg" target="_blank">

La etiqueta IMG es la que muestra la miniatura seleccionada y tiene varios atributos.

border="0" se coloca porque, por defecto, cualquier imagen que es un enlace tiene un borde pero siempre es mejor definirlo con CSS y quitarlos de manera global añadiendo la definición a la plantilla:

a img {border: none;}

alt="" está vacío así que si queremos agregar una descripción, debemos hacerlo manualmente
id="" identifica la etiqueta y no tiene ningún uso práctico

La clave de nuestros desvelos es el atributo style ya que es allí donde Blogger agrega una serie de propiedades que son las que pueden volvernos loco. Es que, si en nuestra plantilla definimos propiedades de algún tipo para las imágenes, estas, se sobrescriben en la etiqueta misma. Por ejemplo, si se establecen tamaños con width y height, estos son ignorados y lo que vale es lo que dice la etiqueta, lo mismo ocurre con los márgenes así que, si queremos algo especial, debemos eliminar todo eso y el código quedará reducido a algo así:

<img src="http://......./s400/imagesDEMOBASE.jpg" alt="" />

Sin formato, sin márgenes, sin nada; donde lo único necesario es la imagen en si misma y eventualmente, el enlace si es que nos gusta. El resto, lo podemos definir en el CSS de la plantilla y usar alguna clase; por ejemplo:

<img class="centrada" src="http://......./s400/imagesDEMOBASE.jpg" alt="" />

.post-body img.centrada {
  -moz-border-radius: 10px;
  -webkit-border-radius: 10px;
  border-radius: 10px;
  -moz-box-shadow: 0 0 10px #AA8800 inset;
  -webkit-box-shadow: 0 0 10px #AA8800 inset;
  box-shadow: 0 0 10px #AA8800 inset;
  display: block;
  margin: 0 auto;padding: 10px;
}

Algo similar ocurre con el el nuevo editor, cambia el código pero la idea es similar:

<div class="separator" style="clear: both; text-align: center;"><a href="http://......./s1600/imagesDEMO.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="300" src="http://......./s400/imagesDEMOB.jpg" width="400" /></a></div>

Han quitado algunas cosas que evidentemente eran inútiles pero, han agregado otras que también son bastante dudosas y ahora, las distribuyen en varias etiquetas.

En este caso, todo esta dentro de un DIV con una clase CSS que nadie usa y que, por lo general no está definida; en el enlace, el atributo imageanchor no sé para que puede servir; en la etiqueta IMG, en lugar de tener definido el tamaño en style, se lo define con los atributos width y heigh que son los que deben eliminarse si se quiere usar alguna clase de CSS especial. Otra vez, todo eso puede simplificarse y quedarnos sólo con la imagen.

Conviene aclarar que todo lo dicho hasta acá es opcional, no hay ninguna necesidad de hacerlo de este modo y los códigos insertados por Blogger, nos gusten o no, funcionan perfectamente y sólo es necesario meterse con ellos si es que queremos hacer algo especial.