Adding graviatar in nav

philippkeller · Aug 16, 2013 · 322df81 · 322df81
1 parent 9b550cd
commit 322df81
Show file tree

Hide file tree

Showing 4 changed files with 47 additions and 2 deletions.
diff --git a/README.md b/README.md
@@ -70,11 +70,20 @@ Default config:
 #imagesloaded_js: true # gives images a loading icon
 #fancybox: true
 
+# stick footer to page bottom
 sticky_footer: true
 
 # don't use this without sticky_footer
 #footer_color: 'black'
 
+# Include gravatar to left of page title in navbar.
+# It will overflow navbar a bit intentionally.
+#
+# NOTE: this should be considered experimental
+gravatar:
+  # e.g.
+  #gravatar: ed808193b8c2c8516715816f90a005b2 # that's me
+
 menu:
   Home: /
   Archives: /archives

diff --git a/_config.yml b/_config.yml
@@ -29,11 +29,20 @@
 #imagesloaded_js: true # gives images a loading icon
 #fancybox: true
 
+# stick footer to page bottom
 sticky_footer: true
 
 # don't use this without sticky_footer
 #footer_color: 'black'
 
+# Include gravatar to left of page title in navbar.
+# It will overflow navbar a bit intentionally.
+#
+# NOTE: this should be considered experimental
+gravatar:
+  # e.g.
+  #gravatar: ed808193b8c2c8516715816f90a005b2 # that's me
+
 menu:
   Home: /
   Archives: /archives

diff --git a/layout/_partial/head.ejs b/layout/_partial/head.ejs
@@ -63,5 +63,25 @@
   <% } %>
   <% if (theme.sticky_footer) { %>
   <link rel="stylesheet" href="<%-config.root%>css/sticky_footer.css">
-  <% } %>
+<% } %>
+
+<% if (theme.gravatar) { %>
+    <style>
+      #gravatar_nav {
+        margin-top: 10px;
+        margin-bottom: -17px;
+        margin-right: 10px;
+        background: red;
+        padding: 0;
+         -webkit-border-radius: 8px;
+        -moz-border-radius: 8px;
+        -khtml-border-radius: 8px;
+        border-radius: 8px;
+        overflow: hidden;
+      }
+      .navbar .brand {
+        padding: 0px 20px 0px;
+      }
+    </style>
+<% }%>
 </head>
diff --git a/layout/_partial/header.ejs b/layout/_partial/header.ejs
@@ -6,7 +6,14 @@
         <span class="icon-bar"></span>
         <span class="icon-bar"></span>
       </button>
-      <a class="brand" href="<%- config.root %>"><%- config.title %></a>
+      <% if (theme.gravatar) { %>
+      <span class="brand">
+        <a class="brand" href="<%- config.root %>"><img id="gravatar_nav" src="http://www.gravatar.com/avatar/<%-theme.gravatar%>.jpg?s=50"/><%- config.title %></a>
+      </span>
+      <% } else { %>
+        <a class="brand" href="<%- config.root %>"><%- config.title %></a>
+      <% } %>
+
       <div class="nav-collapse collapse navbar-responsive-collapse">
         <ul class="nav">
         <% for (var i in theme.menu){ %>