Join 26,000+ Laravel Developers and join the free Laravel Newsletter
Plug and Play Avatars in Laravel with Laravolt
Laravel Packages / updated: June 18, 2018

Plug and Play Avatars in Laravel with Laravolt

The Laravolt Avatar by Bayu Hendra Winata is a package that turns strings like names into avatars effortlessly. This package uses the Intervention Image package under the hood to generate base64 images on-the-fly, saving as an image, and SVG.

The basic usage looks like this in your Blade templates:

<img src="{{ Avatar::create('Joko Widodo')->toBase64() }}" />

<!-- SVG markup -->
{!! Avatar::create('Susilo Bambang Yudhoyono')->toSvg(); !!}

This package is highly configurable—you can even configure an individual image on-the-fly while rendering it:

// width = 100, height = 200
Avatar::create('Soekarno')->setDimension(100, 200);
Avatar::create('Soekarno')->setBackground('#001122');
Avatar::create('Soekarno')->setShape('square');

Here’s the full configuration at the time of writing so you can get a feel for all the ways you can customize avatar generation:

<?php

return [

    // Supported: "gd", "imagick"
    'driver'    => 'gd',

    // Initial generator class
    'generator' => \Laravolt\Avatar\Generator\DefaultGenerator::class,

    // Whether all characters supplied must be replaced with their closest ASCII counterparts
    'ascii'    => false,

    // Image shape: circle or square
    'shape' => 'circle',

    // Image width, in pixel
    'width'    => 100,

    // Image height, in pixel
    'height'   => 100,

    // Number of characters used as initials.
    'chars'    => 2,

    // font size
    'fontSize' => 48,

    // convert initial letter to uppercase
    'uppercase' => false,

    // Fonts used to render text.
    // If contains more than one fonts, randomly selected based on name supplied
    'fonts'    => ['path/to/OpenSans-Bold.ttf', 'path/to/rockwell.ttf'],

    // List of foreground colors to be used, randomly selected based on name supplied
    'foregrounds'   => [
        '#FFFFFF'
    ],

    // List of background colors to be used, randomly selected based on name supplied
    'backgrounds'   => [
        '#f44336',
        '#E91E63',
        '#9C27B0',
        '#673AB7',
        '#3F51B5',
        '#2196F3',
        '#03A9F4',
        '#00BCD4',
        '#009688',
        '#4CAF50',
        '#8BC34A',
        '#CDDC39',
        '#FFC107',
        '#FF9800',
        '#FF5722',
    ],

    'border'    => [
        'size'  => 1,

        // border color, available value are:
        // 'foreground' (same as foreground color)
        // 'background' (same as background color)
        // or any valid hex ('#aabbcc')
        'color' => 'foreground'
    ]
];

I would like to point out that at the time of writing I tried this package out with the GD extension and a base64 data URI and the image quality resulted in jagged edges. I would recommend experimenting with different configurations. I also tried the SVG output, and it worked well, with perhaps a little bit of font alignment in different browsers.

Learn More

Check out the official GitHub repository for the full readme and install it in your Laravel project with Composer:

composer require laravolt/avatar

# Or for Laravel 5.1
composer require laravolt/avatar ~0.3

Note that if you are using Laravel 5.4 or earlier you need to configure the Avatar facade manually to use it in your templates.

Laravel News Partners

Newsletter

Join the weekly newsletter and never miss out on new tips, tutorials, and more.