Los operadores de imágenes permiten aplicar características a un elemento del tipo imagen. La URL de la imagen obtendrá los parámetros resultantes de la operación. La siguiente tabla contiene los operadores disponibles:


Nombre Operador Sintaxis Resultado
Redimensionar resizeImage resizeImage(image,number,string) image
Tabla de imágenes resizeImage(image,array[number],string) array[object]
Imágenes adaptables sourceSet sourceSet(image,array[number],string) string

Sintaxis básica

El operador cambia los características de una imagen alojada en Blogger, Picasa, Google Fotos o miniaturas de YouTube, mediante la alteración de los parámetros de cambio de tamaño de los enlaces.


resizeImage(image,number,string)

El primer operando corresponde a la Imagen, el segundo define el tamaño mediante un valor numérico number y el tercero la relación de aspecto string la cual se expresa como cadena de caracteres.


Los operadores también trabajan con los enlaces de las imágenes expresadas de forma explícita como cadenas de caracteres, siempre y cuando la url pertenezca a uno de los servidores mencionados más arriba:


resizeImage("https://i.ytimg.com/vi/9ZfN87gSjvI/maxresdefault.jpg",500,"16:9")

El resultado de la operación anterior devuelve una imagen alojada en youtube, con una relación de aspecto 16:9 y 500 pixeles de ancho.


Redimensionar

El operador cambia el tamaño y relación de aspecto de una imagen, el resultado de la operación será una imagen con los parámetros añadidos:


<img expr:src='data:view.featuredImage resizeImage 250 resizeImage "1:1"'/> <!-- Por defecto -->
<img expr:src='resizeImage(data:view.featuredImage, 250, "1:1"))'/> <!-- Funcional -->

La operación anterior dará como resultado una imagen de 250x250 pixeles.


Tabla de imágenes

El operador es el mismo, pero el segundo operando numérico cambia por una tabla numérica, además se requiere una etiqueta b:loop para la salida de datos:


<b:loop values='resizeImage(data:view.featuredImage, [40,80,120], "16:9")' var='imageArray'>
   <data:imageArray.url'/>
   <data:imageArray.size/>
</b:loop>

La operación anterior dará como resultado una tabla de imágenes con dos elementos, url y size. La cantidad de elementos de la tabla depende del numero de números expresados en la tabla numérica.


Imágenes adaptables

El operador devuelve una cadena de caracteres, la cual está destinada a ser incrustado en el parámetro srcset en la etiqueta <img>, ejemplo:


<img expr:srcset='data:view.featuredImage sourceSet [20,60,80] sourceSet "4:3"' expr:src='data:view.featuredImage'/> <!-- Por defecto -->
<img expr:srcset='sourceSet(data:view.featuredImage, [20,60,80], "4:3"))' expr:src='data:view.featuredImage'/> <!-- Funcional -->

La operación anterior dará como resultado imagenes adaptables, el navegador elegirá la imagen con el tamaño mas cercano al contenedor.


Mas detalles y ejemplos en: Image operators Blogger Code PE.