martes, 6 de septiembre de 2011

Condicionar widgets según etiquetas

Condicionar algo significa que en función de cierto dato, ocurrirán ciertas cosas o no. En Blogger, las condiciones están limitadas a que ese dato a evaluar sea alguno a los que ellos nos permiten acceder y no cualquier otro de allí que ciertas ideas no puedan ser aplicadas de manera simple porque carecemos de esa información y por lo tanto, debemos usar JavaScript que es el otro método disponible.

No es lo mismo en absoluto ya que, cuando se condiciona usando las etiquetas propias de Blogger, la página web resultante se crea en función de esas condiciones, si por ejemplo, decidimos que tal parte no forme parte de ella, el código fuente resultante, eso que muestra el navegador, no lo incluirá. Por el contrario, usando JavaScript, sólo podemos "ocultar" cosas pero eso que ocultamos, será parte de la página y se ejecutará aunque no lo veamos.

Partiendo de la idea de colocar una imagen asociada a una etiqueta en la sidebar, Adrián J. Messina preguntaba si era posible que, en lugar de mostrar una imagen, lo que se condicionara fuera un widget o gadget.

Como para hacer eso necesitamos conocer la etiqueta de esa entrada y este dato sólo es accesible dentro del LOOP que muestra los posts, no queda otro remedio que usar JavaScript lo que implica que sólo podremos mostrarlo u ocultarlo pero siempre estará allí así que su contenido será cargado por lo que es aconsejable que sean cosas relativamente livianas.

Hacer esto implica varios pasos. Para empezar, vamos a guardar en alguna variable, el dato que necesitamos; hay que ir a la plantilla y buscar:
<b:includable id='post' var='post'>
Allí, en alguna parte, veremos un código de Blogger que es el que muestra las etiquetas de la entrada y que tiene distintos formatos pero, básicamente, dice algo así:
<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>
donde data:label.name es la etiqueta de la entrada; allí es donde deberemos guardar ese dato; por ejemplo:
<b:loop values='data:post.labels' var='label'>
<script>var 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 != "true"'>,</b:if>
</b:loop>
Esto está pensado para entradas donde sólo hay una etiqueta, si son varias, empieza a carecer de sentido y debería pulirse el método, usar arrays o cualquier otro sistema.

Ahora, necesitamos agregar lo widgtes, uno, dos, los que queramos. Lo hacemos como lo hacemos siempre y luego, los buscamos; cualquiera sea siempre tendrá un ID que los identifica:
<b:widget id='XXXXX' locked='false' title='XXXXXXXX' type='XXXX'>
.......
</b:widget>
Por defecto, los ocultaremos; suponiendo que uno de ellos es un elemento HTML cuyo id es HTML7 y el otro es una lista de enlaces cuyo id es LinkList3, pondremos lo siguiente antes de </head>
<style>
#HTML7 {display:none;}
#LinkList3 {display:none;}
</style>
Con esto, ya estamos listos para condicionar la visibilidad de los gadgets y se me ocurre que lo mejor es agregar el script dentro de cada uno de ellos. Suponiendo que el elemento HTML sólo se mostrará cuando la etiqueta sea "Fotos"; haríamos algo así:
<b:widget id='HTML7' locked='false' title='XXXXXXXX' type='HTML'>
<b:includable id='main'>
<script>
//<![CDATA[
if(etiquetaPOST=="fotos") {
document.getElementById("HTML7").style.display = "block";
}
//]]>
</script>
.......
</b:includable>
</b:widget>
Esto, sólo es uno de muchos métodos que deberán ser adaptados a cada situación; como dije antes, si las entradas poseen varias etiquetas habría que buscar variantes como usar arrays o variables auxiliares en el LOOP, por ejemplo:
<script>
etiquetaPOST=&#39;<data:label.name/>&#39;;
if(etiquetaPOST==#39;Fotos#39;) {
flagFotos = 1;
} else if (etiquetaPOST==#39;Videos#39;) {
flagVideos = 1;
}
</script>
y en el widget colocaríamos:
if(flagFotos==1) {
document.getElementById("HTML7").style.display = "block";
}
Sea como sea, siempre hay que tener en cuenta que mostrar ese widget oculto es algo que deberá hacerse una vez que se haya creado así que, si la sidebar está a la izquierda y se genera ANTES que los posts, la condición deberá colocarse en otro lado, al final de la plantilla o en el mismo LOOP de los posts, caso contrario, no funcionará porque estaremos evaluando un dato que aún se desconoce.

Claro, todo se resolvería si Blogger nos permitiera acceder a ese dato desde cualquier parte de la plantilla pero, eso es pedirle peras al olmo.

No hay comentarios:

Publicar un comentario