Anteriormente ya había compartido como generar imágenes adaptables con la etiqueta picture y también explicado como manipular imágenes en Blogger fácilmente. Este artículo sigue esa línea, pero en este caso generaremos avatares a partir de una imagen.
Situación
En blogger los avatares son generados a partir de la imagen de perfil de Blogger o Google, pero en caso de no tener una imagen, se genera un avatar en blanco o el avatar de Blogger por defecto.
Por otro lado un avatar en la mayoría de los casos es una imagen cuadrada, ya que cualquier otra manipulación de la imagen se puede hacer con CSS.
Función en Blogger
Para poder abordar estas tareas, he creado una función que genera un avatar a partir de una imagen. Debido a lo repetitivo que suele ser generar un avatar este código puede ser de gran utilidad.
<b:includable id='@avatar'>
<b:comment>
Replace the default avatar image with a custom image
@author zkreations
@param {image} src - Avatar image url
@param {image} [default] - Default image url
@param {number} [resize=40] - Resize image to a specific size
@param {string} [alt=data:messages.image] - Alt text for the image
@param {string} [class] - Additional classes for the image
@param {string} [loading] - Loading attribute for the image
</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='avatar'>
<b:tag expr:alt='data:alt ?: data:messages.image' expr:src='data:avatar' name='img'>
<b:attr name='b:whitespace' value='remove'/>
<b:attr name='width' expr:value='data:avatar.width'/>
<b:attr name='height' expr:value='data:avatar.height'/>
<b:attr name='loading' expr:value='data:loading'/>
<b:class cond='data:class' expr:name='data:class'/>
</b:tag>
</b:with>
</b:with>
<b:else/>
<b:comment render='true'>Parameter [src] is required.</b:comment>
</b:if>
</b:includable>Explicación
La función @avatar recibe como único parámetro obligatorio la imagen de perfil. Si no se proporciona una imagen, se generará un comentario visible en el código fuente. Los demás parámetros son opcionales.
Esta función pertenece a mi proyecto para desarrollar temas de Blogger llamado Hamlet. Si deseas aprender mas del código puedes revisarlo en el repositorio de Github.
Modo de uso
Incluye la función dentro de un marcado predeterminado "Common" para que este disponible globalmente. A continuación repasamos los parámetros:
Url de la imagen
La url puede especificarse explícitamente o a través de un dato tipo imagen de Blogger. De cualquier forma la debe provenir de los servidores de Google.
<b:include data='{ src: data:post.author.authorPhoto.image }' name='@avatar'/><img src='/w40-h40-p-k-no-nu/IMG_000000.png'/>Avatar por defecto
Este parámetro permite definir una imagen por defecto. La imagen por defecto puede ser cualquier imagen, pero es recomendable que provenga de los servidores de Google.
<b:include data='{
src: data:post.author.authorPhoto.image,
default: "https://lh3.googleusercontent.com/a/default-user"
}' name='@avatar'/><img src='https://lh3.googleusercontent.com/a/default-user'/>Tamaño del avatar
El tamaño del avatar se debe especificar como un numero y este equivale a la altura y el ancho del avatar en pixeles. En caso de no especificar el tamaño, se generará un avatar de 40px.
<b:include data='{
src: data:post.author.authorPhoto.image,
resize: 80
}' name='@avatar'/><img src='/w80-h80-p-k-no-nu/IMG_000000.png'/>Texto alternativo
El texto alternativo es el texto que se mostrará en caso de que la imagen no se cargue. Este texto es importante para la accesibilidad y SEO.
<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'/>Clases CSS
Las clases CSS son útiles para aplicar estilos personalizados al avatar. Puedes agregar varias clases separadas por espacios.
<b:include data='{
src: data:post.author.authorPhoto.image,
class: "avatar rounded-circle"
}' name='@avatar'/><img src='/w40-h40-p-k-no-nu/IMG_000000.png' class='avatar rounded-circle'/>Atributo loading
El atributo loading permite especificar el comportamiento de carga de la imagen. Puedes usar valores como "lazy" para cargar la imagen de forma diferida o "eager" para cargarla inmediatamente. Puedes consultar la documentación en Mozilla sobre carga diferida.
<b:include data='{
src: data:post.author.authorPhoto.image,
loading: "lazy"
}' name='@avatar'/><img src='/w40-h40-p-k-no-nu/IMG_000000.png' class='avatar rounded-circle'/>Conclusión
La función @avatar es una herramienta útil para generar avatares a partir de imágenes en Blogger. Ademas permite establecer rapidamente una imagen por defecto que reemplaza las imagenes de Blogger. Puedes adaptarla según tus necesidades y estilo.
Espero que esta función te sea útil y te ayude en el desarrollo de tu plantilla. Si tienes alguna pregunta o sugerencia, no dudes en dejar un comentario.
