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.

31 comentarios:

Jaime Trujillo Escobedo  

Jmiur, lo voy a probar, hacía tiempo que buscaba un truco parecido, !y ya lo encontré! Muchas gracias ;) ¡Saludos! :D

Responder
[ :: WwW.FloWKaletA.CoM :: ]  

hola, entro a este blog xk encuentro las herramientas k necesito para tener mas experiencia en creacion de blog y este blog es de gran ayuda, pero ase unos dias ice una pregunta para k alguien me lo pueda responder, aun me hace falta la respuesta.
Quiero saber como puedo poner una imagen a cambio de "Entradas Antiguas", "Entradas Recientes" y "Pagina Principal", que aparece ne todo blog cuando vas actualisando el contenido. espero alguien me pueda yaudar gracias

Responder
JMiur  

Saludos, Jaime. Me alegro que te sea útil.

Responder
JMiur  

Fíjate en esta entrada del Bllog de Gem@

Responder
JCAN  

Gracias JMiur!!

Ya voy a probar el código. Me había resignado a no poder hacerlo hasta que sacaras algo parecido que respondiera mi pregunta.

Pues no tuve que esperar. En verdad que sin tu ayuda no hubiese podido adelantar mi blog.

Saludos desde Calgary!

Juan

Responder
JMiur  

Saludos, JCan. Espero que sea útil.

Responder
Dave Strife  

Una pena que mi plantilla sea tan odiosa, si no buscaría buenas imágenes para las etiquetas. Muy buen post JMiur, lo tendré en cuenta por si cambio de plantilla.

Responder
Siamo  

"El código ID del nuevo widget "HTMLXX" no es válido para este tipo: HTML"

Me salta ese error. La verdad es que el truco seria de gran ayuda, pero por desgracia no funciona. Ya que consulto, intento "sumar" algo. Se podria hacer que solo aparezca esa imagen cuando estes "dentro" de la entrada, en la sidebar?

Responder
JMiur  

Por supuesto, si escribes id='HTMLXX' te dará un error. XX es el número de orden del elemento agregado.

Responder
Adrián J. Messina  

Hola Jmiur, me acerco al tema pero no lo resuelvo.
Mi duda es , ¿y si en vez de que muestre imágenes según etiqueta en la Sidebar, muestre un widget? ¿Cómo se escribiría en el script?

Responder
JMiur  

No comprendo la pregunta ¿Quieres que un determinado widget se muestre sólo si la entrada tiene cierta etiqueta?

Responder
Beliacuario  

Por alguna razón solo funcionó en una plantilla básica, no funcionó en la plantilla que quiero usar. Creo que el problema esta en los labels pero no tengo idea de donde debo cambiar. Aquí te dejo mi blog para que lo veas, espero que me puedas ayudar, gracias.
http://blogdepruebadub.blogspot.com/

Responder
Adrián J. Messina  

¡Exactamente!

Responder
JMiur  

Adrián:

El concepto sería similar y todo debera hacerse con JavaScript. Sólo te doy la idea general.

Primero, en el loop que muestra las entradas debe haber alguna función que detecte esa etiqueta que quieres filtrar y si existe, establecer una variable global:

etiquetaPOST=&#39;<data:label.name/>&#39;;
if(etiquetaPOST=="NOMBRE") { var flag = 1; }

Luego, por defecto, ese widget debería estar oculto con CSS usando style='display:none'

Por último, en el widget debería haber un script que cambaira el estilo si el flag es 1:

if(flag==1) {
document.getElementById("EL_ID_DEL_WIDGET").style.display = "block";
}

Todo esto, dicho así un poco en el aire, claro.

Responder
JMiur  

Beliacuario:
En el código fuente, no veo que en ninguna aprte se establezca el valor de etiquetaPOST que es algo que debe hacerse en el LOOP de los posts:
<script>etiquetaPOST=&#39;<data:label.name/>&#39;;</script>

Responder
Adrián J. Messina  

¡Voy a jugar a ver que me sale!
Cualquier cosita te aviso,
Un abrazo.

Responder
Adrián J. Messina  

¡Jorge lo logré!
Entendí a la perfección, es más escribí más "Flags" en el script ya que debo usarlo con otros widget asociados a diferentes etiquetas.
Realmente fabuloso, sería de gran ayuda para muchos si haces una entrada al respecto de esto.
Así al airse, y toda una genialidad la tuya.
Un abrazo.

Responder
JMiur  

Ud me hace trabajar, Don Adrián :D

