Plug and Play Avatars in Laravel with Laravolt

Packages

June 5th, 2018

laravolt-avatar-1.png

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:

1<img src="{{ Avatar::create('Joko Widodo')->toBase64() }}" />
2
3<!-- SVG markup -->
4{!! Avatar::create('Susilo Bambang Yudhoyono')->toSvg(); !!}

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

1// width = 100, height = 200
2Avatar::create('Soekarno')->setDimension(100, 200);
3Avatar::create('Soekarno')->setBackground('#001122');
4Avatar::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:

1<?php
2
3return [
4
5 // Supported: "gd", "imagick"
6 'driver' => 'gd',
7
8 // Initial generator class
9 'generator' => \Laravolt\Avatar\Generator\DefaultGenerator::class,
10
11 // Whether all characters supplied must be replaced with their closest ASCII counterparts
12 'ascii' => false,
13
14 // Image shape: circle or square
15 'shape' => 'circle',
16
17 // Image width, in pixel
18 'width' => 100,
19
20 // Image height, in pixel
21 'height' => 100,
22
23 // Number of characters used as initials.
24 'chars' => 2,
25
26 // font size
27 'fontSize' => 48,
28
29 // convert initial letter to uppercase
30 'uppercase' => false,
31
32 // Fonts used to render text.
33 // If contains more than one fonts, randomly selected based on name supplied
34 'fonts' => ['path/to/OpenSans-Bold.ttf', 'path/to/rockwell.ttf'],
35
36 // List of foreground colors to be used, randomly selected based on name supplied
37 'foregrounds' => [
38 '#FFFFFF'
39 ],
40
41 // List of background colors to be used, randomly selected based on name supplied
42 'backgrounds' => [
43 '#f44336',
44 '#E91E63',
45 '#9C27B0',
46 '#673AB7',
47 '#3F51B5',
48 '#2196F3',
49 '#03A9F4',
50 '#00BCD4',
51 '#009688',
52 '#4CAF50',
53 '#8BC34A',
54 '#CDDC39',
55 '#FFC107',
56 '#FF9800',
57 '#FF5722',
58 ],
59
60 'border' => [
61 'size' => 1,
62
63 // border color, available value are:
64 // 'foreground' (same as foreground color)
65 // 'background' (same as background color)
66 // or any valid hex ('#aabbcc')
67 'color' => 'foreground'
68 ]
69];

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:

1composer require laravolt/avatar
2
3# Or for Laravel 5.1
4composer 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.

Filed in:

Paul Redmond

Full stack web developer. Author of Lumen Programming Guide and Docker for PHP Developers.