Función utilitaria diseñada para generar y manipular etiquetas de imagen alojadas en servidores de Google (Blogger, Google Fotos, YouTube). Permite controlar dimensiones, aplicar lazy loading nativo y generar atributos responsivos (srcset) de forma centralizada.
Esta función forma parte del proyecto Hamlet. Puedes revisar el código fuente en GitHub.
Definición de la función
<b:includable id='@image'>
<b:comment>
Create an image tag with optional attributes and responsive support
@author zkreations
@param {image} src - Image URL
@param {number[]} [sourceSet] - Array of image widths (e.g. [320, 640, 1024])
@param {number} [width] - Image width
@param {number} [height] - Image height
@param {number} [resize] - Change dimensions
@param {string} [ratio] - Aspect ratio
@param {string} [id] - Image ID
@param {string} [class] - Additional classes
@param {string} [sizes] - Sizes attribute
@param {string} [loading] - Loading attribute
@param {string} [fetchpriority] - Fetch priority attribute
@param {string} [crossorigin] - Cross-origin attribute
@param {string} [decoding] - Decoding attribute
@param {string} [referrerpolicy] - Referrer policy attribute
@param {string} [alt] - Alt text
@param {string} [params] - Additional parameters for proxy images
</b:comment>
<b:if cond='data:src'>
<b:with value='data:src.isYoutube
? data:src.youtubeMaxResDefaultUrl
: data:src' var='baseImage'>
<b:with value='(data:resize
? resizeImage(data:baseImage, data:resize, data:ratio)
: data:baseImage
)' var='image'>
<b:tag name='img'>
<b:attr name='b:whitespace' value='remove'/>
<b:class cond='data:class' expr:name='data:class'/>
<b:loop values='["id","sizes","loading","fetchpriority","crossorigin","decoding","referrerpolicy","alt"]' var='attr'>
<b:with expr:value='+("data:",data:attr)' var='value'>
<b:attr expr:name='data:attr' expr:value='data:value'/>
</b:with>
</b:loop>
<b:with value='[
"com/img/a/",
"com/blogger_img_proxy"
]' any (server => server in data:image)' var='isProxyImg'>
<b:with value='data:params and data:isProxyImg ? ("-" + data:params) : ""' var='params'>
<b:with value='data:sourceSet ? resizeImage(data:image, data:sourceSet.first, data:ratio) : data:image' var='image'>
<b:attr name='src' expr:value='data:image + data:params'/>
<b:attr name='width' expr:value='data:width ?: data:image.width'/>
<b:attr name='height' expr:value='data:height ?: data:image.height'/>
</b:with>
</b:with>
</b:with>
<b:if cond='data:sourceSet'>
<b:attr name='srcset' expr:value='sourceSet(data:image, data:sourceSet, data:ratio)'/>
</b:if>
</b:tag>
</b:with>
</b:with>
<b:else/>
<b:comment render='true'>Parameter [src] is required.</b:comment>
</b:if>
</b:includable>
Especificación de Parámetros
| Parámetro | Tipo | Descripción |
|---|---|---|
src |
image |
URL u objeto de imagen de Blogger. |
sourceSet |
number[] |
Anchos para generar el atributo srcset. |
width |
number |
Ancho de la imagen. Tiene prioridad sobre ratio. |
height |
number |
Alto de la imagen. Tiene prioridad sobre ratio. |
resize |
number |
Redimensiona la imagen mediante la API de Google. |
ratio |
string |
Relación de aspecto. Requiere resize. |
id |
string |
Valor del atributo id. |
class |
string |
Clases CSS de la imagen. |
sizes |
string |
Valor del atributo sizes. |
loading |
string |
Modo de carga (Ej: "lazy", "eager"). |
fetchpriority |
string |
Prioridad de descarga (Ej: "high", "low"). |
crossorigin |
string |
Modo CORS de la petición. |
decoding |
string |
Método de decodificación (Ej: "async"). |
referrerpolicy |
string |
Política de referencias. |
alt |
string |
Texto alternativo. Usa el de Blogger por defecto si se omite. |
params |
string |
Parámetros adicionales del proxy de Blogger. |
Modo de uso
Para implementar esta función, añade el fragmento en los marcados predeterminados (<b:defaultmarkups type='Common'>) de tu tema.
src
Determina el origen de la imagen. Se recomienda usar elementos alojados en Google. Si la imagen proviene de YouTube, la función extraerá automáticamente la versión de máxima resolución (youtubeMaxResDefaultUrl).
<b:include data='{ src: data:view.featuredImage }' name='@image'/>
<img src='/s1600/demo.png'/>
sourceSet
Genera un conjunto de imágenes responsivas pasándole un array de números. El navegador elegirá la imagen óptima según la pantalla.
<b:include data='{ src: data:view.featuredImage, sourceSet: [300, 600, 900] }' name='@image'/>
<img src='/s1600/demo.png' srcset='/w300/demo.png 300w, /w600/demo.png 600w, /w900/demo.png 900w'/>
width
Establece un ancho fijo numérico o porcentual para la etiqueta HTML final.
<b:include data='{ src: data:view.featuredImage, width: 300 }' name='@image'/>
<img src='/s1600/demo.png' width='300'/>
height
Establece una altura fija numérica o porcentual para la etiqueta HTML final.
<b:include data='{ src: data:view.featuredImage, height: 200 }' name='@image'/>
<img src='/s1600/demo.png' height='200'/>
resize
Modifica el tamaño físico de la imagen de origen mediante la API nativa de Google.
<b:include data='{ src: data:view.featuredImage, resize: 300 }' name='@image'/>
<img src='/w300/demo.png'/>
ratio
Recorta la imagen bajo una relación de aspecto predefinida. Se añaden automáticamente los atributos de dimensiones calculadas. Requiere de forma obligatoria el uso de resize.
<b:include data='{ src: data:view.featuredImage, resize: 300, ratio: "4:3" }' name='@image'/>
<img src='/w300-h225-p-k-no-nu/demo.png' height='225' width='300'/>
id
Asigna un identificador único en el árbol DOM de la etiqueta resultante.
<b:include data='{ src: data:view.featuredImage, id: "img-principal" }' name='@image'/>
<img src='/s1600/demo.png' id='img-principal'/>
class
Aplica una o múltiples clases CSS a la imagen para manejar estilos externos o bibliotecas.
<b:include data='{ src: data:view.featuredImage, class: "img-fluid hero-banner" }' name='@image'/>
<img src='/s1600/demo.png' class='img-fluid hero-banner'/>
sizes
Define las condiciones de medios (media queries) para acompañar al uso de sourceSet. Para entender más sobre su comportamiento, consulta la guía de MDN sobre imágenes responsivas.
<b:include data='{ src: data:view.featuredImage, sizes: "(max-width: 600px) 100vw, 50vw" }' name='@image'/>
<img src='/s1600/demo.png' sizes='(max-width: 600px) 100vw, 50vw'/>
loading
Habilita la carga diferida nativa en navegadores modernos (Lazy loading). Valores soportados: "lazy" | "eager".
<b:include data='{ src: data:view.featuredImage, loading: "lazy" }' name='@image'/>
<img src='/s1600/demo.png' loading='lazy'/>
fetchpriority
Asigna prioridad de descarga HTTP frente a otros recursos críticos. Útil para optimizar el LCP (Largest Contentful Paint).
<b:include data='{ src: data:view.featuredImage, fetchpriority: "high" }' name='@image'/>
<img src='/s1600/demo.png' fetchpriority='high'/>
crossorigin
Permite configurar las credenciales CORS necesarias si requieres procesar los píxeles de la imagen desde scripts locales o elementos <canvas>.
<b:include data='{ src: data:view.featuredImage, crossorigin: "anonymous" }' name='@image'/>
<img src='/s1600/demo.png' crossorigin='anonymous'/>
decoding
Proporciona una sugerencia al navegador sobre cómo debe decodificar la estructura de la imagen (de forma síncrona o asíncrona).
<b:include data='{ src: data:view.featuredImage, decoding: "async" }' name='@image'/>
<img src='/s1600/demo.png' decoding='async'/>
referrerpolicy
Controla qué datos e información de cabecera de referencia (Referrer) se envía al realizar la solicitud del recurso de imagen.
<b:include data='{ src: data:view.featuredImage, referrerpolicy: "no-referrer" }' name='@image'/>
<img src='/s1600/demo.png' referrerpolicy='no-referrer'/>
alt
Define el texto alternativo para accesibilidad (SEO). Si no se envía este parámetro, la función renderiza una etiqueta genérica por defecto.
<b:include data='{ src: data:view.featuredImage, alt: "Texto alternativo" }' name='@image'/>
<img src='/s1600/demo.png' alt='Texto alternativo'/>
params
Añade flags específicos extras para las imágenes alojadas en los servidores nuevos de Blogger (WebP, compresión, etc.). Detalles completos en el artículo de parámetros adicionales.
<b:include data='{ src: data:view.featuredImage, params: "rw-e30" }' name='@image'/>
<img src='/s1600/demo.png-rw-e30'/>