Blogger. Thumbnail. Miniaturas cuadradas, verticales, rectangulares

En la red, puedes encontrar muchos scripts que utilizan Json para leer información de alguno de los feeds de Blogger, para después mostrarla según lo requerido.

De tal manera, esos scripts se desarrollan regularmente para leer datos como el título, la URL, la etiqueta de los posts e inclusive para extraer una imagen asociada. Así, los utilizamos para presentar las últimas entradas, los posts relacionados o los más populares, las etiquetas, etc.

No obstante, es común que lo de la extracción de las imágenes para ser utilizadas, ocasione ciertas inconformidades para quien desea mostrarlas en su sitio.

Así, de acuerdo al script que se utilice, la imagen que se extrae es obtenida utilizando dos distintos métodos:

Método 1. Se lee el HTML de la entrada y se busca dentro de este una etiqueta IMG, regularmente la primera que haya. Entonces, la imagen que se muestra será aquella que hayamos incluido y bastará con re-dimensionarla utilizando CSS o con atributos width y height para presentar una miniatura.

Método 2. Se lee un dato del feed que es el que contiene esa miniatura creada automáticamente por Blogger, para lo que se utiliza el siguiente código:
if ("media$thumbnail" in entry) {
postimg = entry.media$thumbnail.url;
} else {
postimg = "URL_imagen_por_defecto";
}

Al utilizar el método 2, generalmente se suelen generar dudas respecto a su ejecución, tales como:

1. En el caso en que Blogger no pueda generar esa imagen, tal vez porque el post fue editado o alguna razón de carácter reservada y quizás “inexplicable”. Esto, es algo muy común y genera inconformidades entre los usuarios.

2. En el caso que refiere el tamaño de la imagen extraída. Sin embargo, puede recurrirse a la utilización de un “truquillo”, como un método alternativo, ya que esa imagen tiene el formato clásico de todas las que subimos a Blogger.

Pero,… ¿Cual es ese “truquillo”?

Jeje,… el “truquillo” que importa es saber que el tamaño de la imagen a ser mostrada, se define por uno de los parámetros de la URL, el cual vemos justo antes del nombre de la imagen; por ejemplo:
https://xxxxx.blogspot.com/xxxxxxx/xxxxxxx/xxxxxxx/xxxxxxx/s120/nombredeimagen.jpg
Así, la imagen es una miniatura de 120 pixeles de ancho (o de alto si no es apaisada)

Y en el caso de las miniaturas extraídas del feed, ese dato dice: s72-c:
https://xxxxx.blogspot.com/xxxxxxx/xxxxxxx/xxxxxxx/xxxxxxx/s72-c/nombredeimagen.jpg

Definiéndose en /s72-c/ la miniatura de 72x72 pixeles y cuadrada. A pesar de que la imagen original no sea justamente cuadrada.

Entonces, siendo el caso de cualquier imagen subida a Blogger, basta con que cambies ese parámetro para que se cargue una miniatura de otro tamaño, inclusive cuadrada si le agregas –c.

Por ejemplo, la siguiente imagen mide 1300 x 690 originalmente.
La encuentras aquí: https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjtqsHfF38cgQY8gt7WSmXL-dPcM67zbb_aWUzXlUgwsuoal6yO3LCJ7wKjkpzCinDQdMyL9kkkYm7-d7JiZL_1qC2Nb5ij5mRZFejTpxG004VwsvVFMUAoueLdcS8kzYpHZFiJFXORsHs/s1300/imagenejemplo.jpg

La miniatura que teóricamente utilizará Blogger como Thumbnail, será una imagen cuadrada:
https://........../s72-c/imagenejemplo.jpg

Fíjate que recortó el cuadrado formado en el centro de la imagen
En el caso de que la imagen sea más alta que ancha, el cuadrado que recorta es el que se forma en la parte superior.

Pero si no deseas que sea cuadrada, solo le quitas el –c.
https://........../s72/imagenejemplo.jpg

Fíjate bien que la imagen original es más ancha que alta, por lo que se visualiza completa, pero en miniatura con ancho 72px.

Lo mismo sucedería si la imagen fuera más alta que ancha, es decir se visualiza completa pero con altura 72px.

Muy bien, pero si ahora deseas presentar una imagen más grande, por ejemplo de 200px de ancho o altura según tu imagen, entonces sería algo así:

Imagen cuadrada:
https://........../s200-c/imagenejemplo.jpg

Imagen sin deformar (proporcional):
https://........../s200/imagenejemplo.jpg

Respecto a imagen extraída del feed.

Es probable que te preguntes, ¿si existe la posibilidad de que el script que utilizas la cambie por otra?

Pues, el dato de imagen extraída del feed, genera una imagen cuadrada de 72 x72. (Método 2)

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

Para esto te diré que SI existe la posibilidad, pues basta con que agregues una línea extra en el código. De tal manera que si deseas por ejemplo que la imagen sea más grande y no sea cuadrada, el código con la línea extra, te queda así:

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

Como te darás cuenta, la variable postimg recibe la imagen thumbnail de la entrada. Pero, en la línea adicional, la variable reemplaza el tamaño definido en el parámetro s72-c por s100.

Entonces, obtienes una imagen de 100px, de ancho o altura, proporcional según la imagen que hayas insertado en la entrada.

El enlace de esta imagen te puede interesar...

Espero que esta entrada te haya servido si es lo que justamente buscabas. Déjame tus comentarios.