j1-template 2022.5.2 → 2022.6.0

data/lib/starter_web/pages/public/blog/navigator/{archive.html → archive/allview.html}

@@ -1,8 +1,15 @@
 ---
 layout:                                 page
-title:                                  Starter Blog
-tagline:                                all posts
-description:                            Create index pages for articles this website
+title:                                  Blog Archive
+tagline:                                Explore All Posts
+date:                                   2022-01-01 01:00:00
+description: >
+                                        When it comes to the usability of a website, the focus of your
+                                        visitors is on one important component: The Navigation System
+                                        of the site. To make all posts easy accessible to the visitors,
+                                        the Navigation System provides a Blog Explorer module. The explorer
+                                        module supports the users for browsing articles by sorting criteria
+                                        like category and date or browsing the archive for all articles.
 
 categories:                             [ Blog ]
 tags:                                   [ Navigator, Archive ]
@@ -15,6 +22,12 @@ pagination:
   enabled:                              false
   permalink:                            /page:num/
 
+image:
+  path:                                 /assets/images/modules/attics/matthaeus-1920x1280.jpg
+  width:                                1920
+  height:                               1280
+  alt:                                  Photo by Matthaeus on Unsplash
+
 analytics:                              false
 advertising:                            false
 comments:                               false
@@ -22,16 +35,14 @@ comments:                               false
 exclude_from_search:                    true
 regenerate:                             false                                   # set to 'true', if update posts is required
 
-resources:                              [ animate ]
+resources:                              [ animate, scroller ]
 resource_options:
 
   - attic:
-
       alignY:                           top
       slides:
-
         - url:                          /assets/images/modules/attics/matthaeus-1920x1280.jpg
-          alt:                          Photo by Matthaeus
+          alt:                          Photo by Matthaeus on Unsplash
           badge:
             type:                       unsplash
             author:                     Matthaeus
@@ -73,14 +84,25 @@ resource_options:
 {% endif %}
 
 {% include {{get_page_path}} mode='absolute' %}
+{% assign navigator_path = page_path|remove_first: '/archive' %}
 
-{% capture navigator %}{{page_path}}/{% endcapture %}
-{% capture blog_preview %}{{page_path}}/archive/preview/{% endcapture %}
-{% capture date_view %}{{page_path}}/archive/dateview/{% endcapture %}
-{% capture category_view %}{{page_path}}/archive/categoryview/{% endcapture %}
-{% capture tag_view %}{{page_path}}/archive/tagview/{% endcapture %}
+{% capture navigator %}{{navigator_path}}/{% endcapture %}
+{% capture date_view %}{{page_path}}/dateview/{% endcapture %}
+{% capture category_view %}{{page_path}}/categoryview/{% endcapture %}
+{% capture tag_view %}{{page_path}}/tagview/{% endcapture %}
 {% capture all_view %}{{page_path}}/{% endcapture %}
 
+{% comment %} Collect CSS image filters
+-------------------------------------------------------------------------------- {% endcomment %}
+{% if blog_navigator_options.filters %}
+  {% for filter in blog_navigator_options.filters %}
+    {% capture css_filters %}{{css_filters}} {{filter[0]}}({{filter[1]}}){% endcapture %}
+  {% endfor %}
+  {% capture image_filters %}filter:{{css_filters}}{% endcapture %}
+{% else %}
+  {% assign image_filters = '' %}
+{% endif %}
+
 {% comment %} language detection
 -------------------------------------------------------------------------------- {% endcomment %}
 {% if site.language == "en" %}
@@ -127,8 +149,8 @@ site_category_word_list:    {{site_category_word_list | debug}}
 <!-- [INFO   ] [ {{page.url}} ] [Generate HTML}] -->
 <div class="paginator ml-3">
   <ul class="pagination raised-z0">
