Avatares automáticos para cada usuario de tu web

Avatares automáticos para cada usuario de tu web

Al terminar vas a tener un personaje distinto para cada persona registrada, generado a partir de su nombre, sin dibujar nada y sin guardar ni una sola imagen en tu servidor.

Blobatar funciona de tres maneras y solo necesitas una:

• React — si tu web está hecha con React.
• Vue — si está hecha con Vue.
• SVG — si tu web es HTML normal o no sabes con qué está hecha. Este es el más simple: el personaje sale como una imagen que se pega directo.

Blobatar es de código abierto y gratis. Su página es blobatar.dev: ahí ves los personajes de ejemplo antes de instalar nada, y compruebas si el estilo encaja con tu web. El código vive en Alain00/blobatar, con licencia MIT — o sea que puedes usarlo también en los trabajos que le cobres a un cliente.

No lo pongas todavía en tu página de verdad. Móntalo primero en una página de prueba, con un solo personaje en pantalla.

Según el camino que elegiste en el paso 1, escribe esto en la Terminal, dentro de la carpeta de tu proyecto:

Si elegiste React:

npm install blobatar @blobatar/react

Si elegiste Vue:

npm install blobatar @blobatar/vue

Si elegiste SVG y tu web es HTML normal o WordPress, no hay que instalar nada: se trae desde internet. Pega esto en tu página de prueba, entre un <div id="avatar"></div> y el final:

<script type="module">
  import { blobatar } from 'https://cdn.jsdelivr.net/npm/blobatar@2.7.0/+esm';
  document.getElementById('avatar').innerHTML = blobatar('tu@correo.com');
</script>

El dato de entrada es un nombre escrito, no un número ni una fecha. Prueba con el tuyo.

Si cada vez sale uno distinto, es que le estás pasando algo que cambia —una fecha o un número al azar— en vez del nombre.

Cambia el nombre por otro cualquiera y vuelve a cargar.

Ya en tu web, el dato que le pasas tiene que ser algo fijo y propio de esa persona: su nombre de usuario o su correo. Nunca el número de fila de tu base de datos, porque ese puede cambiar.

Donde muestras la foto de perfil, la regla es: si la persona subió foto, se muestra su foto; si no subió nada, se muestra el personaje.

Lo que te ahorra: antes, llenar una web de avatares era pagar un diseño o permitir subir fotos y guardarlas tú —con el espacio y el mantenimiento que eso trae—. Ahora el personaje se dibuja solo a partir del nombre: cero archivos guardados y cero trabajo de diseño. Ese rato úsalo en lo que sí tiene que verse bien, como tu página de inicio.

Si te atascas al elegir entre React, Vue o SVG, en el grupo lo miramos con tu caso concreto.