Hace ya un tiempo vimos cómo editar los posts de blogger dependiendo del orden en el que se encontraran. Hoy vamos a realizar una técnica parecida para editar los posts dependiendo de la categoría.
Idea inicial
Para hacerlo inicialmente pensé en algo así, buscando <b:includable id='post' var='post'> reemplazando:
<div class='post hentry' ...>Por:
<div class='post hentry<b:if cond='data:post.labels'> has-tags<b:loop values='data:post.labels' var='label'> tag-<data:label.name/></b:loop><b:else/> no-tags</b:if>'>Y su correspondiente </div> (encima de un </b:includable>) por >/div<
Así podríamos usar CSS para hacer, por ejemplo, que todos los posts de una etiqueta llamada link tuvieran un símbolo representativo a la izquierda del título:
.tag-link .post-title:before {
content: "";
display: inline-block;
vertical-align: middle;
width: 25px;
height: 25px;
background: #eee url(http://4.bp.blogspot.com/-N9b72FNobJ4/UK-iWESa4jI/AAAAAAAAAdk/xUOTSzhvQJk/s16/link.png) no-repeat center;
border-radius: 50%;
box-shadow: 0 1px 2px rgba(0, 0, 0, .3);
}¿Y cuál es el problema?
Ésto añade una clase llamada tag-[nombreetiqueta] al post (además de una clase has-tags o no-tags dependiendo de si tiene o no etiquetas). Funcionará bien si todas tus etiquetas tienen una sola palabra.
Pero… ¿Y si nombreetiqueta tiene espacios?. Por ejemplo, si tuvieramos una etiqueta llamada fotos bonitas, con el código anterior la clase nos quedaría así: class="post hentry tag-etiqueta1 tag-fotos bonitas". Como comprenderéis este no es el efecto que deseamos.
La solución
La única solución eficaz contra este problema es usar condicionales y mostrar sólo algunas etiquetas. Es decir: poner en condicionales sólo las clases que nos interesan para editar, y editar su nombre para ello. Es un código engorroso y repetitivo, pero es lo que hay, y creo que merece la pena. Recordad reemplazar NOMBRE ETIQUETA 1 por lo correspondiente, y al igual en nombreetiqueta1.
<div class='post hentry<b:if cond='data:post.labels'> has-tags<b:loop values='data:post.labels' var='label'><b:if cond='data:label.name == "NOMBRE ETIQUETA 1"'> tag-nombreetiqueta1</b:if><b:if cond='data:label.name == "NOMBRE ETIQUETA 2"'> tag-nombredeetiqueta2</b:if></b:loop><b:else/> no-tags</b:if>'>Entendiendo el concepto
Esta parte la hago porque sé que el código puede parecer lioso (los > nos vuelven locos), y más con la falta de espacios. Creo que viene bien para que si alguien tiene interés en aprender por qué funciona, le pueda resultar más fácil. Como siempre, si alguien se queda con alguna inquietud o no sabe cómo implementarlo, que lo pregunte en un comentario. Lo primero que hacemos es convertir el <div> inicial en entidades (los < pasan a ser < y los > pasan a ser >), para que blogger no los trate más como bloques, sino como HTML plano.
Ésto nos permitirá hacer una comprobación (<b:if>) y un loop dentro del propio elemento, iterando sobre las etiquetas del post.
Por poder, se podría poner con tanto espacio y comentario en la plantilla, pero es si cabe más engorroso. La forma tan rara de poner los comentarios es para evitar crear espacios innecesarios en la plantilla (blogger no muestra esos comentarios en la web), pero manteniendo el código legible.
<div class='post hentry<!--
Comprobamos si el post tiene etiquetas
--><b:if cond='data:post.labels'><!--
Si las tiene, añadimos la clase has-tags y hacemos el loop
--> has-tags<!--
Hacemos el loop
--><b:loop values='data:post.labels' var='label'><!--
Si la etiqueta tiene un nombre especificado añadimos la clase
--><b:if cond='data:label.name == "NOMBRE ETIQUETA 1"'> tag-nombreetiqueta1</b:if><!--
repetimos tantas veces como sea necesario (este ejemplo va con "fotos bonitas"):
En el CSS Podríamos poner:
.tag-fotosbonitas { background: red; }
Para que todos los posts con la etiqueta fotos-bonitas tengan el fondo rojo
--><b:if cond='data:label.name == "fotos bonitas"'> tag-fotosbonitas</b:if><!--
Acabamos el loop
--></b:loop><!--
Si no tiene etiquetas le añadimos la clase no-tags
--><b:else/> no-tags</b:if>'>