Quick and dirty initial avatars

A quick guide to adding initial avatars using the Avatarly gem

I wanted to make user avatars a little more personal on one of our applications recently without having to ask a user to upload a user avatar. I though about doing a Gmail style initial avatar and stumbled upon the avatarly gem.

First of all install the gem in your Gemfile and bundle:

gem 'avatarly'

When you use the Gem it give you a blob, then it’s up to you to save it off or display it. As our application has a small amount of users I’m just going to create it on the fly (hence the “quick and dirty” title), you may want to cache it if you think it will cause performance issues.

So in my user model I created an avatar method and Base64 encoded the result of the call to Avatarly. If you pass in no additional options it will create background colours for you on the fly I didn’t want this so I hardcoded the colour to suit my application.

def avatar
  Base64.strict_encode64(Avatarly.generate_avatar(username, opts={background_color: '#fc8848', font_color: '#ffffff'}))
end

As per the Avatarly README these are the options you can pass:

  • background_color (#AABBCC)
  • font_color (#AABBCC)
  • size (default: 32)
  • font (path to font - e.g. “#{Rails.root}/your_font.ttf”)
  • font_size (default: size / 2)
  • vertical_offset (default: 0)
  • format (default: png)
  • lang (language code if unicode aware upcase required - e.g: :tr, default: nil)

So now I have a Base64 encoded user initial avatar all I have to do to display it is call it in my view file:

<img src="data:image/png;base64,<%= current_user.avatar %>" class="header-dropdown__avatar" alt="">

And I end up with something like this:

Initial avatar

Recent posts View all

Freelancing

Getting the most out of your agency

Here are some tips based on years of working with, for, and as an agency on how to get the most out of any work you do.

VS Code Web Dev

Select multiple lines in VS Code

How to select multiple lines to edit at once within VS Code