-    <li class="page-item"><a class="page-link" href="{{navigator | prepend: site.baseurl}}" alt="Blog View">Navigator</a></li>
-    <li class="page-item"><a class="page-link" href="{{category_view|prepend: site.baseurl}}" alt="View by Category">{{category_view_button_text}}</a></li>
+    <li class="page-item"><a class="page-link" href="{{navigator}}" alt="Blog View">Navigator</a></li>
+    <li class="page-item"><a class="page-link" href="{{category_view}}" alt="View by Category">{{category_view_button_text}}</a></li>
     <li class="page-item"><a class="page-link" href="{{date_view}}" alt="View by Date">{{date_view_button_text}}</a></li>
     <!-- li class="page-item"><a class="page-link" href="{{tag_view}}" alt="{{tag_view_button_text}}">By Tag</a></li -->
   </ul>
@@ -140,7 +162,7 @@ site_category_word_list:    {{site_category_word_list | debug}}
   {% endif %}
 
   <div class="post-headline">
-    <h1 id="post-headline notoc" class="mt-5">{{view_headline}}</h1>
+    <h2 id="post-headline notoc" class="mt-5">{{view_headline}}</h2>
   </div>
 
   <!-- ul class="list-unstyled link-news" -->
@@ -155,34 +177,39 @@ site_category_word_list:    {{site_category_word_list | debug}}
       {% assign comment_count = sharing.comment_count %}
     {% endfor %}
 
-    <article class="card raised-z3 mb-5">
+    <article class="card raised-z0 mb-5">
       <div class="card-header bg-primary">
 
-        <h2 id="{{100000|rand}}" class="notranslate">
+        <h3 id="{{100000|rand}}" class="card-header bg-primary notranslate">
           {{post.title}}
           <!-- span>{{post.tagline}}</span -->
-        </h2>
+        </h3>
 
       </div>
 
-
       <div class="row mx-0">
-
-        <!-- [INFO   ] [j1.pages.blog.navigator.archive          ] [Check if post image is available] -->
+        <!-- [INFO   ] [j1.pages.blog.navigator.archive         ] [Check if post image is available] -->
         {% if post.image %}
-        <!-- [INFO   ] [j1.pages.blog.navigator.archive          ] [Post image is available] -->
+        <!-- [INFO   ] [j1.pages.blog.navigator.archive         ] [Post image is available] -->
+        {% if post.image.path %}
+        <!-- [INFO   ] [j1.pages.blog.navigator.archive         ] [use full post image data] -->
         <div class="col-md-6 img-bg--fill px-0"
-          style="border-right: 1px dotted rgba(0, 0, 0, 0.25); background-image: url({{post.image}});">
+          style="border-right: 1px dotted rgba(0, 0, 0, 0.25); {{image_filters}}; background-image: url({{post.image.path}});">
         </div>
         {% else %}
-        <!-- [INFO   ] [j1.pages.blog.navigator.archive          ] [Post image missing, using configured default image] -->
         <div class="col-md-6 img-bg--fill px-0"
-          style="border-right: 1px dotted rgba(0, 0, 0, 0.25); background-image: url({{blog_navigator_options.post_image}});">
+          style="border-right: 1px dotted rgba(0, 0, 0, 0.25); {{image_filters}}; background-image: url({{post.image}});">
+        </div>
+        {% endif %}
+        {% else %}
+        <!-- [INFO   ] [j1.pages.blog.navigator.archive         ] [Post image missing, using configured default image] -->
+        <div class="col-md-6 img-bg--fill px-0"
+          style="border-right: 1px dotted rgba(0, 0, 0, 0.25); {{image_filters}}; background-image: url({{blog_navigator_options.post_image}});">
         </div>
         {% endif %}
 
         <div class="col-md-6 p-0">
-          <div class="card-body r-text-300">{{excerpt}}</div>
+          <div class="card-body r-text-300 mt-0">{{excerpt}}</div>
           <div class="card-footer not-rounded r-text-200">
             <div class="card-footer-text">
 

data/lib/starter_web/pages/public/blog/navigator/archive/categoryview.html

@@ -1,8 +1,8 @@
 ---
 layout:                                 page
-title:                                  Starter Blog
-tagline:                                posts by category
-date:                                   2023-01-01 01:00:00 +100
+title:                                  Post by Category
+tagline:                                Explore Posts
+date:                                   2022-01-01 01:00:00
 description:                            Browse articles by category
 
 categories:                             [ Blog ]
@@ -16,6 +16,12 @@ pagination:
   enabled:                              false
   permalink:                            /page:num/
 
