Operadores resizeImage y sourceSet en Blogger

min

Estos operadores nos permiten trabajar en exclusivo con las imágenes subidas a los servidores de google a través de blogger.


Operador resizeImage

Nos permite modificar la resolución y relación de aspecto de una imagen, siempre que se encuentre subida a Blogger. Su sintaxis se puede expresar de dos formas:


[image] resizeImage [number] resizeImage [string]
resizeImage([image],[number],[string])

En el siguiente ejemplo solicitamos la primera imagen de la entrada, luego cambiamos su tamaño a 500px como máximo y le especificamos una relación de aspecto totalmente cuadrada.


<img expr:src='data:blog.postImageUrl resizeImage 500 resizeImage "1:1"'/>

En este otro ejemplo realizamos las mismas modificaciones a la primera imagen, solo que esta vez lo hacemos mediante la sintaxis alternativa.


<img expr:src='resizeImage(data:blog.postImageUrl, 500, "1:1")'/>

Operador sourceSet

Este operador fue desarrollado para trabajar con el atributo HTML5 srcset. Devuelve imágenes con los tamaños y relación de aspecto especificados. Su sintaxis se puede expresar de dos formas:


[image] sourceSet {array[number]} sourceSet [string]
sourceSet([image],{array[number]},[string])

En el siguiente ejemplo solicitamos la primera imagen de una entrada para el atributo srcset dividida en diferentes tamaños.


<img expr:srcset='data:blog.postImageUrl sourceSet [100,300,500] sourceSet "16:9"'/>

El siguiente ejemplo es igual que el anterior, solo que esta vez lo hacemos mediante la sintaxis alternativa.


<img expr:srcset='sourceSet(data:blog.postImageUrl, [100,300,500], "16:9")'/>

Si tienes alguna duda déjala en los comentarios. Si te ha servido esta entrada no olvides compartirla en tus redes sociales, eso me ayudaria mucho.