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:

benbalter

or in HTML:

<img class="avatar avatar-small" 
     src="https://avatars3.githubusercontent.com/benbalter?v=3&amp;s=40" 
     alt="benbalter" 
     srcset="https://avatars3.githubusercontent.com/benbalter?v=3&amp;s=40 1x, 
             https://avatars3.githubusercontent.com/benbalter?v=3&amp;s=80 2x, 
             https://avatars3.githubusercontent.com/benbalter?v=3&amp;s=120 3x, 
             https://avatars3.githubusercontent.com/benbalter?v=3&amp;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:

benbalter benbalter benbalter

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:

geraldb dervondenbergen floord karlhorky ramonh nikgraf spuz marfi haslinger 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