Blogger: Usando imágenes en lugar de etiquetas

Esta idea la escuché varias veces y siempre me pareció que era algo que podía hacerse pero no estaba muy seguro de cómo hacerlo. La inquietud de Gem@ me hizo pensar otra vez en el tema, el tiempo nos va dando algún que otro conocimiento y, sobre todo, algo de audacia .... entonces ¿qué pasaría si ...?

La pregunta concreta es esta:

¿Hay alguna forma de reemplazar los textos de las etiquetas por imágenes? Ojo, no hablamos de cambiar el texto "Etiquetas" que se ve al pie de página de cada post, eso es sencillo, basta buscar el código: <data:postLabelsLabel/> y poner en su lugar una imagen o un texto personal.

Tampoco se trata de anteponer un ícono a la lista de etiquetas, eso también se resuelve con sencillez anteponiendo la imagen a: <data:label.name/>

Lo que se quiere es asociar el nombre de una etiqueta con una imagen específica, es decir, si mi etiqueta es "Perro", mostrar un perro y si es "Elefantes rosados", mostrar un elefante rosado.

Y bien, la respuesta es sí, se puede, casi diría que es sorprendentemente sencillo así que le contesté a Gem@ su mail dándole la posibilidad de explicárselo personalmente o publicarlo. Rápidamente respondió: "Me parece ideal que lo publiques, creo que puede interesar a todos ... ¿A qué estás esperando?".

Eso me pasa por preguntar. Dejé mis jueguitos y me puse a hacer lo que me ordenó

Para resolver el tema debemos partir de una limitación: dónde alojar las imágenes a utilizar. Si las subimos a Blogger, las direcciones URL que tendremos serán, como mínimo, estrafalarias; no tenemos forma de deducirlas, cada una es diferente y NECESITAMOS SABER dónde están las imágenes, lograr que la dirección URL sea algo fijo donde sólo cambie el nombre del archivo y no el resto del dominio ni el directorio donde están guardadas.

No podemos usar Blogger y por la misma razón no podemos usar ImageShack sin embargo, hay varios servicios que establecen una dirección fija: Photobucket, Fileden, Google Pages, Hostfile, etc. En algunos de ellos incluso podemos crear carpetas, de esta manera, todas las imágenes tendrán la misma estructura, por ejemplo:

http://i140.photobucket.com/albums/r25/JMiur/Labels/nombre_Archivo1.ext
http://i140.photobucket.com/albums/r25/JMiur/Labels/nombre_Archivo2.ext

Entonces, como primera medida, subimos las imágenes a uno de esos servidores, todas con el mismo formato y extensión (jpg, png, gif); lo único que debe cambiar es el nombre del archivo que deberá ser exactamente igual al nombre de la etiqueta; es decir, tendremos alojadas tantas imágenes como etiquetas y todas las direcciones serán similares:

Si la etiqueta es perro:
una imagen PNG estará en http:un_servidor/perro.png
Si la etiqueta es elefantes rosados:
una imagen PNG estará en http:un_servidor/elefantes rosados.png

Los tamaños de las imágenes no tienen importancia, eso dependerá de cómo queremos mostrarlas, pueden ser todas iguales o todas diferentes.

Debemos saber que hay dos lugares del blog donde se muestran las listas con las etiquetas: debajo de cada post o en un elemento Labels en la sidebar, el header o el footer. Empecemos con este último.

Blogger permite agregar varios elementos Labels así que, si ya tenemos uno no hace falta sacarlo, en todo caso, esa es una decisión posterior. Vamos a la Plantilla y en Elementos de la página, agregamos el elemento y lo configuramos como se nos ocurra. Guardamos y ahora vamos a Edición HTML y marcamos Expandir artilugios.

Buscamos el código de ese elemento recién agregado que, será más o menos este:

<b:widget id='Label2' locked='false' title='El_Titulo' type='Label'>
<b:includable id='main'>
<b:if cond='data:title'> <h2><data:title/></h2> </b:if>
<div class='widget-content'>
<ul>
<b:loop values='data:labels' var='label'>
<li>
<b:if cond='data:blog.url == data:label.url'>
  <data:label.name/>
<b:else/>
  <a expr:href='data:label.url'>
    <data:label.name/>
  </a>
</b:if>
(<data:label.count/>)
</li>
</b:loop>
</ul>
<b:include name='quickedit'/>
</div>
</b:includable>

Si se fijan, las etiquetas se muestran en una lista, eso es lo que está definido por los códigos:

<ul>
<li>
 ... las etiquetas ...
</li>
</ul>

Dependerá mucho de cómo vamos a mostrarlas pero, en principio, podríamos eliminar esas líneas o darles una clase para luego poder manipularlas con CSS:

.sidebar ul.listaetiquetas {
... propiedades ...
}
.sidebar li.etiquetaimagen {
... propiedades ...
}

Luego, la parte importante, reemplazar el texto de la etiqueta (<data:label.name/>) por la imagen correspondiente; para esto, vamos a usar una facilidad de Blogger, crear una expresión:

<img expr:src='"http://nuestro_servidor/" + data:label.name + ".ext"'/>

Esto se encuentra en dos líneas diferentes. Cambiamos ambas pero reemplazamos http://nuestro_servidor por la dirección del servidor donde esté alojada la imagen y ext por la extensión del tipo de archivo que utilicemos. Y ya que estamos, también eliminamos el contador (<data:label.count/>). El código quedaría así:

<b:widget id='Label2' locked='false' title='El_Titulo' type='Label'>
<b:includable id='main'>
<b:if cond='data:title'> <h2><data:title/></h2> </b:if>
<div class='widget-content'>
<ul class='listaetiquetas'>
<b:loop values='data:labels' var='label'>
<li class='etiquetaimagen'>
<b:if cond='data:blog.url == data:label.url'>
  <img expr:src='"http://nuestro_servidor/" + data:label.name + ".ext"'/>
<b:else/>
  <a expr:href='data:label.url'>
    <img expr:src='"http://nuestro_servidor/" + data:label.name + ".ext"'/>
  </a>
</b:if>
</li>
</b:loop>
</ul>
<b:include name='quickedit'/>
</div>
</b:includable>

Lo mismo podemos hacer con las etiquetas que se muestran debajo de los posts, esto lo vamos a encontrar en:

<b:includable id='post' var='post'>

Por defecto, el código de esa parte es el siguiente:

<b:if cond='data:post.labels'>
<data:postLabelsLabel/>
<b:loop values='data:post.labels' var='label'>
 <a expr:href='data:label.url' rel='tag'>
   <data:label.name/>
 </a>
 <b:if cond='data:label.isLast != "true"'>,</b:if>
</b:loop>
</b:if>

Como se ve, es muy similar al anterior pero, no es una lista HTML sino que se escriben una al lado de la otra así que eliminamos el carácter separador (la coma) y, nuevamente, reemplazamos el texto <data:label.name/> por la imagen:

<img expr:src='"http://nuestro_servidor/" + data:label.name + ".ext"'/>

En este caso, podemos crear una variante, utilizar una imagen personalizada y además, el texto, uno al lado del otro:

<img expr:src='"http://nuestro_servidor/" + data:label.name + ".ext"'/> <data:label.name/>