Adding little badges to posts and post previews

These links allow users to get to related posts
trianglefraternitymtu · May 15, 2018 · 9272ff7 · 9272ff7
1 parent bddc7ff
commit 9272ff7
Show file tree

Hide file tree

Showing 3 changed files with 45 additions and 3 deletions.
diff --git a/_includes/blog-post-preview.html b/_includes/blog-post-preview.html
@@ -5,6 +5,23 @@
   {% endif %}
   <div class="card-body">
     <h2 class="card-title">{{ include.post.title }}</h2>
+
+    {% assign visible-tags = "" %}
+    {% for t in site.tags %}
+    {% if include.post.tags contains t.title %}
+    {% capture temp %}<a href="{{ t.url }}"><span class="badge badge-pill badge-primary">{{ t.title }}</span></a> {% endcapture %}
+    {% assign visible-tags = visible-tags | append: temp %}
+    {% endif %}
+    {% endfor %}
+    {% if visible-tags %}
+    {% for t in visible-tags %}
+    <div class="blog-post-tags mb-3">
+      <i class="fa fa-tags" aria-hidden="true"></i> Tags:
+      {{ visible-tags }}
+    </div>
+    {% endfor %}
+    {% endif %}
+
     {% if include.post.excerpt == include.post.content %}
     <p class="card-text">{{ include.post.content | remove_first: include.post.excerpt | truncatewords: 40 }}</p>
     {% else %}

diff --git a/_layouts/post.html b/_layouts/post.html
@@ -6,7 +6,7 @@
     {% include navbar.html %}
     <main role="main" class="container mt-3">
       <div class="blog-post">
-        <h1 class="blog-post-title">{{ page.title }}</h1>
+        <h1 class="blog-post-title my-4">{{ page.title }}</h1>
         <div class="row">
           <div class="col">
           {% if page.author %}
@@ -20,8 +20,8 @@ <h1 class="blog-post-title">{{ page.title }}</h1>
         <nav aria-label="breadcrumb" role="navigation">
           <ol class="breadcrumb">
             <li class="breadcrumb-item"><a href="{% link index.md %}">Home</a></li>
-            <li class="breadcrumb-item"><a href="{% link blog/index.html %}">Blog</a></li>
-            <li class="breadcrumb-item active" aria-current="page">{{ page.date | date_to_long_string }} - {{ page.title }}</li>
+            <li class="breadcrumb-item"><a href="{% link blog/index.html %}">Chapter News</a></li>
+            <li class="breadcrumb-item active" aria-current="page">{{ page.title }}</li>
           </ol>
         </nav>
         {% if page.cover-images %}
@@ -55,6 +55,23 @@ <h1 class="blog-post-title">{{ page.title }}</h1>
           {% endif %}
         </div>
         {% endif %}
+
+        {% assign visible-tags = "" %}
+        {% for t in site.tags %}
+        {% if page.tags contains t.title %}
+        {% capture temp %}<a href="{{ t.url }}"><span class="badge badge-pill badge-primary">{{ t.title }}</span></a> {% endcapture %}
+        {% assign visible-tags = visible-tags | append: temp %}
+        {% endif %}
+        {% endfor %}
+        {% if visible-tags %}
+        {% for t in visible-tags %}
+        <div class="blog-post-tags mb-3">
+          <i class="fa fa-tags" aria-hidden="true"></i> Tags:
+          {{ visible-tags }}
+        </div>
+        {% endfor %}
+        {% endif %}
+
         {% if page.excerpt == page.content %}
         <div class="blog-post-content">
           {{ page.content }}

diff --git a/_sass/_global.scss b/_sass/_global.scss
@@ -318,3 +318,11 @@ ul.social-buttons {
     }
   }
 }
+
+.badge-primary {
+  background-color: $primary
+}
+
+.badge-secondary {
+  background-color: $secondary
+}