Welcome. The Planet Jekyll Plugin of the Month series presents a new addon for your (static) web pages every month.

What’s the jekyll-avatar gem?

Let’s thank Ben Balter who has created the jekyll-avatar gem that lets you add GitHub avatars, that is, user profile pics - to your pages.

Use the new avatar tag and pass in the user’s login. Example:

{% avatar benbalter %}

will result in:

or in HTML:

<img class= "avatar avatar-small" src= "https://avatars3.githubusercontent.com/benbalter?v=3&s=40" alt= "benbalter" srcset= "https://avatars3.githubusercontent.com/benbalter?v=3&s=40 1x, https://avatars3.githubusercontent.com/benbalter?v=3&s=80 2x, https://avatars3.githubusercontent.com/benbalter?v=3&s=120 3x, https://avatars3.githubusercontent.com/benbalter?v=3&s=160 4x" width= "40" height= "40" />

Big, Bigger, Biggest

Use the size argument to make the avatar bigger. Example:

{% avatar benbalter size=80 %} {% avatar benbalter size=100 %} {% avatar benbalter size=150 %}

will result in:

All Together

If you have a list of users e.g. speakers, members, etc. use a loop. Example:

{% for member in site.data.members %} {% avatar user=member.github size=50 %} {% endfor %}

(Source: viennahtml.github.io/_includes/members.html)

resulting in:

and many more ;-)

Yes, Works with GitHub Pages

Last but not least - the good news - the jekyll-avatar gem is an official white-listed GitHub Pages plugin. To use it add the following to your site’s _config.yml file:

gems: - jekyll-avatar

That’s it. Happy Publishing with Jekyll.

Bonus: Build the next Meetup.com - Example: Vienna.html (Static) Meetup Site

Why not build your next meetup site with Jekyll? See the Vienna.html meetup site as a (real-world) live example ;-) - Site Sources, Members Page, Speakers Page, etc.

Learn More