+image:
+  path:                                 /assets/images/modules/attics/matthaeus-1920x1280.jpg
+  width:                                1920
+  height:                               1280
+  alt:                                  Photo by Matthaeus on Unsplash
+
 analytics:                              true
 comments:                               false
 
@@ -26,12 +32,10 @@ resources:                              [ animate ]
 resource_options:
 
   - attic:
-
       alignY:                           top
       slides:
-
         - url:                          /assets/images/modules/attics/matthaeus-1920x1280.jpg
-          alt:                          Photo by Matthaeus
+          alt:                          Photo by Matthaeus on Unsplash
           badge:
             type:                       unsplash
             author:                     Matthaeus
@@ -45,6 +49,7 @@ resource_options:
 {% capture get_category_item %}themes/{{site.template.name}}/procedures/global/get_category_item.proc{% endcapture %}
 {% capture create_word_cloud %}themes/{{site.template.name}}/procedures/global/create_word_cloud.proc{% endcapture %}
 
+
 {% comment %} Set config files
 -------------------------------------------------------------------------------- {% endcomment %}
 {% assign template_config         = site.data.j1_config %}
@@ -74,13 +79,13 @@ resource_options:
 {% endif %}
 
 {% include {{get_page_path}} mode='absolute' %}
-{% assign navigator_path = page_path|remove_first:'archive' %}
+{% assign navigator_path = page_path|remove_first: 'archive' %}
 
 {% capture navigator %}{{navigator_path}}{% endcapture %}
 {% capture date_view %}{{page_path}}/dateview/{% endcapture %}
 {% capture category_view %}{{page_path}}/categoryview/{% endcapture %}
 {% capture tag_view %}{{page_path}}/tagview/{% endcapture %}
-{% capture all_view %}{{page_path}}/{% endcapture %}
+{% capture all_view %}{{page_path}}/allview/{% endcapture %}
 
 {% if page.sort == 'title' %}
   {% assign sorted_posts = site.posts|sort: 'title' %}
@@ -114,6 +119,17 @@ by processing of categories
   {% capture category_list %}{{category_list|append: category}}{% unless forloop.last %},{% endunless %}{% endcapture %}
 {% endfor %}
 
+{% comment %} Collect CSS image filters
+-------------------------------------------------------------------------------- {% endcomment %}
+{% if blog_navigator_options.filters %}
+  {% for filter in blog_navigator_options.filters %}
+    {% capture css_filters %}{{css_filters}} {{filter[0]}}({{filter[1]}}){% endcapture %}
+  {% endfor %}
+  {% capture image_filters %}filter:{{css_filters}}{% endcapture %}
+{% else %}
+  {% assign image_filters = '' %}
+{% endif %}
+
 {% comment %} language detection
 -------------------------------------------------------------------------------- {% endcomment %}
 {% if site.language == "en" %}
@@ -154,7 +170,6 @@ site_category_word_list:    {{site_category_word_list | debug}}
 --------------------------------------------------------------------------------
 {% endcomment %}
 
-
 {% comment %} Main
 -------------------------------------------------------------------------------- {% endcomment %}
 <!-- [INFO   ] [ {{page.url}} ] [Generate HTML}] -->
@@ -163,7 +178,8 @@ site_category_word_list:    {{site_category_word_list | debug}}
 <!-- [INFO   ] [ {{page.url}} ] [Generate HTML}] -->
 <div class="paginator ml-3">
   <ul class="pagination raised-z0">
-    <li class="page-item"><a class="page-link" href="{{navigator|prepend: site.baseurl}}" alt="Blog Navigator">Navigator</a></li>
+    <!-- li class="page-item"><a class="page-link" href="{{navigator|prepend: site.baseurl}}" alt="Blog Navigator">Navigator</a></li -->
+    <li class="page-item"><a class="page-link" href="{{navigator|remove_first:archive}}" alt="Blog Navigator">Navigator</a></li>
     <li class="page-item"><a class="page-link" href="{{date_view}}" alt="View by Date">{{date_view_button_text}}</a></li>
     <!-- li class="page-item"><a class="page-link" href="{{tag_view}}" alt="{{tag_view_button_text}}">By Tag</a></li -->
     <li class="page-item"><a class="page-link" href="{{all_view}}" alt="View All">{{archive_view_button_text}}</a></li>
