Blogger: Usando imágenes en lugar de etiquetas
La pregunta concreta es esta:
¿Hay alguna forma de reemplazar los textos de las etiquetas por imágenes? Ojo, no hablamos de cambiar el texto "Etiquetas" que se ve al pie de página de cada post, eso es sencillo, basta buscar el código: <data:postLabelsLabel/> y poner en su lugar una imagen o un texto personal.
Tampoco se trata de anteponer un ícono a la lista de etiquetas, eso también se resuelve con sencillez anteponiendo la imagen a: <data:label.name/>
Lo que se quiere es asociar el nombre de una etiqueta con una imagen específica, es decir, si mi etiqueta es "Perro", mostrar un perro y si es "Elefantes rosados", mostrar un elefante rosado.
Y bien, la respuesta es sí, se puede, casi diría que es sorprendentemente sencillo así que le contesté a Gem@ su mail dándole la posibilidad de explicárselo personalmente o publicarlo. Rápidamente respondió: "Me parece ideal que lo publiques, creo que puede interesar a todos ... ¿A qué estás esperando?".
Eso me pasa por preguntar. Dejé mis jueguitos y me puse a hacer lo que me ordenó
Para resolver el tema debemos partir de una limitación: dónde alojar las imágenes a utilizar. Si las subimos a Blogger, las direcciones URL que tendremos serán, como mínimo, estrafalarias; no tenemos forma de deducirlas, cada una es diferente y NECESITAMOS SABER dónde están las imágenes, lograr que la dirección URL sea algo fijo donde sólo cambie el nombre del archivo y no el resto del dominio ni el directorio donde están guardadas.
No podemos usar Blogger y por la misma razón no podemos usar ImageShack sin embargo, hay varios servicios que establecen una dirección fija: Photobucket, Fileden, Google Pages, Hostfile, etc. En algunos de ellos incluso podemos crear carpetas, de esta manera, todas las imágenes tendrán la misma estructura, por ejemplo:
http://i140.photobucket.com/albums/r25/JMiur/Labels/nombre_Archivo1.ext
http://i140.photobucket.com/albums/r25/JMiur/Labels/nombre_Archivo2.ext
Entonces, como primera medida, subimos las imágenes a uno de esos servidores, todas con el mismo formato y extensión (jpg, png, gif); lo único que debe cambiar es el nombre del archivo que deberá ser exactamente igual al nombre de la etiqueta; es decir, tendremos alojadas tantas imágenes como etiquetas y todas las direcciones serán similares:
Si la etiqueta es perro:
una imagen PNG estará en http:un_servidor/perro.png
Si la etiqueta es elefantes rosados:
una imagen PNG estará en http:un_servidor/elefantes rosados.png
Los tamaños de las imágenes no tienen importancia, eso dependerá de cómo queremos mostrarlas, pueden ser todas iguales o todas diferentes.
Debemos saber que hay dos lugares del blog donde se muestran las listas con las etiquetas: debajo de cada post o en un elemento Labels en la sidebar, el header o el footer. Empecemos con este último.
Blogger permite agregar varios elementos Labels así que, si ya tenemos uno no hace falta sacarlo, en todo caso, esa es una decisión posterior. Vamos a la Plantilla y en Elementos de la página, agregamos el elemento y lo configuramos como se nos ocurra. Guardamos y ahora vamos a Edición HTML y marcamos Expandir artilugios.
Buscamos el código de ese elemento recién agregado que, será más o menos este:
<b:widget id='Label2' locked='false' title='El_Titulo' type='Label'>
<b:includable id='main'>
<b:if cond='data:title'> <h2><data:title/></h2> </b:if>
<div class='widget-content'>
<ul>
<b:loop values='data:labels' var='label'>
<li>
<b:if cond='data:blog.url == data:label.url'>
<data:label.name/>
<b:else/>
<a expr:href='data:label.url'>
<data:label.name/>
</a>
</b:if>
(<data:label.count/>)
</li>
</b:loop>
</ul>
<b:include name='quickedit'/>
</div>
</b:includable>
<ul>
<li>
... las etiquetas ...
</li>
</ul>
.sidebar ul.listaetiquetas {
... propiedades ...
}
.sidebar li.etiquetaimagen {
... propiedades ...
}<img expr:src='"http://nuestro_servidor/" + data:label.name + ".ext"'/>
<b:widget id='Label2' locked='false' title='El_Titulo' type='Label'>
<b:includable id='main'>
<b:if cond='data:title'> <h2><data:title/></h2> </b:if>
<div class='widget-content'>
<ul class='listaetiquetas'>
<b:loop values='data:labels' var='label'>
<li class='etiquetaimagen'>
<b:if cond='data:blog.url == data:label.url'>
<img expr:src='"http://nuestro_servidor/" + data:label.name + ".ext"'/>
<b:else/>
<a expr:href='data:label.url'>
<img expr:src='"http://nuestro_servidor/" + data:label.name + ".ext"'/>
</a>
</b:if>
</li>
</b:loop>
</ul>
<b:include name='quickedit'/>
</div>
</b:includable>

