Como poner imágenes o iconos distintos según la categoría

¡ Artículo publicado en el blog El Balcón de Jaime, que pese a ser un blog terminado, es uno de los mejores en truvos blogger. ! Ve la entrada en su blog original.

Imágenes diferentes según la etiqueta bajo el título de las entradas

Lo que vamos a conseguir con este truco que se me ha ocurrido es algo muy útil, que nos puede ayudar a roganizar el blog de otra forma, a crear un índice, a destacar las entradas de una etiqueta o categoría específica...

Básicamente lo que haremos es introducir un código en la plantilla que permitirá mostrar una imagen (o un enlace / texto) en especial en todas las entradas de una etiqueta.

Pongamos un ejemplo para entenderlo mejor. Si yo tengo un blog con las siguientes etiquetas: peces, perros y gatos, insertaré en el código el nombre de cada animal y una foto que después aparecerá en las entradas con esa etiqueta para describirlo.

En la siguiente imagen puedes ver como cada entrada tiene su correspondiente imagen (la primera entrada tiene la etiqueta "peces", la segunda "perros" y la tercera "gatos").

Las fotos aparecerán en todos los artículos con la etiqueta "perros, gatos o peces" respectivamente, lo que ayudará bastante a tus lectores.

Diseño>Edición de HTML>expandimos artilugios

Busca este bloque de código:

<b:if cond='data:post.title'>
<h3 class='post-title entry-title'>
<b:if cond='data:post.link'>
<a expr:href='data:post.link'><data:post.title/></a>
<b:else/>
<b:if cond='data:post.url'>
<a expr:href='data:post.url'><data:post.title/></a>
<b:else/>
<data:post.title/>
</b:if>
</b:if>
</h3>
</b:if>

Y justo debajo añade esto:

<b:loop values='data:post.labels' var='label'>
<b:if cond='data:label.name == &quot;ETIQUETA&quot;'>
<img align='right' src='URL DE LA IMAGEN'/>
</b:if>
<b:if cond='data:label.name == &quot;ETIQUETA&quot;'>
<img align='right' src='URL DE LA IMAGEN'/>
</b:if>
<b:if cond='data:label.name == &quot;ETIQUETA&quot;'>
<img align='right' src='URL DE LA IMAGEN'/>
</b:if>
<b:if cond='data:label.name == &quot;ETIQUETA&quot;'>
<img align='right' src='URL DE LA IMAGEN'/>
</b:if>
<b:if cond='data:label.name == &quot;ETIQUETA&quot;'>
<img align='right' src='URL DE LA IMAGEN'/>
</b:if>
<b:if cond='data:label.name == &quot;ETIQUETA&quot;'>
<img align='right' src='URL DE LA IMAGEN'/>
</b:if>
</b:loop>

Reemplaza en el código:

ETIQUETA por la etiqueta que desees. Ten en cuenta que tienes que escribirla tal y como aparece en las entradas del blog (con mayúsculas o minúsculas).

URL DE LA IMAGEN por la dirección del icono o la imagen que representará a la etiqueta que incluyas.

Si deseas añadir más etiquetas y por tanto, más imágenes, utiliza esta línea tantas veces como quieras:

<b:if cond='data:label.name == &quot;ETIQUETA&quot;'>
<img align='right' src='URL DE LA IMAGEN'/>
</b:if>

Pero recuerda que debes pegarla siempre antes del cierre </b:loop>.

Las imágenes aparecerán a la derecha del título pero puedes centrarlas o alinearlas a la izquierda cambiando align='right'por align='center' o align='left'.

Finalmente guarda la plantilla: