Blogger y más problemas con las imágenes

Una vez más, Blogger nos da sorpresas. Malas, pero sorpresas: ahora se trata de un cambio en la forma en que se manejan las imágenes que subimos.

Hasta ahora, si usábamos la ventana para insertar una imagen, se generaba un código bastante estrafalario pero que al menos tenía una función, nos permitía hacer click en la imagen y verla en el navegador. Aparentemente, esta opción ya no está disponible, el código permanece pero no podemos ver la imagen sino que el navegador nos muestra una ventana para descargarla a la PC. Esto no ocurrirá con las imágenes ya alojadas sino con las que hayamos subido en los últimos días.

¿Qué código coloca Blogger y qué significa? Lo que hace es poner un enlace a la imagen en su tamaño original y una miniatura de esta. Todo eso, con algunas variantes que dependen de las opciones que le damos. Hay que recordar que, cuando subimos una imagen a Blogger, este utiliza Picasa para alojarla. Guarda la imagen original en un directorio (una carpeta) y crea una serie de miniaturas que guarda en otros directorios.

La primera opción a tener en cuenta es el tamaño de la imagen a mostrar, dependiendo de esto, la etiqueta IMG será diferente, cambiará el directorio de la imagen:

Pequeñas: http://................../s200/imagen.jpg
Medianas: http://................../s320/imagen.jpg
Grandes: http://................../s400/imagen.jpg


Ese número, indica la cantidad de pixeles de ancho de la imagen. Es decir, a menos que modifiquemos manualmente el código generado, la imagen más grande que podremos mostrar tendrá 400 pixeles de ancho.

Esta imagen de ejemplo tiene 600 pixeles de ancho, y así se mostrará en un post, con las tres posibles alternativas:

Si nos ubicamos en la Edición de HTML del post, veremos el mismo código en los tres casos, con una única diferencia, el directorio de la imagen (s200, s320 y s400).

¿Y qué pasa si queremos poner una imagen más grande? En ese caso, debemos editar el código y simplemente cambiar el directorio, fuera cual fuera por s00:

En mi caso particular, como la imagen es más ancha que el área de los posts, lo que sobra de ella simplemente, se corta.

La otra opción de Blogger es establecer el diseño ¿A qué se refiere?

De acuerdo a lo que optemos, Blogger agregará a la etiqueta IMG un estilo utilizando el atributo style. En todos los casos, siempre pondrá:

style="cursor:pointer; cursor:hand;"

Esta propiedad, hace que el cursor del ratón se transforme en una mano cuando pasamos por encima de la imagen para indicar que es un enlace. Para qué lo hace, lo desconozco ya que es un enlace y ese cursor se mostrará igual aunque quitemos la propiedad.

Si elegimos Centrada se agregarán tres propiedades más, display, margin y text-align:

style="display:block; margin:0px auto 10px; text-align:center; cursor:pointer; cursor:hand;"

display:block hará que la etiqueta sea un bloque, es decir, ocupe todo el ancho del área de los posts (muevan el cursor fuera de la imagen hacia cualquiera de los bordes y la "manito" seguirá allí, como si hubiera una imagen transparente). Esto se usa para que luego la podamos centrar mediante text-align y margin en donde se establece un margen superior de 0, un inferior de 10 pixeles y auto para derecha e izquierda:

Si elegimos Derecha o Izquierda, se agregarán dos propiedades más, float y margin:

style="float:left; margin:0 10px 10px 0; cursor:pointer; cursor:hand;"

style="float:right; margin:0 0 10px 10px; cursor:pointer; cursor:hand;"

Esto hará que la imagen "flote" a la derecha o a la izquierda y, según sea el caso y se separará de algunos de sus bordes unos 10 pixeles.

Un par de ejemplos:

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.

Pero el código que inserta Blogger tiene aún algo más, el enlace:

<a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}"
href="http://......./la_imagen">
<img ....... />
</a>

Como se ve, es un enlace común al que le agregan un script que se ejecuta cuando se produce un evento onblur es decir, cuando se detecta la pérdida del foco (el cursor) sobre la imagen ¿Para qué sirve? sencillamente: no tengo idea.