@@ -176,8 +192,9 @@ site_category_word_list:    {{site_category_word_list | debug}}
   {% endif %}
 
   <div class="post-headline">
-    <h1 id="post-headline notoc" class="mt-5">{{view_headline}}</h1>
+    <h2 id="post-headline notoc" class="mt-5">{{view_headline}}</h2>
   </div>
+
   {% assign tags = site.categories|sort %}
   {% for tag in tags %}
     {% assign category = tag|first %}
@@ -200,25 +217,33 @@ site_category_word_list:    {{site_category_word_list | debug}}
             {% assign comment_count = sharing.comment_count %}
           {% endfor %}
 
-          <article class="card raised-z3 mb-5">
-            <h3 id="{{100000|rand}}" class="card-header bg-primary notranslate">{{post.title}}</h3>
+          <article class="card raised-z0 mb-5">
+            <div class="card-header bg-primary">
+              <h3 id="{{100000|rand}}" class="card-header bg-primary notranslate">{{post.title}}</h3>
+            </div>
             <div class="row mx-0">
-
-              <!-- [INFO   ] [j1.pages.blog.navigator.archive          ] [Check if post image is available] -->
+              <!-- [INFO   ] [j1.pages.blog.navigator.categoryview     ] [Check if post image is available] -->
               {% if post.image %}
-              <!-- [INFO   ] [j1.pages.blog.navigator.archive          ] [Post image is available] -->
+              <!-- [INFO   ] [j1.pages.blog.navigator.categoryview     ] [Post image is available] -->
+              {% if post.image.path %}
+              <!-- [INFO   ] [j1.pages.blog.navigator.categoryview     ] [use full post image data] -->
               <div class="col-md-6 img-bg--fill px-0"
-                style="border-right: 1px dotted rgba(0, 0, 0, 0.25); background-image: url({{post.image}});">
+                style="border-right: 1px dotted rgba(0, 0, 0, 0.25); {{image_filters}}; background-image: url({{post.image.path}});">
               </div>
               {% else %}
-              <!-- [INFO   ] [j1.pages.blog.navigator.archive          ] [Post image missing, using configured default image] -->
               <div class="col-md-6 img-bg--fill px-0"
-                style="border-right: 1px dotted rgba(0, 0, 0, 0.25); background-image: url({{blog_navigator_options.post_image}});">
+                style="border-right: 1px dotted rgba(0, 0, 0, 0.25); {{image_filters}}; background-image: url({{post.image}});">
+              </div>
+              {% endif %}
+              {% else %}
+              <!-- [INFO   ] [j1.pages.blog.navigator.categoryview     ] [Post image missing, using configured default image] -->
+              <div class="col-md-6 img-bg--fill px-0"
+                style="border-right: 1px dotted rgba(0, 0, 0, 0.25); {{image_filters}}; background-image: url({{blog_navigator_options.post_image}});">
               </div>
               {% endif %}
 
               <div class="col-md-6 p-0">
-                <div class="card-body r-text-300">{{excerpt}}</div>
+                <div class="card-body r-text-300 mt-0">{{excerpt}}</div>
                 <div class="card-footer not-rounded r-text-200">
                   <div class="card-footer-text">
 

data/lib/starter_web/pages/public/blog/navigator/archive/dateview.html

@@ -1,8 +1,15 @@
 ---
 layout:                                 page
-title:                                  Starter Blog
-tagline:                                posts by date
-description:                            Browse articles by date
+title:                                  Post by Date
+date:                                   2022-01-01 01:00:00
+tagline:                                Explore Posts
+description: >
+                                        When it comes to the usability of a website, the focus of your
+                                        visitors is on one important component: The Navigation System
+                                        of the site. To make all posts easy accessible to the visitors,
+                                        the Navigation System provides a Blog Explorer module. The explorer
+                                        module supports the users for browsing articles by sorting criteria
+                                        like category and date or browsing the archive for all articles.
 
 categories:                             [ Blog ]
 tags:                                   [ Navigator, Date ]
