In this screenshot of iOS7 Favourites, when a photo doesn't exist for a particular user, a placeholder image is displayed using the initials of said contact.
Is there a way to do this for the web? A service like lorempixel? Or can this be done in a web language using an image library?
I would like the images to either be square or a circle with the user's initials inside.
I am creating a project in Laravel and I know that it has some image manipulation facilities built in and PHP has a GD library.
Yes.You can generate an image from string using True Type fonts.
Example borrowed from: http://www.php.net/manual/en/function.imagettftext.php
<?php
// Set the content-type
header('Content-Type: image/png');
// Create the image
$im = imagecreatetruecolor(400, 30);
// Create some colors
$white = imagecolorallocate($im, 255, 255, 255);
$grey = imagecolorallocate($im, 128, 128, 128);
$black = imagecolorallocate($im, 0, 0, 0);
imagefilledrectangle($im, 0, 0, 399, 29, $white);
// The text to draw
$text = 'Testing...';
// Replace path by your own font path
$font = 'arial.ttf';
// Add some shadow to the text
imagettftext($im, 20, 0, 11, 21, $grey, $font, $text);
// Add the text
imagettftext($im, 20, 0, 10, 20, $black, $font, $text);
// Using imagepng() results in clearer text compared with imagejpeg()
imagepng($im);
imagedestroy($im);
?>
The result will be:
If you don't want o reinvent the wheel, now we have some libraries to do this task.
Avatar: is a JavaScript library for showing Gravatars or generating user avatars. This one provides a plenty of options to do the task in the front end.
import Avatar from 'avatar-initials';
const avatar = new Avatar(document.getElementById('avatar'), {
useGravatar: true, // Allow Gravatars or not.
fallbackImage: '', // URL or Data URI used when no initials are provided and not using Gravatars.
size: 80, // Size in pixels, fallback for hidden images and Gravatar
// Initial Avatars Specific
initials: '', // Initials to be used.
initial_fg: '#888888', // Text Color
initial_bg: '#f4f6f7', // Background Color
initial_size: null, // Text Size in pixels
initial_weight: 100, // Font weight (numeric value for light, bold, etc.)
initial_font_family: "'Lato', 'Lato-Regular', 'Helvetica Neue'",
// Gravatar Specific
hash: null, // Precalculated MD5 string of an email address
email: null, // Email used for the Gravatar
fallback: 'mm', // Fallback Type
rating: 'x', // Gravatar Rating
forcedefault: false, // Force Gravatar Defaults
allowGravatarFallback: false, // Use Gravatars fallback, not fallbackImage
// GitHub Specific
github_id: null, // GitHub User ID.
// Avatars.io Specific
use_avatars_io: false, // Enable Avatars.io Support
avatars_io: {
user_id: null, // Avatars.io User ID
identifier: null, // Avatars.io Avatar Identifier
twitter: null, // Twitter ID or Username
facebook: null, // Facebook ID or Username
instagram: null, // Instagram ID or Username
size: 'medium', // Size: small, medium, large
},
setSourceCallback: null, // Callback called when image source is set (useful to cache avatar sources provided by third parties such as Gravatar)
});
No Avatar: Node.js Module and Express middleware to generate avatar image with initials in the back end. What you have to do is to build an object with options to choose text, colors and size of the image.
const { save } = require('no-avatar');
const savePath = __dirname + '/avatar.png';
const options = {
width: 150,
height: 150,
text: userInitials,
bgColor: 000000,
fontColor: FFFFFF,
fontSize: 60
};
save(savePath, options, function(err){
if(err) return console.log(err);
return console.log('avatar.png saved at path ' + savePath);
});