Colocar una imagen asociada a una etiqueta en el sidebar

Juan me preguntaba si era posible colocar una imagen en la sidebar que identificara la etiqueta a la que correspondía una entrada. Es decir, si un post tuviera la etiqueta ANIMACIÓN se mostrase una imagen específica y si tuviera la etiqueta BLOGGER se mostrase otra, etc, etc, etc.

Debería ser fácil si tuviéramos ese dato pero sólo es accesible desde un único lugar, desde el mismo post, así que primero deberíamos leerlo y guardarlo para usarlo cuando sea necesario.

Es que, si tenemos la sidebar a la derecha de las entradas, cuando leemos el dato, la sidebar aún no está así que no podemos poner nada y si la tenemos a la izquierda, cuando tenemos que mostrar la imagen, aún no sabemos la etiqueta así que, sea donde sea que se nos ocurra mostrar la imagen, debemos hacerlo en varios pasos. Se me ocurre que debe haber varias formas de hacerlo y esta sólo es una.

Primero que nada, creamos una variable de JavaScript que será la que contendrá esa etiqueta. Ponemos entonces esto antes de </head>:

<script>var etiquetaPOST;</script>

Ahora, deberíamos buscar la parte del código de los posts donde se leen y muestran las etiquetas de cada entrada así que expandimos los artilugios y buscamos esto:

<b:loop values='data:post.labels' var='label'>
  <script>etiquetaPOST=&#39;<data:label.name/>&#39;;</script>
  <a expr:href='data:label.url' rel='tag'><data:label.name/></a>
  <b:if cond='data:label.isLast != &quot;true&quot;'>,</b:if>
</b:loop>

y agregamos eso indicado en color que hará que se guarde la etiqueta en esa variable, con una limitación, si la entrada tiene más de una, guardará la última; podríamos modificarlo para que guarde la primera pero, aún así, sólo guardará una.

Ya tenemos el dato, ahora, podemos usarlo en cualquier otra parte de la plantilla y poner la imagen con otro script pero, el procedimiento será distinto si lo vamos a poner en una sidebar a la izquierda o a la derecha de la entrada. Empecemos con esta última que es el caso más común.

Agregamos un elemento HTML, le damos título para tenerlo identificado y allí, ponemos esto:

<script type='text/javascript'>
  listaCategorias=new Array('CATEGORIA1','CATEGORIA2','CATEGORIA3');
  imgsCategorias=new Array(
    'URL_imagenCATEGORIA1',
    'URL_imagenCATEGORIA2',
    'URL_imagenCATEGORIA3'
  );
  cual=listaCategorias.indexOf(etiquetaPOST);
  if(cual==-1) {
    laImagen='URL_imagenPORDEFECTO';
  } else {
    laImagen=imgsCategorias[cual];
  }
  salida='<img id="logocat" src="' + laImagen + '"/>';
  document.write(salida);
</script>

Donde, reemplazamos CATEGORIA1, CATEGORIA2 y CATEGORIA3 por los nombres de las nuestras y, si tenemos más, ponemos cada una de ellas entre comillas simples y separadas por comas.

La lista de imágenes se corresponde con las categorias, y hacemos lo mismo, colocamos la URL de cada una de ellas, entre comillas simples y separadas por comas.

Además, para evitar problemas o por si no tenemos todas las categorías listadas, colocamos en URL_imagenPORDEFECTO una imagen genérica, la que se mostrará por defecto en caso de no encontrarse ninguna otra.

Guardamos, vamos a la plantilla y expandimos los artilugios para editar el gadget que hemos creado para que quede de esta forma:

<b:widget id='HTMLXX' locked='false' title='XXXXXXXX' type='HTML'>
<b:includable id='main'>
  <b:if cond='data:blog.pageType == "item"'>
    <div class='widget-content'><data:content/></div>
  <b:else/>
    <style>#HTMLXX {display: none;}</style>
  </b:if>
  <b:include name='quickedit'/>
</b:includable>
</b:widget>

De esta manera, nos aseguramos que sólo se muestre en las páginas individuales.