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-generatorRad, 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:
<?php
require '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 output
echo $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 stringOf 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();// 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:
- /fonts/OpenSans-Regular.ttf
- /fonts/OpenSans-Semibold.ttf
- /fonts/NotoSans-Bold.ttf
- /fonts/NotoSans-Regular.ttf
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);- PHP +7.0
- Fileinfo Extension (from intervention/image)
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:
- Arabic
- Armenian
- Bengali
- Georgian
- Hebrew
- Mongolian
- Chinese
- Thai
- Tibetan
Open Source is best when supported by a community. Any size of contribution is very appreciated.
- GD Library (>=2.0)
- Imagick PHP extension (>=6.5.7)
