Create google-like avatars in your app
Igor Kasyanchuk
Posted on July 1, 2021
For people who just want to check gem and not ready the story: https://github.com/igorkasyanchuk/avatarro
On many projects in my carrier I was needed to handle situation when I need to show some "avatar" image for user when he is missing photo. Usually with gems like paperclip, carrierwave you creating a fallback and it returns a dummy photo.
More interesting solution is to show initials of the user in some circle or rectangle like Google (and many others) doing it.
First solution what we used is custom html/css and very simple helper. This solution is currently on one my project.
But just today I've created a new gem to handle this much better: https://github.com/igorkasyanchuk/avatarro.
Now I can use methods from the gem:
<%= image_tag Avatarro.image(current_user.full_name), size: '24x24' %>
<%= image_tag Avatarro.image("Igor Kasyanchuk", solid: true), size: '24x24' %>
<%= image_tag Avatarro.image("IK"), size: '32x32' %>
<%= raw Avatarro.svg("IK") %>
<%= image_tag Avatarro.image(current_user.full_name, random: true, solid: true), size: '20x20', style: 'margin-right: 5px; border-radius: 50%' %>
And get nice images with user initials inside. Since image is an SVG image it will look nice on any screen.
PS: main logic is located here: https://github.com/igorkasyanchuk/avatarro/blob/main/lib/avatarro.rb#L49.
Look forward to hear your comments.
Posted on July 1, 2021
Join Our Newsletter. No Spam, Only the good stuff.
Sign up to receive the latest update from our blog.
Related
November 29, 2024