Todas las plantillas de Blogger tienen (o deberían tener) un código en el <head> que es el que utiliza el servicio para agregar una serie de etiquetas extras, scripts que controlan los widgets, feeds, etc:
<b:include data='blog' name='all-head-content'/>
Hace un tiempo mostraba en una entrada que habían agregado una etiqueta nueva que podía verse si mirábamos el código fuente de las páginas individuales del blog:
<link rel="image_src" href="URL_imagen" />Si en la entrada hay imágenes, esa etiqueta contiene la dirección URL de una miniatura de la primera imagen, por ejemplo, dice algo así:
<link rel="image_src" href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg_Gf8DroI1SLblArr8oH_Tq64Ee2Lk2PA46MmHkL0yPMW-iuzDs7jFYwkoZCS3KfoIFkaXBZDvqzG9AX261XfLsH-eS9aDMuL51FnvfJuhvKS6v40AylmxnvL6Hf8MHshdB-X0/s72-c/tragichistory.png" />
Es una miniatura generada de manera automática y Blogger la usa cuando compartimos algo en Facebook o cuando agregamos un elemento Lista de blogs y establecemos la opción de mostrar miniatura pero, aparentemente, sólo funciona si la imagen ha sido alojada en Blogger mismo y no en otro servidor.
Simplemente, toma la URL de la imagen original que hayamos insertado y cambia el famoso directorio que indica su tamaño, apuntando a uno llamado s72-c que, obviamente, crea una miniatura de 72x72:
http://3.bp.blogspot.com/blablabla.../s00/tragichistory.png
http://3.bp.blogspot.com/blablabla.../s72-c/tragichistory.png
Aunque ese dato no es accesible de manera directa, al ser parte del código fuente, es posible leerlo utilizando JavaScript y manipularlo de alguna manera.
Como todo, dependerá mucho de gustos y necesidades. Partiendo de una plantilla Mínima, en cada post he colocado una imagen oculta:
Simplemente, toma la URL de la imagen original que hayamos insertado y cambia el famoso directorio que indica su tamaño, apuntando a uno llamado s72-c que, obviamente, crea una miniatura de 72x72:
http://3.bp.blogspot.com/blablabla.../s00/tragichistory.png
http://3.bp.blogspot.com/blablabla.../s72-c/tragichistory.png
Aunque ese dato no es accesible de manera directa, al ser parte del código fuente, es posible leerlo utilizando JavaScript y manipularlo de alguna manera.
Como todo, dependerá mucho de gustos y necesidades. Partiendo de una plantilla Mínima, en cada post he colocado una imagen oculta:
<img src="unaImagen" style="display:none;" />Que es la que usaré en la plantilla como fondo del DIV llamado content-wrapper así que voy a editarla y colocar la regla de estilo antes de </b:skin>:
#content-wrapper {background: transparent url() no-repeat left 50%;}Y antes de </head> pondré un condicional que coloque una imagen genérica en todas las páginas que no sean entradas:
<b:if cond='data:blog.pageType != "item"'>
<style>
#content-wrapper {background-image: url(imagenXdefecto);}
</style>
</b:if>Inmediatamente después, otro condicional con un script que cree una regla de estilo, utilizando la imagen oculta como fondo de las páginas individuales:
<b:if cond='data:blog.pageType == "item"'>
<script type='text/javascript'>
//<![CDATA[
// buscamos la imagen que haya en la etiqueta LINK
var laIMG = "";
var links = document.getElementsByTagName('link');
for ( var i = 0; i < links.length; i ++ ) {
if(links[i].rel=="image_src") { laIMG = links[i].href; }
}
// si hay una, la usamos como fondo
if(laIMG!="") {
// cambiamos la URL para que use el tamaño original y no la miniatura
laIMG = laIMG.replace("s72-c","s00");
// la regla de estilo será #content-wrapper {background-image:url(laImagen);}
var regla = "#content-wrapper {background-image:url(" + laIMG + ");} ";
// agregamos una etiqueta STYLE
var nuevo = document.createElement("style");
nuevo.setAttribute("type", "text/css");
if(nuevo.styleSheet){
// agregamos la regla de estilo en Internet Explorer
nuevo.styleSheet.cssText = regla;
} else {
// agregamos la regla de estilo en el resto de los navegadores
nuevo.appendChild(document.createTextNode(regla));
}
document.getElementsByTagName('head')[0].appendChild(nuevo);
}
//]]>
</script>
</b:if>
3 comentarios:
¡Genial entrada! Y excelente explicación.
Me alegra que le guste :-)
Muy bien! me ayudo mucho y lo que buscaba...
¿Quiere dejar un comentario?
recuerde que los comentarios están siendo moderados y serán publicados a la brevedad ...
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 ...