Veremos que puedo hacer al respecto :D

Responder
Adrián J. Messina  

:D

Responder
Beliacuario  

No he conseguido hacer que funcione, he puesto el codigo en lo que creo que es el LOOP de los post pero nada :((

Responder
JMiur  

No sé que has hecho ni se dónde lo has hecho.

Responder
Beliacuario  

No me deja poner el código no se porque, siempre pensaba que dejaba mi comentario pero parece que no es así, de todas formas mejor descarge todo el diseño y aquí está, parece que algo estoy haciendo mal o algo le falta para que puedan verse las imagenes

http://dl.dropbox.com/u/9589559/template-1024518673142549148%284%29.xml

Responder
JMiur  

Debo verlo online y funcionando. Si el script está en un elemento HTML, no es parte de la plantilla.

Responder
Beliacuario  

Aquí lo tengo funcionando
http://blogdepruebadub.blogspot.com/

Responder
JMiur  

Eso ocurre porque en tu plantilla, pese a que la sidebar está a la derecha y los posts a la izquierda, en el código, primero cargas la sidebar y luego los posts por lo tanto, cuando se ejecuta la función, la variable etiquetaPOST no está definida ya que aún no se sabe de qué post se trata.

Lo lógico es que se carguen al revés, primer los posts y luego la sidebar.

Responder
Jose MaQuel  

Un saludo.

Este elemento html que muestra imágenes asociadas a entradas por etiquetas está muy bién, si señor ... pero, una consulta, cómo y dónde puedo controlar el tamaño en que se muestran las imágenes ... y quería saber si estas podrían mostrarse del mismo modo en las páginas que muestran la relación de entradas por etiquetas, las que te dicen "mostrando entradas con la etiqueta ..."

En fin, muchas gracias de verdad ...

JMiur  

El tamaño de las imágenes depende de las que cada uno quiera usar porque son personales:
imgsCategorias=new Array(
'URL_imagenCATEGORIA1',
............

No hay un condicional de Blogger que permita detectar las paginas de etiquetas. Son de tipo index, al igual que los archivos, etc.

Responder
Jose MaQuel  

Vaya, ya estaba comprobando esto que dices ... ajustaré entonces el tamaño de las imágenes en origen ... pensé que podríamos introducir valores para "width" y "height" en algún lugar de este truco.

Para las páginas de etiquetas, encontré algo que quizá podría adaptarse a esto, aunque ya he probado a usar condicionales sin éxito hasta ahora, si tienes un rato y te hace la curiosidad es aquí:

http://ciudadblogger.com/2011/08/mostrar-una-cabecera-diferente-en-las.html

Muchas gracias por tus indicaciones en cualquier caso y un saludo.

JMiur  

Por supuesto que puedes usar width y height, tanto en el script como en el CSS pero, tratándose de imágenes particulares, lo razonable es crearlas con el tamaño con el que van a mostrar.

Este tipo de condición:
<b:if cond='data:blog.url != &amp:quot;URL_etiqueta&amp:quot;'>
funcionará pero parcialmente ya que una etiqueta peude tener una dirección como esta:

http://vagabundia.blogspot.com/search/label/Blogger

o como estas otras:

http://vagabundia.blogspot.com/search/label/Blogger?max-results=5
http://vagabundia.blogspot.com/search/label/Blogger?updated-max=2012-09-12T00:05:00-03:00&max-results=5&start=5&by-date=false

Jose MaQuel  

Todo esto parece sencillo pero no va bién ...
Cada imagen asociada se muestra en las entradas de su etiqueta correspondiente pero repetida, osea dos veces, una debajo de la otra ...
No se porqué ...
A revisar la plantilla supongo o algo en blogger al llamar la url de las imágenes ...

JMiur  

No veo que esté ocurriendo tal cosa en tu blog. Sólo veo una en el elemento HTML4 donde está el script.

Responder

¿Quiere dejar un comentario?

recuerde que los comentarios están siendo moderados y serán publicados a la brevedad ...

Todos los archivos y demos alojados en Fileden han sido redireccionados y deberían estar funcionando correctamente.
De todos modos, también puede accederse a ellos a través de SkyDrive

Nota: sólo los miembros de este blog pueden publicar comentarios.

Si le gusta ir a lo seguro utilice este botón para abrir los comentarios en una ventana modal en esta misma pagina.

Si añora tiempos idos, use este enlace para agregar un comentario al viejo estilo ...

 
CERRAR