Generate avatars with initials from user names.
Ever seen those avatars (basically everywhere) that has your initials — mine would be LR; Lasse Rafn — well this package allows you to generate those, in a simple manner.
Thank you to all our backers! 🙏 [Become a backer]
Support this project by becoming a sponsor. Your logo will show up here with a link to your website. [Become a sponsor]
There’s also a api you can use: https://ui-avatars.com
You just require using composer and you’re good to go!
composer require lasserafn/php-initial-avatar-generator
Rad, and long, package name.. huh? Sorry. I’m not very good with names.
As with installation, usage is quite simple. Generating a image is done by running:
$avatar = new LasseRafn\InitialAvatarGenerator\InitialAvatar();$image = $avatar->name('Lasse Rafn')->generate();
Thats it! The method will return a instance of Image from Intervention so you can stream, download or even encode the image:
return $image->stream('png', 100);
You can also just pass along the initials, and it will use those. Should you just include a first name, it will use the first two letters of it.
To display the image generated by the InitialAvatarGenerator library directly on a webpage, you can utilize PHP headers to output the image as a stream or generate a temporary file and display it using an <img> tag.
To output the image as a stream, you can create a separate PHP endpoint (like avatar.php) that generates the avatar image and streams it as a PNG. Then, you use the URL of this endpoint as the src of an <img> tag on your webpage.
An example endpoint file (avatar.php) is below:
<?phprequire 'vendor/autoload.php';use LasseRafn\InitialAvatarGenerator\InitialAvatar;header('Content-Type: image/png'); // Set the content type to PNG$avatar = new InitialAvatar();$name = isset($_GET['name']) ? $_GET['name'] : 'Default User';// Generate the image$image = $avatar->name($name)->generate();// Stream the image directly to the outputecho $image->stream('png', 100);exit;
In the HTML file, you can reference the snippet below:
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Avatar Example</title></head><body><h1>User Avatar</h1><!-- Use the PHP endpoint as the image source --><img src="avatar.php?name=John Doe" alt="Avatar for John Doe" width="100" height="100"><img src="avatar.php?name=Jane Smith" alt="Avatar for Jane Smith" width="100" height="100"></body></html>
$avatar = new LasseRafn\InitialAvatarGenerator\InitialAvatar();echo $avatar->name('Lasse Rafn')->generateSvg()->toXMLString(); // returns SVG XML string
Of cause, passing a name is not the only thing this sweet thing does!
$image = $avatar->name('Albert Magnum')->generate();
Will detect language script (using lasserafn/php-string-script-language) and use a font that supports it.
$image = $avatar->autoFont()->generate();
// will be 96 pixels wide.$image = $avatar->width(96)->generate();
// will be 96 pixels tall.$image = $avatar->height(96)->generate();
$avatar->width(X)->height(X))
// will be 96x96 pixels.$image = $avatar->size(96)->generate();
// will be red$image = $avatar->background('#ff0000')->generate();
// will be red$image = $avatar->color('#ff0000')->generate();
// Will choose a background color based on `name` and a contrasting font color. The color for a specific name will always be the same.$image = $avatar->autoColor()->generate();
Two fonts with two variants are included:
The method will look for the font, if none found it will append __DIR__ and try again, and if not it will default to the first GD Internal Font.
If you input an integer between 1 and 5, it will use a GD Internal font as per that number.
// will be Semibold$image = $avatar->font('/fonts/OpenSans-Semibold.ttf')->generate();
$image = $avatar->fontName('Arial, Helvetica, sans-serif')->generate();
$image = $avatar->name('John Doe Johnson')->length(3)->generate(); // 3 letters = JDJ
$image = $avatar->gd()->generate(); // Uses GD driver$image = $avatar->imagick()->generate(); // Uses Imagick driver
$image = $avatar->rounded()->generate();
Makes rounding smoother with a resizing hack. Could be slower.
$image = $avatar->rounded()->smooth()->generate();
If you are going to use rounded(), you want to use smooth() to avoid pixelated edges. Disabled by default because it COULD be slower.
I would recommend just rounding with CSS.
$image = $avatar->fontSize(0.25)->generate(); // Font will be 25% of image size.
If the Image size is 50px and fontSize is 0.5, the font size will be 25px.
We will not use the ->font() method in this example; as I like the regular one.
return $avatar->name('Lasse Rafn')->length(2)->fontSize(0.5)->size(96) // 48 * 2->background('#8BC34A')->color('#fff')->generate()->stream('png', 100);
Now, using that in a image (sized 48x48 pixels for retina):
<img src="url-for-avatar-generation" width="48" height="48" style="border-radius: 100%" />
Will yield:
Rounded for appearance; the actual avatar is a filled square
The package supports FontAwesome (v5) and already distributes the free version as otf format (see /fonts folder).
However, when using FontAwesome you may want to display one specific icon instead of the user’s initials. This package, therefore, provides a handy glyph($code) method to be used along with FontAwesome.
First, you need to “find” the respective unicode for the glyph you want to insert. For example, you may want to display a typical “user” icon (unicode: f007). The unicode is located near the name of the icon (e.g., see here the user icon as an example here: https://fontawesome.com/icons/user ).
An example for rendering a red avatar with a white “user” glyph would look like this:
// note that we// 1) use glyph() instead of name// 2) change the font to FontAwesome!return $avatar->glyph('f007')->font('/fonts/FontAwesome5Free-Regular-400.otf')->color('#fff')->background('#ff0000')->generate()->stream('png', 100);
Some letters are not supported by the default font files, so I added some fonts to add support. You must use autoFont() to enable this feature. Supported are:
Open Source is best when supported by a community. Any size of contribution is very appreciated.