Imágenes en Blogger (Introducción)

Algunas consultas me hicieron dar cuenta que muchos usuarios se sienten frustrados cuando, luego de un tiempo de usar Blogger, quieren hacer cosas más allá de lo que las herramientas del editor les permiten y se encuentran frente a frente con una dura realidad, o se olvidan del tema o tienen que aprender el lenguaje HTML.

Mi idea es mostrar formas relativamente elementales que puedan ponerse en práctica con rapidez y que, con imaginación y paciencia, permitan realzar las páginas. Nada de lo que sigue pretende ser original, sólo es una síntesis más o menos ordenada de técnicas y no tienen otro propósito que responder globalmente, algunas preguntas que me han llegado.

Como la mayoría se refiere a temas relacionados con las imágenes, comienzo con ellas.

Si queremos agregar una imagen en un post, Bloggerr una interfase que permite cargarla y establecer algunos mínimos parámetros. Los que siempre nos perturban son los que se refieren a la alineación: ¿DERECHA, CENTRADA, IZQUIERDA?. La pregunta importante es ¿alineadas con respecto a qué?. ALINEADAS RESPECTO AL TEXTO.

DERECHA	CENTRADA	IZQUIERDA
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis.	Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis.	Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis vel eum iriure dolor.

Si lo que queremos es ir un poco más allá, debemos empezar por entender el código que escribe Blogger de manera automática:

<a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}"
href="URL_imagen">
<img
style="float: valor; margin: 0 0 10px 10px; cursor:pointer;"
src="URL_imagen"
border="0"
alt="" />
</a>

Para empezar, podríamos eliminar todo lo que está en rojo ya que sólo servirá para abrir la imagen en una ventana separada. Esto nos deja con una simple instrucción IMG dentro de la cual también hay atributos y propiedades que podemos eliminar, las marcadas en verde.

BORDER: si la imagen no es un vínculo, por defecto, no tendrá borde.

MARGIN: los valores indican los pixeles entre el perímetro de la imagen y el texto en este orden, arriba, derecha, abajo, izquierda (eventualmente el valor se define como auto). En el ejemplo superior, los márgenes son cero, es lo mejor para empezar a hacer pruebas. Luego, decidimos.

CURSOR: cuando el cursor del ratón está sobre la imagen, se muestra una manito.

De esta manera, sólo nos queda ALT que no tiene un valor y se sugiere poner el texto que será mostrado en caso de no poder mostrarse la imagen. El atributo que determina la alineación es STYLE y dentro de este, la propiedad float que permite ajustar el texto alrededor de un elemento y puede tener tres valores left, right o none. Y son las que se utilizan para las alineaciones derecha e izquierda.

La alineación centrada es diferente:

<a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}"
href="URL_imagen">
<img
style="margin:...; display: block; text-align: center; cursor:..;"
src="URL_imagen"
border="0"
alt="" />
</a>

Con text-align se centra el texto y con display se establece el modo como será mostrado el elemento (la imagen). En este caso, el valor block provoca un salto de línea antes y después de él. Pero podría tener el valor inline que no agregaría saltos de línea:

BLOCK	INLINE
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis.	Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis.

Aunque las nuevas técnicas no recomiendan utilizar el atributo ALIGN para establecer la alineación de las imágenes, es admitido por los navegadores así que sigue siendo un posibilidad

<img align="valor" src="URL_imagen" alt="" />

Donde el valor puede ser left, right o middle /center, establecen la alineación horizontal:

ALIGN="right"	ALIGN="center | middle"	ALIGN="left" (valor por defecto)
Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.	Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.	Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.

Y los valores top y bottom establecen la alineación vertical, la posición de la parte superior o inferior de la imagen con la parte superior o inferior del texto:

ALIGN="bottom"	ALIGN="top (valor por defecto)"
Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.	Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.

Tanto si se usa ALIGN como atributo o float como estilo, las alineaciones pueden combinarse:

<img src="URL_imagen1" align="left" />
<img src="URL_imagen2" align="right" />
 ... texto texto texto texto ... 

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 et accumsan et iusto odio.

Dos atributos no incluidos por defecto son WIDTH y HEIGHT que son valores que definen el ancho y el alto de la imagen. Es conveniente que siempre los pongamos porque ayudamos a que los navegadores reserven espacio para ellos y continuen con el armado de la página, sin necesidad de cargarlas inmediatamente. El valor puede ser dado en pixeles o en porcentajes y sobrescribe el valor real, de tal manera que podemos escalarlas.

Resumiendo, podemos decir que el código elemental para introducir una imagen debería tener este formato:

<img src="URL_imagen"
      alt=" ... texto alternativo ... "
      width="valor_ancho"
      height="valor_alto"
      style=" ... definiciones de estilo ...  />

Se debe recordar que todo instrucción IMG debe terminar con una barra inclinada ya que es un código que no tiene una instrucción de cierre.

<img ....... />

Si bien al hacer un post, Blogger formatea automáticamente este tipo de error, cuando editamos la plantilla se vuelve muy estricto así que es mejor acostumbrarse a hacerlo así.

¿Esto es todo? No, esto, es sólo el principio.