Create google-like avatars in your app

igorkasyanchuk

Igor Kasyanchuk

Posted on July 1, 2021

Create google-like avatars in your app

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%' %>
Enter fullscreen mode Exit fullscreen mode

And get nice images with user initials inside. Since image is an SVG image it will look nice on any screen.

image

PS: main logic is located here: https://github.com/igorkasyanchuk/avatarro/blob/main/lib/avatarro.rb#L49.

Look forward to hear your comments.

💖 💪 🙅 🚩
igorkasyanchuk
Igor Kasyanchuk

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