0
(0)

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  miniaturas en blogger (thumbnail), 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

 

Miniaturas 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 formato anterior 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 72×72 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. 

Miniaturas en Blogger. Thumbnail. Miniaturas cuadradas, verticales, rectangulares

 

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

Miniaturas en Blogger. Thumbnail. Miniatura cuadrada

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

Miniaturas en Blogger. Thumbnail. Miniaturas cuadradas, verticales, rectangulares

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

Miniaturas en Blogger. Thumbnail. Miniatura cuadrada

 

Imagen sin deformar (proporcional):
(FA) https://………./s200/imagenejemplo.jpg
(FN) https://……….=s200

Miniaturas en Blogger. Thumbnail. Miniaturas cuadradas, verticales, rectangulares

 

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.

 

Espero que esta entrada sobre las imágenes miniaturas en blogger, te haya servido si es lo que justamente buscabas.  Déjame tus comentarios.

 

Quizás te interese:

Mira aquí otros post con Códigos
 

Vicente Ramírez Administrator

Me encantan los blogs y todo lo que se puede aprender con ellos.
Me desempeñé como profesor de sistemas informáticos unos años de mi vida. Estudios de Licenciatura en Publicidad y Marketing. Tnlgo. en Sistemas de Computación, enseñando lo poco o mucho que puedo saber y ahora con gusto lo comparto con ustedes.

follow me
Vicente Ramírez

Soy autor y fundador de este sitio. Me encantan los blogs y todo lo que se puede aprender con ellos.

Unos años de mi vida me desempeñé como técnico en una empresa de telecomunicaciones y otros como profesor de sistemas informáticos, enseñando lo poco o mucho que puedo saber y ahora lo comparto con ustedes.

En casa, no le huyo a preparar recetas de cocina, sobre todo si se trata de compartir la mesa con mis hijos. Me gusta  también ver la vida en el proceso de las plantas y el respeto a los animales.

Tengo estudios formales de Tecnología en Sistemas de Computación y Licenciatura en Publicidad y Marketing.  Aunque sobre varias  temáticas me gusta ser autodidacta y experimentar para obtener resultados que pueda compartir de manera confiable.

Sin embargo, respecto a mi formación, regularmente evito me llamen por título y simplemente soy Vicente Ramírez, un instructor, un papá, un amigo.  Y es que en ocasiones he escuchado cuando a alguien le preguntan por su nombre y responde… Mi nombre es “Ingeniero Juan Pérez” o “Master Ana Piguave”, por lo que me pregunto si sus padres le habrán puesto por nombre “Ingeniero” o “Master” (😃 Je, je, je, una cosa es el nombre, otra cosa es la profesión). 

Realmente me apasiona el emprendimiento combinado con la tecnología, por lo que me he dado impulso para gestionar con mi proyecto web actual, plasmando este blog en el que se incluyen varias temáticas.

Así, esta web nace con la vocación de ser un sitio para compartir y divulgar estos conocimientos combinados con el de otros autores que poco a poco se van integrando.

 

¿De cuánta utilidad te ha parecido este contenido?

¡Haz clic en una estrella para puntuarlo!

Promedio de puntuación 0 / 5. Recuento de votos: 0

Hasta ahora, ¡no hay votos!. Sé el primero en puntuar este contenido.

Deja una respuesta