Operador Blogger para redimensionar imágenes: resizeImage

Para construir imágenes cuadradas para sumarios, agrandar miniaturas y para todo aquello en lo que nos venía bien cambiar las dimensiones de una imagen automáticamente, hasta la fecha no teníamos más remedio que usar JavaScript aprovechando la ventaja del sistema de almacenamiento de imágenes de la plataforma (aquello de subir una imagen y disponer de cientos).

No sé desde cuando está operativa, pero hoy día tenemos una utilidad nativa que he comprobado que funciona y sirve para hacer todo eso. Que venga "de serie" es ya de por sí ventajoso con respecto a usar JavaScript añadido, pero también tiene alguna que otra cosa más que nos vendrá bien, como la posibilidad de recortar la imagen con una proporción concreta.


El nuevo operador se denomina resizeImage y además de explicar cómo se utiliza y mostrar unos cuantos casos, al final veremos un ejemplo de utilización para generar cabeceras dinámicas... una distinta para cada entrada.

Su sintaxis puede tener dos formas y el resultado siempre es la dirección de una imagen:

url_imagen resizeImage ancho_imagen resizeImage ["ratio"]

resizeImage(url_imagen,ancho_imagen[,"ratio"])

• url_imagen: Corresponde a la dirección de la imagen original. Puede usarse una variable data válida como por ejemplo data:blog.postImageUrl, data:blog.postImageThumbnailUrl, data:postFirstImage, data:posts[i].authorPhoto.url... o cualquier otra que contenga la dirección de una imagen. Si queremos indicar directamente la URL de una imagen concreta fija, entonces esta deberá ir entre comillas.
  
  
• ancho_imagen: Este parámetro es simplemente un número entero que indicará el nuevo ancho de la imagen, es decir, el ancho de aquella que se verá en lugar de la original
  
  
• ratio: Mientras que los otros dos son obligatorios, este es opcional. Representa la proporción (aspect ratio) que debe tener el ancho y alto de la nueva imagen, 4:3, 16:9... o el que queráis. Esto lo que producirá será un recorte de la imagen con la proporción indicada y por ejemplo, 1:1 servirá para conseguir un cuadrado. Sólo admite valores enteros y debe ir entrecomillado.

Como su misión es modificar imágenes, tendrá que estar unido a una etiqueta img y la formulación final según el tipo de sintaxis que elijamos será como en estos dos ejemplos:

<img expr:src='data:postFirstImage resizeImage 600 resizeImage "4:3"' />

<img expr:src='resizeImage(data:postFirstImage,600,"4:3") />

¿Lo probamos?
(Esto es una simulacion. En realidad el operador sólo funciona en la plantilla)

Supongamos esta imagen de 642x428 px cuya dirección abreviaré para los siguientes códigos de ejemplo como https://imagen.jpg.

Las imágenes que se verían en el blog según las siguientes combinaciones con el operador resizeImage, serían:

(he puesto las dos fórmulas que se admite, pero obviamente sólo es necesario usar una de ellas)

<img expr:src='resizeImage("https://imagen.jpg", 400)'/>

<img expr:src='"https://imagen.jpg" resizeImage 400'/>

Imagen de 400x267 (s400)
con igual proporción a la original

<img expr:src='resizeImage("https://imagen.jpg", 400,"2:1")'/>

<img expr:src='"https://imagen.jpg" resizeImage 400 resizeImage "2:1"'/>

Imagen de 400x200 (w400-h200-p)
recortada con proporción 2:1

<img expr:src='resizeImage("https://imagen.jpg", 300,"1:1")'/>

<img expr:src='"https://imagen.jpg" resizeImage 300 resizeImage "1:1"'/>

Imagen de 300x300 px (w300-h300-p)
cuadrada (también s300-c)

A destacar que esto sólo funcionará con imágenes "redimensionables de manera nativa", como son en principio todas las que subimos a Blogger y que terminan en Picasa o Google Fotos. No se trata de una función que agrande o reduzca esas imágenes visualmente como lo haría un simple width CSS, sino que este sistema lo que hace es cargar la imagen original del tamaño indicado. Para el que no conozca esto reitero el enlace del principio: Subir una imagen y disponer de cientos.

Caso de que la imagen no sea redimensionable Blogger presentará la imagen original sin tratar, esto es, tal cual con sus dimensiones originales.

---

La utilidad principal de resizeImage es mejorar y facilitar ciertos efectos con las imágenes para la plantilla.

Por ejemplo supongamos que queremos personalizar la cabecera de cada post incluyendo en ella la primera imagen del mismo en lugar de la cabecera fija. Para ello podemos usar resizeImage con la variable data:post.firstImageUrl de esta manera, incorporándola con una condición al gadget Cabecera.

<!--Show the image only-->
<div id='header-inner'>
  <a expr:href='data:blog.homepageUrl' style='display: block'>
    <b:if cond='data:blog.pageType == &quot;item&quot;'>
      <img expr:src='data:blog.postImageUrl'/>
    <b:else/>
      <img expr:alt='data:title' expr:height='data:height' expr:id='data:widget.instanceId + &quot;_headerimg&quot;' expr:src='data:sourceUrl' expr:width='data:width' style='display: block'/>
    </b:if>
  </a>
</div>

Presupongo que la cabecera será bastante más grande que el ancho de un post y en ese caso, si por ejemplo la imagen del post es de 640px, al llevarla a una cabecera de 1200px claramente pixelaría. La alternativa sería subirlas todas al post con 1200px directamente y marcar tamaño original, pero eso aumentaría el peso de la página innecesariamente.

Pero también podemos usar esta utilidad para recuperar la imagen s1200 a partir de la que usemos para el post, independientemente de su tamaño y que en cabecera no pixele. Siguiendo con el anterior código y usando resizeImage, este debería quedar así:

<!--Show the image only-->
<div id='header-inner'>
  <a expr:href='data:blog.homepageUrl' style='display: block'>
    <b:if cond='data:blog.pageType == &quot;item&quot;'>
      <img expr:src='resizeImage(data:blog.postImageUrl, 1200,"4:1")'/>
    <b:else/>
      <img expr:alt='data:title' expr:height='data:height' expr:id='data:widget.instanceId + &quot;_headerimg&quot;' expr:src='data:sourceUrl' expr:width='data:width' style='display: block'/>
    </b:if>
  </a>
</div>

De esa manera, el gadget cabecera cargaría en páginas de entradas una imagen igual que la primera de la entrada, pero con ancho 1200px y proporción 4:1, es decir, de 1200x300 px.


Una chulada esta herramienta, oiga. Un montón de cosas se pueden hacer con ella.

¿Vemos otro post al azar por si le encuentras utilidad o quizás prefieres ser más metódico y suscribirte a nuestras entradas por correo? También puedes imprimir este artículo y por supuesto compartirlo en redes sociales si fue de tu agrado.

Compartir

Twitter

Pinterest

Facebook

Linkedin

Copy URL

Compartir

Twitter

Pinterest

Facebook

Linkedin

Y muchos más artículos interesantes si nos sigues en...

• Google
• Facebook
• Twitter