@@ -15,6 +22,12 @@ pagination:
   enabled:                              false
   permalink:                            /page:num/
 
+image:
+  path:                                 /assets/images/modules/attics/matthaeus-1920x1280.jpg
+  width:                                1920
+  height:                               1280
+  alt:                                  Photo by Matthaeus on Unsplash
+
 analytics:                              true
 advertising:                            false
 comments:                               false
@@ -26,12 +39,10 @@ resources:                              [ animate ]
 resource_options:
 
   - attic:
-
       alignY:                           top
       slides:
-
         - url:                          /assets/images/modules/attics/matthaeus-1920x1280.jpg
-          alt:                          Photo by Matthaeus
+          alt:                          Photo by Matthaeus on Unsplash
           badge:
             type:                       unsplash
             author:                     Matthaeus
@@ -73,14 +84,24 @@ resource_options:
 {% endif %}
 
 {% include {{get_page_path}} mode='absolute' %}
-{% assign navigator_path = page_path|remove_first:'archive' %}
+{% assign navigator_path = page_path|remove_first: 'archive' %}
 
 {% capture navigator %}{{navigator_path}}{% endcapture %}
 {% capture date_view %}{{page_path}}/dateview/{% endcapture %}
 {% capture category_view %}{{page_path}}/categoryview/{% endcapture %}
 {% capture tag_view %}{{page_path}}/tagview/{% endcapture %}
-{% capture all_view %}{{page_path}}/{% endcapture %}
+{% capture all_view %}{{page_path}}/allview/{% endcapture %}
 
+{% comment %} Collect CSS image filters
+-------------------------------------------------------------------------------- {% endcomment %}
+{% if blog_navigator_options.filters %}
+  {% for filter in blog_navigator_options.filters %}
+    {% capture css_filters %}{{css_filters}} {{filter[0]}}({{filter[1]}}){% endcapture %}
+  {% endfor %}
+  {% capture image_filters %}filter:{{css_filters}}{% endcapture %}
+{% else %}
+  {% assign image_filters = '' %}
+{% endif %}
 
 {% comment %} language detection
 -------------------------------------------------------------------------------- {% endcomment %}
@@ -129,8 +150,9 @@ site_category_word_list:    {{site_category_word_list | debug}}
 <!-- [INFO   ] [ {{page.url}} ] [Generate HTML}] -->
 <div class="paginator ml-3">
   <ul class="pagination raised-z0">
-    <li class="page-item"><a class="page-link" href="{{navigator|prepend: site.baseurl}}" alt="Blog Navigator">Navigator</a></li>
-    <li class="page-item"><a class="page-link" href="{{category_view|prepend: site.baseurl}}" alt="View by Category">{{category_view_button_text}}</a></li>
+    <!-- li class="page-item"><a class="page-link" href="{{navigator|prepend: site.baseurl}}" alt="Blog Navigator">Navigator</a></li -->
+    <li class="page-item"><a class="page-link" href="{{navigator}}" alt="Blog Navigator">Navigator</a></li>
+    <li class="page-item"><a class="page-link" href="{{category_view}}" alt="View by Category">{{category_view_button_text}}</a></li>
     <li class="page-item"><a class="page-link" href="{{all_view}}" alt="View All">{{archive_view_button_text}}</a></li>
   </ul>
 </div>
@@ -182,25 +204,33 @@ site_category_word_list:    {{site_category_word_list | debug}}
       {% comment %} {% assign excerpt = post.excerpt|truncatewords: truncate_words|replace:'...',' ...'|strip_html %} {% endcomment %}
       {% assign excerpt = post.excerpt|truncatewords: truncate_words|replace:'...',' ...' %}
       <li>
-        <article class="card raised-z3 mb-5">
-          <h3 id="{{100000|rand}}" class="card-header bg-primary notranslate">{{post.title}}</h3>
+        <article class="card raised-z0 mb-5">
+          <div class="card-header bg-primary">
+            <h3 id="{{100000|rand}}" class="card-header bg-primary notranslate">{{post.title}}</h3>
+          </div>
           <div class="row mx-0">
