lunes, 2 de mayo de 2011

Json: Detectar la primera imagen de cada entrada

Hace unos dias, Gem@ comentaba que en algunos casos, utilizando Json para mostrar resúmenes de entradas, la miniatura que se mostraba era la imagen por defecto aún cuando esa entrada tuviera una imagen.

Algo similar preguntaba shinigami : "¿cómo sabe el sistema qué imagen va a tomar como miniatura que represente la entrada en gadgets o modificaciones como entradas populares, últimas entradas, entradas relacionadas, etc?"

Yo no puedo contestar esa pregunta porque desconozco el método que usa Blogger pero, ese es un dato que se incluye de manera automática y es visible en el código fuente generado (no en la plantilla) ya que se encuentra en una etiqueta:
<link rel="image_src"  href="http://2.bp.blogspot.com/......./s72-c/......." />
En principio, la imagen que toma es la primera que se encuentra en la entrada pero, algunas veces es otra o ninguna; esto puede ser porque el post se haya editado o actualizado o porque se le da lagana; no hay manera de controlar eso sin embargo, podríamos evitar el problema modificando los scripts para que, en lugar de leer ese dato, se lea la lista de imágenes de la entrada y entonces, seleccionar una. Para eso, podemos adaptar parte de un script que mostraba Ariane en un truco que usaba Json para mostrar entradas con ciertas etiquetas.

Supongo que hay muchas variantes de estos scripts pero, en general, usando Json, la imagen de la miniatura la detectábamos así:
if ("media$thumbnail" in entry) {
postimg = entry.media$thumbnail.url;
} else {
postimg = imgxdefecto;
}
donde:
imgxdefecto es la URL de la imagen que usaríamos si no se encuentra ninguna
postimg es la URL de la imagen a mostrar

Lo que hace ese código es verificar si existe el dato entry.media$thumbnail.url que es esa imagen que define Blogger y, si no existe, se usa la que nosotros hayamos estabelcido por defecto.

Esa es la parte que cambiaremos así:
var s, a, b, c, d;
postimg = imgxdefecto; // esta es la imagen por defecto que usaremos

s = entry.content.$t; // leemos el código HTML de la entrada
a = s.indexOf("<img"); // buscamos la etiqueta IMG
b = s.indexOf("src=\"",a); // buscamos el atributo SRC de esa etiqueta
c = s.indexOf("\"",b+5); // buscamos el final del atributo SRC
d = s.substr(b+5,c-b-5); // leemos el valor del atributo SRC

// si hay una etiqueta IMG ( a!=-1 ), y tiene un atributo SRC ( b!=-1 ) con un valor ( d!="" )
if((a!=-1)&&(b!=-1)&&(c!=-1)&&(d!="")) {
// quiere decir que encontramos la URL de la primera imagen
postimg = d;
}

No hay comentarios:

Publicar un comentario