<b:includable id='post' var='post'>
Por defecto, el código de esa parte es el siguiente:
<b:if cond='data:post.labels'>
<data:postLabelsLabel/>
<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>
</b:if>
<img expr:src='"http://nuestro_servidor/" + data:label.name + ".ext"'/>

<img expr:src='"http://nuestro_servidor/" + data:label.name + ".ext"'/> <data:label.name/>























21 comentarios:
Tiene muy buena pinta , pero tendríamos que hacer este paso con cada imagen o habría algún otro método en un sólo paso?
Saludos
Las imágenes habrá que crearlas una por una y alojarlas pero el código es único, se pone tal cual está, en un bucle que lee las etiquetas, arma una dirección url y la muestra.
No tengo muy claro a que te refieres con eso de los pasos.
Muy bueno y gracias por este 'hack' JMiur.
Se me ocurre un pequeño cambio, ¿se puede incluir el 'title' en la imagen con el texto de la etiqueta? .. algo así como:
<img expr:src='"http://nuestro_servidor/" + data:label.name + ".ext"' title='"["+data:label.name+"]"'/>
Otra duda, ¿se puede controlar en el caso de no poder cargar la imagen (que no existe, servicio hosting caído, etc.) que aparezca el texto de la etiqueta?
Solrac:
Como siempre, muy buenas aclaraciones :)
Creo que debería ser:
expr:title='"["+data:label.name+"]"'
pero sería cuestión de probar.
O cualquier combinación:
expr:title='"Enlace a " + data:label.name'
Lo del texto alternativo, en teoría debería funcionar si hacemos lo mismo pero con el atributo ALT ya que este es el texto ALTernativo que se muestra cuando un objeto no es encontrado:
expr:alt='data:label.name'
También es cuestión de probar poniendo una etiqueta que no tenga la imagen creada.
opps ... ya no me acordaba del ALT :(
otra cosa ... sigo trabajando con el JSON para recuperar los títulos de los post anterior y posterior ... He conseguido que me funcione aunque debo depurarlo. Lo malo es que a medida que aumenten el número de post aumentará el tiempo de búsqueda.
Muy bueno como siempre ;) buscaré iconos para probar.
(Llevo dos días que me da la sensación que Google Pages se cae ¿has notado algo?)
Solucionado, me he excedido en el ancho de banda :(
Perdón JMiur , me confundí al formular mi pregunta , resuelto. ¡Gracias , ahora a intentar probar el hack con éxito!
Jejeje...muy sencillo y muy bien explicado! Prueba superada , compruébalo aquí jeje
Saludos
Solarc:
Eso nos pasa a todos :D
Gem@:
No he notado nada y eso del límite del ancho de banda es algo preocupante ¿Tienes idea de cómo puede hacerse para averiguar cuál es y cuánto estamos usando?
Markos:
Acabo de verlo y parece funcionar correctamente :D
.. hacer este tipo de cosas en Blogger es una proeza ... es increible lo que logras sin documentacion alguna // la verdad si no fuera por PHP (que como sabes estoy aprendiendo) no podria hacer nada para la web... como mucho cambiar el aspecto de un blog modificando los CSS // FELICITACIONES JMIUR
Las limitaciones son una desventaja de la cual hay que sacar provecho como se pueda :D
Olvidé comentarte aquí que mi prueba fue superada.
Para el ejemplo añadí los iconos en el footer de las entradas con tus recomendaciones siempre acertadas.
Gracias de nuevo :)
Vi tu post publicado así que ya me había enterado que todo había quedado resuelto :)
Hola!! como andas jmiur, me encanta tu blog, pero sinceramente no entiendo mucho como hacer para que me funcione este truco, ya que me encantaria hacerlo en mi blog, de hace mucho me vengo preguntando como hacer para poner una imagen diferente para cada etiqueta, estaria bueno, si podes, que me lo explicaras, pero por msn ya que te entenderia mejor, yo por las dudas te dejo mi msn y mi direccion de blog, MSN: sebastian_alejandro1992@hotmail.com
DIRECCION DE MI BLOG: http://sarguet.blogspot.com
espero que me lo puedas explicar! me sera de mucha utilidad, gracias de antemano, un saludo
Seba, envíame un mail y me explicas qué quieres hacer y donde ponerlo :)
vagabundia@gmail.com
bueno con practica se puede hacer te felicito por el manual esta fino tengo blogger espero ponerlo en practica en un futuro
Gracias
Ahora una cosa a mi me habian dicho q para cosa debia creear un blog nuevo
POR EJEMPLO: Postres(un blog) y mostrar. una tarta
Carnes(otro blog) y mostrar un fileteç
¿me entiendes?? con esto q tu dices¿tengo q tener un blog de cada dosa o me vale solo uno??(ya tengo casi todos,jajaj
Un besin
Lo explicado acá es para colocar en un blog, no hace falta tener varios. No sé cómo es la idea general que tienes así que no puedo aclarar nada más. Puede ser que lo que te hayan dicho tenga que ver con alguna otra cosa.
Vale gracias
Un saludo
Gracias por el hack, era algo que buscaba =).
actualmente configuro mi blog, y esto me va a servir. Saludos =).
¿Quiere dejar un comentario?
Utilice el formulario adjunto para comunicarse.
Enlaces