-
-            <!-- [INFO   ] [j1.pages.blog.navigator.archive          ] [Check if post image is available] -->
+            <!-- [INFO   ] [j1.pages.blog.navigator.dateview         ] [Check if post image is available] -->
             {% if post.image %}
-            <!-- [INFO   ] [j1.pages.blog.navigator.archive          ] [Post image is available] -->
+            <!-- [INFO   ] [j1.pages.blog.navigator.dateview         ] [Post image is available] -->
+            {% if post.image.path %}
+            <!-- [INFO   ] [j1.pages.blog.navigator.dateview         ] [use full post image data] -->
+            <div class="col-md-6 img-bg--fill px-0"
+              style="border-right: 1px dotted rgba(0, 0, 0, 0.25); {{image_filters}}; background-image: url({{post.image.path}});">
+            </div>
+            {% else %}
             <div class="col-md-6 img-bg--fill px-0"
-              style="border-right: 1px dotted rgba(0, 0, 0, 0.25); background-image: url({{post.image}});">
+              style="border-right: 1px dotted rgba(0, 0, 0, 0.25); {{image_filters}}; background-image: url({{post.image}});">
             </div>
+            {% endif %}
             {% else %}
-            <!-- [INFO   ] [j1.pages.blog.navigator.archive          ] [Post image missing, using configured default image] -->
+            <!-- [INFO   ] [j1.pages.blog.navigator.dateview         ] [Post image missing, using configured default image] -->
             <div class="col-md-6 img-bg--fill px-0"
-              style="border-right: 1px dotted rgba(0, 0, 0, 0.25); background-image: url({{blog_navigator_options.post_image}});">
+              style="border-right: 1px dotted rgba(0, 0, 0, 0.25); {{image_filters}}; background-image: url({{blog_navigator_options.post_image}});">
             </div>
             {% endif %}
 
             <div class="col-md-6 p-0">
-              <div class="card-body r-text-300">{{excerpt}}</div>
+              <div class="card-body r-text-300 mt-0">{{excerpt}}</div>
               <div class="card-footer not-rounded r-text-200">
                 <div class="card-footer-text">
 

data/lib/starter_web/pages/public/blog/navigator/archive/tagview.html

@@ -1,9 +1,15 @@
 ---
 layout:                                 page
-title:                                  Starter Blog
-tagline:                                posts by tag
+title:                                  Posts By Tag
+tagline:                                Explore Posts
+date:                                   2022-01-01 01:00:00
 description: >
-                                        Browse articles by tag
+                                        When it comes to the usability of a website, the focus of your
+                                        visitors is on one important component: The Navigation System
+                                        of the site. To make all posts easy accessible to the visitors,
+                                        the Navigation System provides a Blog Explorer module. The explorer
+                                        module supports the users for browsing articles by sorting criteria
+                                        like category and date or browsing the archive for all articles.
 
 categories:                             [ Blog ]
 tags:                                   [ Navigator, Tags ]
@@ -16,6 +22,12 @@ pagination:
   enabled:                              false
   permalink:                            /page:num/
 
+image:
+  path:                                 /assets/images/modules/attics/matthaeus-1920x1280.jpg
+  width:                                1920
+  height:                               1280
+  alt:                                  Photo by Matthaeus on Unsplash
+
 analytics:                              true
 advertising:                            false
 comments:                               false
@@ -27,12 +39,10 @@ resources:                              [ animate ]
 resource_options:
 
   - attic:
-
       alignY:                           top
       slides:
-
         - url:                          /assets/images/modules/attics/matthaeus-1920x1280.jpg
-          alt:                          Photo by Matthaeus
+          alt:                          Photo by Matthaeus on Unsplash
           badge:
             type:                       unsplash
             author:                     Matthaeus
@@ -86,14 +96,13 @@ resource_options:
 {% assign letter_group_written  = false %}
 
 {% include {{get_page_path}} mode='absolute' %}
-{% assign navigator_path = page_path | remove_first:'archive' %}
+{% assign navigator_path = page_path | remove_first: 'archive' %}
 
 {% capture navigator %}{{navigator_path}}{% endcapture %}
