From 9dcc827c0f10d01914199c40573f85d8b973bf2d Mon Sep 17 00:00:00 2001
From: Gerald Bauer <gerald.bauer@gmail.com>
Date: Tue, 29 Nov 2016 17:13:37 +0100
Subject: [PATCH] Create 2016-11-29-jekyll-avatar.md

---
 _posts/2016-11-29-jekyll-avatar.md | 119 +++++++++++++++++++++++++++++
 1 file changed, 119 insertions(+)
 create mode 100644 _posts/2016-11-29-jekyll-avatar.md

diff --git a/_posts/2016-11-29-jekyll-avatar.md b/_posts/2016-11-29-jekyll-avatar.md
new file mode 100644
index 0000000..5ed0f06
--- /dev/null
+++ b/_posts/2016-11-29-jekyll-avatar.md
@@ -0,0 +1,119 @@
+---
+layout: post
+title:  "Jekyll Plugin of the Month - Avatar - Add Profile Pics (Speakers, Members, etc.) to Your Pages"
+---
+
+
+Welcome. 
+The 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:
+
+```
+{% raw %}
+{% avatar benbalter %}
+{% endraw %}
+```
+
+will result in:
+
+{% avatar benbalter %}
+
+or in HTML:
+
+```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:
+
+```
+{% raw %}
+{% avatar benbalter size=80 %}
+{% avatar benbalter size=100 %}
+{% avatar benbalter size=150 %}
+{% endraw %}
+```
+
+will result in:
+
+{% avatar benbalter size=80 %}
+{% avatar benbalter size=100 %}
+{% avatar benbalter size=150 %}
+
+
+## All Together 
+
+If you have a list of users e.g. speakers, members, etc. 
+you use a loop. Example:
+
+```
+{% raw %}
+{% for member in site.data.members %}
+    {% avatar user=member.github size=50 %}
+{% endfor %}
+{% endraw %}
+
+```
+
+(Source: [viennahtml.github.io/_includes/members.html](https://github.com/viennahtml/viennahtml.github.io/blob/master/_includes/members.html))
+
+resulting in:
+
+{% avatar geraldb size=50 %}
+{% avatar dervondenbergenb size=50 %}
+{% avatar floord size=50 %}
+{% avatar karlhorky size=50 %}
+{% avatar ramonh size=50 %}
+
+
+## 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. 
+
+## Learn More
+
+- home :: [benbalter/jekyll-avatar](https://github.com/benbalter/jekyll-avatar)
+- gem :: [jekyll-avatar](https://rubygems.org/gems/jekyll-avatar)
+- rdoc :: [jekyll-avatar](http://rubydoc.info/gems/jekyll-avatar)
+
+
+## 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](http://viennahtml.github.io/) as a (real-world) live example ;-) - 
+[Site Sources](https://github.com/viennahtml/viennahtml.github.io), 
+[Members Page](http://viennahtml.github.io/members), 
+[Speakers Page](http://viennahtml.github.io/speakers), etc.
+
+Happy Publishing with Jekyll.