Blogger: Miniaturas cuadradas o rectangulares

Hay muchísimos scripts que usan Json para leer información de alguno de los feeds de Blogger y luego mostrarlos.

Generalmente, esos scripts nos permiten leer datos como el título, la URL de las entradas, hacer un resumen de estas y extraer una imagen asociada; los usamos para mostrar las últimas entradas, los posts relacionados, las etiquetas, etc.

En todos esos casos, lo que más dudas provoca es el tema de las imágenes.

Dependiendo del script que se use, esa imagen es extraída usando dos métodos distintos; en un caso, lo que se hace es leer el HTML de la entrada y buscar dentro de este una etiqueta IMG; generalmente, la primera que haya; de este modo, la imagen a mostrar será la imagen real que hayamos incluido y bastará re-dimensionarla con CSS o con atributos width y height para mostrar una miniatura.

Otra forma de hacer lo mismo es leer un dato del feed que es el que contiene esa miniatura creada automáticamente por Blogger:

if ("media$thumbnail" in entry) {
  postimg = entry.media$thumbnail.url;
} else {
  postimg = "URL_imagen_por_defecto";
}

Este método es el que suele generar dudas por varios motivos; primero, porque Blogger puede no generar esa imagen, tal vez porque el post fue editado, tal vez porque ... quien sabe. Es algo bastante común y son muchos los que se quejan de ello. Nada puede hacerse para resolverlo, no tenemos ninguna herramienta disponible para establecer cuál será esa miniatura. Quien tenga problemas constantes con eso, deberá usar el método alternativo.

Una segunda duda es el tamaño de esa imagen y allí sí tenemos algunas posibilidades ya que esas imágenes tienen el formato clásico de todas las que subimos a Blogger o Picasa donde todo lo que importa es saber que el tamaño de la imagen a ser mostrada, está definido por uno de los parámetros de esa URL; el que vemos justo antes del nombre; por ejemplo:

http://xxxxxxxxx/xxxxxxx/xxxxxxx/xxxxxxx/xxxxxxx/s320/demoIMGs_01.jpg

es una miniatura de 320 pixeles de ancho (o de alto si no es apaisada) y en el caso de las miniaturas de los feeds, ese dato dice: s72-c:

http://xxxxxxxxx/xxxxxxx/xxxxxxx/xxxxxxx/xxxxxxx/s72-c/demoimg.jpg

Todas estas son miniaturas de 72x72 y cuadradas que es lo que indica ese dato 72 y la letra c

Así que, dada cualquier imagen subida a Blogger o Picasa, basta cambiar ese parámetro para cargar una miniatura de otro tamaño o hacerla cuadrada agregándole -c:

Esta imagen original mide 680x935 y tiene esta dirección:
http://........../s000/demoimg.jpg



La miniatura que teóricamente usará Blogger será:
http://........../s72-c/demoimg.jpg


si no quisiera que fuera cuadrada, le quitaría el -c y como la imagen es más alta que ancha, tendrá 128 pixeles de alto:
http://........../s72/demoimg.jpg




si quisiera mostrar una cuadrada más grande, por ejemplo de 128x128:
http://........../s128-c/demoimg.jpg

por último, si quisiera mostrar una de 128 sin que se deformara:
http://........../s128/demoimg.jpg

Pero, el dato del feed me envia la cuadrada de 72x72 ¿es posible hacer que el script la cambie por otra?

Sí; bastaría agregar una línea extra en el código; por ejemplo, asi la reemplazamos por una de 128 que no sea cuadrada:

if ("media$thumbnail" in entry) {
  postimg = entry.media$thumbnail.url;
  postimg = postimg.replace('s72-c','s128');
} else {
  postimg = "URL_imagen_por_defecto";
}