-{% capture blog_preview %}{{page_path}}/preview/{% endcapture %}
 {% capture date_view %}{{page_path}}/dateview/{% endcapture %}
 {% capture category_view %}{{page_path}}/categoryview/{% endcapture %}
 {% capture tag_view %}{{page_path}}/tagview/{% endcapture %}
-{% capture all_view %}{{page_path}}/{% endcapture %}
+{% capture all_view %}{{page_path}}/allview/{% endcapture %}
 
 {% comment %} TODO: skip_words should configured by yaml data file?
 -------------------------------------------------------------------------------- {% endcomment %}
@@ -106,6 +115,17 @@ resource_options:
   {% capture tag_list %}{{tag_list | append: tag}}{% unless forloop.last %},{% endunless %}{% endcapture %}
 {% endfor %}
 
+{% comment %} Collect CSS image filters
+-------------------------------------------------------------------------------- {% endcomment %}
+{% if blog_navigator_options.filters %}
+  {% for filter in blog_navigator_options.filters %}
+    {% capture css_filters %}{{css_filters}} {{filter[0]}}({{filter[1]}}){% endcapture %}
+  {% endfor %}
+  {% capture image_filters %}filter:{{css_filters}}{% endcapture %}
+{% else %}
+  {% assign image_filters = '' %}
+{% endif %}
+
 {% comment %} language detection
 -------------------------------------------------------------------------------- {% endcomment %}
 {% if site.language == "en" %}
@@ -154,10 +174,10 @@ site_category_word_list:    {{site_category_word_list | debug}}
 
 <div class="paginator ml-3">
   <ul class="pagination raised-z0">
-    <li class="page-item"><a class="page-link" href="{{navigator | prepend: site.baseurl}}" alt="Blog View">Navigator</a></li>
-    <li class="page-item"><a class="page-link" href="{{date_view | prepend: site.baseurl}}" alt="View by Date">By Date</a></li>
-    <li class="page-item"><a class="page-link" href="{{category_view | prepend: site.baseurl}}" alt="View by Category">By Category</a></li>
-    <li class="page-item"><a class="page-link" href="{{all_view | prepend: site.baseurl}}" alt="View All">All Posts</a></li>
+    <li class="page-item"><a class="page-link" href="{{navigator}}" alt="Blog View">Navigator</a></li>
+    <li class="page-item"><a class="page-link" href="{{date_view}}" alt="View by Date">By Date</a></li>
+    <li class="page-item"><a class="page-link" href="{{category_view}}" alt="View by Category">By Category</a></li>
+    <li class="page-item"><a class="page-link" href="{{all_view}}" alt="View All">All Posts</a></li>
   </ul>
 </div>
 
@@ -167,7 +187,7 @@ site_category_word_list:    {{site_category_word_list | debug}}
   {% endif %}
 
   <div class="post-headline">
-    <h1 id="post-headline notoc" class="mt-5">Posts By Tag</h1>
+    <h2 id="post-headline notoc" class="mt-5">Posts By Tag</h2>
   </div>
 
   {% assign letter_group = letter_group_array[letter_group_counter] %}
@@ -182,42 +202,18 @@ site_category_word_list:    {{site_category_word_list | debug}}
 
     {% if skip %} {% continue %} {% endif %}
 
-    {% assign first_letter = this_word | slice: 0, 1  %}
-    {% assign first_letter = first_letter | downcase %}
-
-    {% if letter_group contains first_letter %}
-      {% comment %} jadams, 2018-01-17: logic seems NOT work. Disabled.
-      --------------------------------------------------------------------------
-      <!-- jadams, 2018-01-17: logic seems NOT work. Disabled. -->
-      {% if letter_group_written == false %}
-        <h2 id="id_{{letter_group}}" class="toc-link mt-5 mb-5"><a alt="Back to top" href="#void"><i class="fa fa-tags mr-2"></i></a>{{letter_group | upcase}}</h2>
-        {% assign letter_group_written = true %}
-      {% endif %}
-      -------------------------------------------------------------------------- {% endcomment %}
-    {% else %}
-      {% assign letter_group_counter = letter_group_counter | plus:1 %}
-      {% assign letter_group = letter_group_array[letter_group_counter] %}
-
-      {% comment %} jadams, 2018-01-17: logic seems NOT work.
-                    Added workaround by checking if letter_group has a value
-      -------------------------------------------------------------------------- {% endcomment %}
-      {% if letter_group %}
-      <h2 id="id_{{letter_group}}" class="toc-link mb-3">
-        <a alt="Back to top" href="#void">
-          <i class="fa fa-tags mr-2"></i>
-        </a>{{letter_group | upcase}}
-      </h2>
-      {% endif %}
-      {% assign letter_group_written = true %}
-    {% endif %}
-
     {% comment %}
