Add author's avatar option

_config.yml

@@ -84,6 +84,17 @@ theme_settings:
 paginate: 5
 paginate_path: "blog/page:num"
 
+# AUTHORS
+authors:
+  mhagnumdw: # author-id
+    name: MhagnumDw
+    avatar: "assets/img/avatars/mhagnumdw_avatar.jpg"
+    url: 
+  sylhare:
+    name: Sylhare
+    avatar: "assets/img/avatars/sylhare_avatar.png"
+    url: "https://github.com/sylhare"
+
 # PORTFOLIO
 collections:
   portfolio:

_includes/blog.html

@@ -15,9 +15,7 @@ <h1>
                 {{ post.title }}
               </a>
             </h1>
-            <p class="meta">
-              {{ post.date | date: "%B %-d, %Y" }}
-            </p>
+            {% include post_info.html post=post %}
           </header>
           <div class="excerpt">
               {{ post.excerpt | strip_html | escape }}

_includes/post_info.html

@@ -0,0 +1,22 @@
+{%- assign author-id = include.post.author-id -%}
+
+{%- assign author_name = site.authors[author-id].name | default: author-id -%}
+{%- assign avatar = site.authors[author-id].avatar -%}
+{%- assign author_url = site.authors[author-id].url -%}
+{%- assign date = include.post.date -%}
+{%- if (author_url and (avatar or author_name)) -%}
+  {%- assign render_url = true -%}
+{%- else -%}
+  {%- assign render_url = false -%}
+{% endif %}
+
+<div class="post-info">
+  {%- if render_url -%}<a href="{{ author_url | relative_url }}" target="_blank">{%- endif -%}
+    {% if avatar %}
+      <img src="{{ avatar | relative_url }}">
+    {% endif %}
+    <p class="meta">
+      {% if author_name %}{{ author_name }} - {% endif %}{{ date | date: "%B %-d, %Y" }}
+    </p>
+  {%- if render_url -%}</a>{%- endif -%}
+</div>

_layouts/post.html

@@ -5,10 +5,7 @@
   <header id="main" style="">
     {% unless page.hide_title %}
       <h1 id="{{ page.title | cgi_escape }}" class="title">{{ page.title }}</h1>
-      <p class="meta">
-      {{ page.date | date: "%B %-d, %Y" }}
-      {% if page.author %} - {{ page.author }}{% endif %}
-      </p>
+      {% include post_info.html post=page %}
     {% endunless %}
   </header>
   <section class="post-content">

_posts/2014-11-28-markdown-and-html.md

@@ -2,6 +2,7 @@
 layout: post
 title: Markdown and HTML
 tags: [Test, Markdown]
+author-id: unknown # this author does not exist (purposely) in the _config.yml > authors
 ---
 
 Jekyll supports the use of [Markdown](http://daringfireball.net/projects/markdown/syntax) with inline HTML tags which makes it easier to quickly write posts with Jekyll, without having to worry too much about text formatting. A sample of the formatting follows.

_posts/2014-11-29-feature-images.md

@@ -4,6 +4,7 @@ title: Feature images
 feature-img: "assets/img/pexels/desk-messy.webp"
 thumbnail: "assets/img/thumbnails/desk-messy.webp"
 tags: [Test, Lorem]
+author-id: sylhare
 ---
 
 This is an example of a post which includes a feature image specified in the front matter of the post. The feature image spans the full-width of the page, and is shown with the title on permalink pages.

_posts/2019-11-30-sample-post.md

@@ -2,6 +2,7 @@
 layout: post
 title: Sample post
 tags: [A Tag, Test, Lorem, Ipsum]
+author-id: mhagnumdw
 excerpt_separator: <!--more-->
 ---
 

_sass/layouts/_blog.scss

@@ -58,12 +58,6 @@
             @extend .body-link;
         }
 
-        img {
-            width: 100%;
-            padding: 0;
-            vertical-align: middle;
-        }
-
         .post-img {
             vertical-align: middle;
             border-radius: 10px;
@@ -77,6 +71,13 @@
             @media screen and (max-width: $break) {
                 height: 150px;
             }
+
+            img {
+                width: 100%;
+                padding: 0;
+                vertical-align: middle;
+            }
+
         }
 
         .post-img img {

_sass/layouts/_posts.scss

@@ -47,6 +47,29 @@ header {
     text-transform: uppercase;
 }
 
+/* --- Post info --- */
+.post-info {
+    // border: 1px solid $border-color;
+    border-radius: 1em;
+    padding-left: 0.5em;
+    padding-right: 0.5em;
+    display: inline-flex;
+
+    a {
+        display: flex;
+        align-items: center;
+
+    }
+
+    img {
+        border-radius: 1em;
+        padding: 0px;
+        width: 1.5em;
+        height: 100%;
+        margin-right: 0.5em;
+    }
+
+}
 
 /* --- Feature image --- */
 .feature-image {