Función @avatar para Blogger

Función utilitaria diseñada para generar y manipular avatares de usuario a partir de imágenes alojadas en los servidores de Google. Permite establecer dimensiones fijas cuadradas, inyectar atributos y definir una imagen de reemplazo para los avatares nativos de Blogger.

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='@avatar'>
  <b:comment>
  Create an avatar image with optional default image
  @author zkreations
  @param {image} src - Image URL
  @param {image} [default] - Default image URL
  @param {number} [resize=40] - Change dimensions
  @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
  </b:comment>
  <b:if cond='data:src'>
    <b:with value='data:default ?: "https://lh3.googleusercontent.com/a/default-user"' var='default'>
      <b:with value='resizeImage((data:src contains "/img/bl" ? data:default : data:src), (data:resize ?: 40), "1:1")' 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:attr name='src' expr:value='data:image'/>
          <b:attr name='width' expr:value='data:image.width'/>
          <b:attr name='height' expr:value='data:image.height'/>
        </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

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 de perfil del usuario. Si detecta el clásico marcador de avatar vacío de Blogger (blank.gif), la función procesará automáticamente la alternativa del parámetro default.

<b:include data='{ src: data:post.author.authorPhoto.image }' name='@avatar'/>

<img src='/w40-h40-p-k-no-nu/IMG_000000.png' width='40' height='40'/>

default

Define una imagen de marcador de posición (placeholder) en caso de que el perfil evaluado use el avatar en blanco predeterminado del sistema.

<b:include data='{
  src: data:post.author.authorPhoto.image,
  default: "https://www.gravatar.com/avatar/?d=identicon"
}' name='@avatar'/>

<img src='https://www.gravatar.com/avatar/?d=identicon' width='40' height='40'/>

resize

Ajusta el tamaño proporcional del contenedor en píxeles. Modifica físicamente tanto el ancho como la altura, asignándolos automáticamente a sus atributos HTML nativos.

<b:include data='{
  src: data:post.author.authorPhoto.image,
  resize: 80
}' name='@avatar'/>

<img src='/w80-h80-p-k-no-nu/IMG_000000.png' width='80' height='80'/>

id

Asigna un identificador único en el árbol DOM de la etiqueta resultante.

<b:include data='{
  src: data:post.author.authorPhoto.image,
  id: "author-avatar"
}' name='@avatar'/>

<img src='/w40-h40-p-k-no-nu/IMG_000000.png' id='author-avatar' width='40' height='40'/>

class

Aplica una o múltiples clases CSS a la imagen para manejar estilos externos o bibliotecas.

<b:include data='{
  src: data:post.author.authorPhoto.image,
  class: "rounded"
}' name='@avatar'/>

<img src='/w40-h40-p-k-no-nu/IMG_000000.png' class='rounded' width='40' height='40'/>

sizes

Define las condiciones de medios (media queries) para acompañar al uso de conjuntos de imágenes responsivas.

<b:include data='{
  src: data:post.author.authorPhoto.image,
  sizes: "(max-width: 40px) 100vw, 40px"
}' name='@avatar'/>

<img src='/w40-h40-p-k-no-nu/IMG_000000.png' sizes='(max-width: 40px) 100vw, 40px' width='40' height='40'/>

loading

Habilita la carga diferida nativa en navegadores modernos (Lazy loading). Valores soportados: "lazy" | "eager".

<b:include data='{
  src: data:post.author.authorPhoto.image,
  loading: "lazy"
}' name='@avatar'/>

<img src='/w40-h40-p-k-no-nu/IMG_000000.png' loading='lazy' width='40' height='40'/>

fetchpriority

Asigna prioridad de descarga HTTP frente a otros recursos críticos. Útil para optimizar elementos Above-the-fold.

<b:include data='{
  src: data:post.author.authorPhoto.image,
  fetchpriority: "high"
}' name='@avatar'/>

<img src='/w40-h40-p-k-no-nu/IMG_000000.png' fetchpriority='high' width='40' height='40'/>

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:post.author.authorPhoto.image,
  crossorigin: "anonymous"
}' name='@avatar'/>

<img src='/w40-h40-p-k-no-nu/IMG_000000.png' crossorigin='anonymous' width='40' height='40'/>

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:post.author.authorPhoto.image,
  decoding: "async"
}' name='@avatar'/>

<img src='/w40-h40-p-k-no-nu/IMG_000000.png' decoding='async' width='40' height='40'/>

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:post.author.authorPhoto.image,
  referrerpolicy: "no-referrer"
}' name='@avatar'/>

<img src='/w40-h40-p-k-no-nu/IMG_000000.png' referrerpolicy='no-referrer' width='40' height='40'/>

alt

Define el texto alternativo para accesibilidad (SEO). Si no se envía este parámetro, la función renderiza una etiqueta vacía por defecto.

<b:include data='{
  src: data:post.author.authorPhoto.image,
  alt: "Avatar de zkreations"
}' name='@avatar'/>

<img src='/w40-h40-p-k-no-nu/IMG_000000.png' alt='Avatar de zkreations' width='40' height='40'/>