+    ----------------------------------------------------------------------------
     letter_group: {{letter_group | debug}}
     this_word: {{this_word | debug}}
     first_letter: {{first_letter | debug}}
+    ----------------------------------------------------------------------------
     {% endcomment %}
 
-    <h3 id="{{this_word | replace: '+','_' | replace: ' ','_' | downcase}}" class="toc-link"><a alt="Back to top" href="#void"><i class="fa fa-tag mr-2"></i></a>{{this_word}}</h3>
+    <h2 id="{{this_word | replace: '+','_' | replace: ' ','_' | downcase}}" class="toc-link mb-4">
+      <a class="link-no-decoration" alt="category headline" href="#void"><i class="fa fa-tag mr-2"></i></a>
+      {{this_word}}
+    </h2>
 
     {% for post in site.tags[this_word] %}{% if post.title != null %}
       {% include {{get_category}} post=post %}
@@ -231,25 +227,33 @@ site_category_word_list:    {{site_category_word_list | debug}}
       {% assign excerpt = post.excerpt|truncatewords: truncate_words|replace:'...',' ...' %}
 
       <!-- place post  -->
-      <article class="card raised-z3 mb-5">
-        <h4 id="{{100000|rand}}" class="card-header bg-primary notranslate">{{post.title}}</h4>
+      <article class="card raised-z0 mb-5">
+        <div class="card-header bg-primary">
+          <h3 id="{{100000|rand}}" class="card-header bg-primary notranslate">{{post.title}}</h3>
+        </div>
         <div class="row mx-0">
-
-          <!-- [INFO   ] [j1.pages.blog.navigator.archive          ] [Check if post image is available] -->
+          <!-- [INFO   ] [[j1.pages.blog.navigator.tagview         ] [Check if post image is available] -->
           {% if post.image %}
-          <!-- [INFO   ] [j1.pages.blog.navigator.archive          ] [Post image is available] -->
+          <!-- [INFO   ] [[j1.pages.blog.navigator.tagview         ] [Post image is available] -->
+          {% if post.image.path %}
+          <!-- [INFO   ] [[j1.pages.blog.navigator.tagview         ] [use full post image data] -->
           <div class="col-md-6 img-bg--fill px-0"
-            style="border-right: 1px dotted rgba(0, 0, 0, 0.25); background-image: url({{post.image}});">
+            style="border-right: 1px dotted rgba(0, 0, 0, 0.25); {{image_filters}}; background-image: url({{post.image.path}});">
           </div>
           {% else %}
-          <!-- [INFO   ] [j1.pages.blog.navigator.archive          ] [Post image missing, using configured default image] -->
           <div class="col-md-6 img-bg--fill px-0"
-            style="border-right: 1px dotted rgba(0, 0, 0, 0.25); background-image: url({{blog_navigator_options.post_image}});">
+            style="border-right: 1px dotted rgba(0, 0, 0, 0.25); {{image_filters}}; background-image: url({{post.image}});">
+          </div>
+          {% endif %}
+          {% else %}
+          <!-- [INFO   ] [[j1.pages.blog.navigator.tagview         ] [Post image missing, using configured default image] -->
+          <div class="col-md-6 img-bg--fill px-0"
+            style="border-right: 1px dotted rgba(0, 0, 0, 0.25); {{image_filters}}; background-image: url({{blog_navigator_options.post_image}});">
           </div>
           {% endif %}
 
           <div class="col-md-6 p-0">
-            <div class="card-body r-text-300">{{excerpt}}</div>
+            <div class="card-body r-text-300 mt-0">{{excerpt}}</div>
             <div class="card-footer not-rounded r-text-200">
               <div class="card-footer-text">