Lo importante en este caso es, otra vez, el directorio al que apunta el enlace. Hasta hace poco, era este:

http://......./s1600-h/la_imagen

ahora, a cambiado a este:

http://......./s1600-R/la_imagen

ese cambio es el que impide que podamos abrir las imágenes haciendo click en ellas.

En algún sitio leí que lo que ocurre es que Picasa impide que las imágenes de más de 800 pixeles de ancho se muestren fuera de su propio dominio pero, aparentemente Blogger estaría fuera de esta restricción aunque, tal vez, los dominios propios (los que no están en blogspot) podrían tener problemas.

Todo lo que he probado me lleva a pensar que no es un problema de tamaños ni de códigos, simplemente, no nos dejan.

Si siempre me pareció que el código que Blogger coloca para insertar imágenes era absurdo, hoy, cuando los enlaces ya no funcionan más, simplemente se ha tornado inútil, entonces ¿podemos eliminarlo? Claro, esto es algo que yo, personalmente, he hecho siempre pero que ahora, hago con placer.

Para esto, lo ideal es colocar como diseño NINGUNO así tenemos que borrar menos. Veamos cómo. Este es un código común:

<a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}"
href="http://......./s1600-R/URLimagen">
<img style="cursor:pointer; cursor:hand;" src="http://......./s320/URLimagen"
border="0" alt=""id="BLOGGER_PHOTO_ID_xxxxxxxxxx" />
</a>

Allí, lo único importante es lo marcado en rojo, la dirección URL de la imagen a la que puedo cambiar el directorio s320 por s00 si es que quiero la imagen real y no una miniatura. El resto, no me importa ya que con eso puedo escribir manualmente la etiqueta:

<img src="http://......./s320/URLimagen"</a>

¿Y si quiero alinearla? Pués uso las alineaciones del editor o le agrego manualmente el atributo correspondiente. Por ejemplo, para que flote a la izquierda:

<img style="float:left; margin:0 10px 10px 0;"
src="http://......./s320/URLimagen"</a>

Si aún así parece complicado, simplemente borramos el enlace, en este ejemplo, todo lo marcado en rojo:

<a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}"
href="http://......./s1600-R/URLimagen">
<img style="cursor:pointer; cursor:hand;" src="http://......./s320/URLimagen"
border="0" alt=""id="BLOGGER_PHOTO_ID_xxxxxxxxxx" />
</a>

Por último, si queremos que la imagen sea una miniatura a una imagen de tamaño mayor, no habrá más remedio que recurrir a un servicio de alojamiento externo y añadir el código manualmente:

<a href="URL_imagen">
<img src="URL_miniatura"/>
</a>

Podemos forzar que se abra en una ventana nueva agregando el atributo target:

<a href="URL_imagen" target="_blank">
<img src="URL_miniatura"/>
</a>

o usar una sola imagen y dejar que el navegador cree la miniatura, indicándole el ancho, el alto o ambos parámetros (width y height):

<a href="URL_imagen">
<img src="URL_miniatura" width="valor" height="valor"/>
</a>

Gracias al comentario de cgredan me di cuenta que me estaba olvidando de un detalle; es que el código de Blogger me parece tan absurdo que trato de no pensar en él. Pero no importa, para seguir utilizándolo, lo que debemos hacer es modificar la URL del enlace, utilizando la de la imagen y cambiándole el directorio.

Fíjense que el enlace tiene una dirección URL totalmente diferente de la dirección URL de la imagen. Lo que haremos es usar esta última dos veces y a la primer le pondremos s1600-h como directorio:

<a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}"
href="http://......./s1600-h/URLimagen">
<img style="cursor:pointer; cursor:hand;" src="http://......./s320/URLimagen"
border="0" alt=""id="BLOGGER_PHOTO_ID_xxxxxxxxxx" />
</a>

Es decir, las dos direcciones en rojo serán iguales con la única variante del directorio. Haciendo click en este ejempo, la imagen se abrirá en una nueva ventana y no se nos mostrará el cuadro de descarga: