Inicio > Desarrollo Web > Tutoriales de Laravel > Cómo Implementar Gravatar en Filament: Guía Paso a Paso

Cómo Implementar Gravatar en Filament: Guía Paso a Paso

Diego Cortés
Diego Cortés
August 31, 2024
Cómo Implementar Gravatar en Filament: Guía Paso a Paso

Implementar Gravatar en Filament es un proceso sencillo que permite a tus usuarios visualizar sus avatares de forma rápida y eficiente. En este tutorial, te mostraré cómo hacerlo en pocos pasos.

1. Modificación del Modelo User

El primer paso es modificar el modelo User en tu proyecto Laravel. Añadiremos las interfaces necesarias y la función para obtener el avatar desde Gravatar.

use Filament\Models\Contracts\FilamentUser;
use Filament\Models\Contracts\HasAvatar;

class User extends Authenticatable implements FilamentUser, HasAvatar
{
    public function getFilamentAvatarUrl(): ?string
    {
        $hash = md5(strtolower(trim($this->email)));
        return "https://www.gravatar.com/avatar/{$hash}.jpg?s=80&d=mp";
    }
}

2. Explicación del Código

  • Interfaces FilamentUser y HasAvatar: Estas interfaces se añaden al modelo User para habilitar la integración con Filament y el soporte de avatares.
  • Función getFilamentAvatarUrl(): Dentro de esta función, se obtiene el correo electrónico del usuario, se convierte en un hash MD5 (como lo requiere Gravatar), y se genera la URL para la imagen del avatar.

Puedes personalizar el tamaño de la imagen que Gravatar retornará cambiando el parámetro s en la URL. Por ejemplo, s=80 indica un tamaño de 80x80 píxeles.

3. Verificación

¡Eso es todo! Una vez que implementes estos cambios y vuelvas a iniciar sesión en tu panel de Filament, verás que la imagen de Gravatar se muestra correctamente para cada usuario.

Conclusión

Implementar Gravatar en Filament no solo es fácil, sino que también mejora la experiencia de usuario al permitir avatares personalizados sin necesidad de almacenar imágenes en tu servidor. Si tienes alguna duda o necesitas más personalización, no dudes en experimentar con la URL de Gravatar para ajustarla a tus necesidades.

Diego Cortés
Diego Cortés
Full Stack Developer, SEO Specialist with Expertise in Laravel & Vue.js and 3D Generalist

Categorías

Page loaded in 28.93 ms