En la red, encuentras scripts que utilizan Json para leer información de
alguno de los feeds de
Blogger, para después presentarla según lo requerido. Las imágenes
thumbnail en blogger, también se añaden a dicha información.
Esos scripts se desarrollan comúnmente para leer datos como el título de los post, la URL, la etiqueta e inclusive para extraer una imagen relacionada. Así, se utilizan para presentar las últimas entradas, los posts relacionados o los más populares, las etiquetas, e incluso para hacer el juego de presentar post aleatoriamente, etc.
Si embargo, es común que lo de la extracción de las imágenes a ser utilizadas, genere ciertas inconformidades para quien desea presentarlas en su sitio.
Reeditado (Enero 2022) | Razón: El nuevo formato de los enlaces de dirección de imagen que almacena Google es diferente respecto a la definición de tamaños. Por ejemplo:
Formato Anterior (FA):
https://xxxxx.blogspot.com/xxxx/xxxx/xxxx/xxxx/s640/nombredeimagen.jpg
Formato Nuevo (FN):
https://blogger.googleusercontent.com/xxx/x/xxx-xxx=w640-h340
Sin embargo, en el nuevo formato se puede aplicar la misma lógica haciendo los cambios después del signo igual, para obtener los resultados. Ej:
https://blogger.googleusercontent.com/xxx/x/xxx-xxx=s200
Thumbnail en blogger.
Dos métodos y un pequeño truco
De acuerdo al script utilizado, la imagen extraída es obtenida utilizando dos distintos métodos:
Método 1.
Se lee el código HTML de la entrada y dentro se busca una etiqueta IMG, regularmente la primera que haya. Entonces, la imagen que se muestra será aquella primera que hayamos incluido y bastará con re-dimensionarla utilizando CSS o con atributos width y height para presentar una imagen 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";
}
Si se utiliza 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 “pequeño truco”, como un método alternativo, ya que esa imagen tiene el formato clásico de todas las que se suben a Blogger.
Pero,… ¿Cuál es ese “pequeño truco”?
El “truco” 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 en el FA vemos justo antes
del nombre de la imagen; por ejemplo:
https://xxxxx.blogspot.com/xxxxxxx/xxxxxxx/xxxxxxx/xxxxxxx/s120/nombredeimagen.jpg
Aunque con el nuevo formato podría verse así
https://xxxxx.blogspot.com/xxxxxxx/xxxxxxx/xxxxxxx/xxxxxxx=s120
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 imagen miniatura de otro tamaño, incluso cuadrada si le agregas –c.
Por ejemplo, piensa en la siguiente imagen...
- que se llama imagenejemplo.jpg,
- que es rectangular y
- que originalmente mide 1300px por 700px.
La miniatura que teóricamente utilizará como Thumbnail en Blogger, 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.
(FA)
https://........../s72/imagenejemplo.jpg
(FN)
https://..........=s72
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:
(FA)
https://........../s200-c/imagenejemplo.jpg
(FN)
https://..........=s200-c
Imagen sin deformar (proporcional):
(FA)
https://........../s200/imagenejemplo.jpg
(FN)
https://..........=s200
Respecto a imagen extraída del feed.
Quizás 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 72px x 72px. (Método 2)
if ("media$thumbnail" in entry) {
postimg = entry.media$thumbnail.url;
} else {
postimg = "URL_imagen_por_defecto";
}
Entonces, te diré que SI existe la posibilidad y que basta con que agregues una línea extra en el código. De tal modo, que si por ejemplo deseas que la imagen sea más grande y no sea cuadrada, el código con la línea extra (en rojo), se vería así:
if ("media$thumbnail" in entry) {
postimg = entry.media$thumbnail.url;
postimg = postimg.replace('s72-c','s100');
} else {
postimg = "URL_imagen_por_defecto";
}
Fíjate en la primera variable postimg, ella recibe la imagen thumbnail de la entrada. Pero, en la línea adicional, la segunda 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 sobre las imágenes miniatura thumbnail en blogger, te haya servido si es lo que justamente buscabas. Déjame tus comentarios.
No hay comentarios.:
👉 Publicar un comentario