Vagabundia: Fondos diferentes con las miniaturas de Blogger

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:

<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 != &quot;item&quot;'>
<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 == &quot;item&quot;'>
<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>

Vagabundia

Páginas

08 noviembre 2010

Fondos diferentes con las miniaturas de Blogger

3 comentarios: