j1-template 2023.1.0 → 2023.2.1

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: e0f2d92a0218f38699281f99898b269d93c99ffe76171bb3cec58831e6924e42
-  data.tar.gz: 3a7e156a5ad36922d752d19d168c807fd46ca7bdd3cd789e6a1dae1bc93f75dd
+  metadata.gz: cc1b5b82f8d6be2d2dc76adbddacf4c09fffe79031c991a960b38b072e95e46d
+  data.tar.gz: a49049296063c8570192e46716ac9cb8187e064a51c31d88a9006de5ab055066
 SHA512:
-  metadata.gz: 03d3c30d6dfe45a4dca541508a91a996082eb98307bfb74c40023bed6e6bcc4769b8c54fa74e4444aa1bb95966bc790ba10f0c149f495271ba015ee4e8416562
-  data.tar.gz: ac7895af2194c3b3839c150b4dbea10b000a54e4b8364503dc4c6dee272a019dc88e3c2cac14338e4f09db1d10047f21f9208db514aed7cec038659df9b17c82
+  metadata.gz: c07f4f4fbe3ecf611e2112aa7282c041a2673cb1249415587c7bcc33c7da0ec950de3b687d16bcce1ff00da5e98969a4b8b011c0ddccb639562873a208148784
+  data.tar.gz: 9e5606789bc62edb2a1ca3a07d2448eec60c72cf97bf0e6d245d928e9409a7d5846ac1eece44b7cdb6e0d5d2db71b12a9e0e26b1dadcfd3368f65620ee65ee12

data/_includes/themes/j1/layouts/content_generator_collection.html

@@ -62,12 +62,11 @@
       <!-- [INFO   ] [j1.layout.content_generator_coll.html ] [ include a collection pager at the top most position ] -->
       {% include {{pager}} %}
 
-      <div class="post-headline mt-4">
-        <h2 id="coll_article_navigator" class="notoc">{{ page.title }}</h2>
+      <div class="post-headline pt-4">
+        <h2 id="coll_article_navigator" class="notoc">{{page.title}}</h2>
       </div>
 
       <!-- [INFO   ] [j1.layout.content_generator_coll.html ] [ begin place content ] -->
-
       {{content}}
       <!-- [INFO   ] [j1.layout.content_generator_coll.html ] [ end place content ] -->
 

data/assets/data/banner.html

@@ -259,8 +259,8 @@ exclude_from_search:                    true
                 		<img
                 			class="sticker-image"
                 			src="/assets/images/sticker/600x600/sticker-new-version.png"
-                			alt="Get new version 2023.1.0"
-                			title="Get new version 2023.1.0"
+                			alt="Get new version 2023.2.1"
+                			title="Get new version 2023.2.1"
                 			style="width: 140px; height: 120px;"
                 		>
                   </a>
@@ -268,15 +268,17 @@ exclude_from_search:                    true
                 ---------------------------------------------------------------- {% endcomment %}
 
                 {% if heading_position == 'left' %}
-                <h2 class="g-font-weight-500 mb-0 {{card_translate_description}}">{{card_title}}</h2>
-                <p class="tagline mb-0 card_translate_description">{{card_tagline}}</p>
-                <div class="d-inline-block g-width-50 g-height-2 bg-primary mb-2"></div>
+                <div>
+                  <h2 class="g-font-weight-500 mb-0 {{card_translate_description}}">{{card_title}}</h2>
+                  <p class="tagline mb-0 {{card_translate_description}}">{{card_tagline}}</p>
+                  <div class="d-inline-block g-width-50 g-height-2 bg-primary mb-2"></div>
+                </div>
                 {% endif%}
 
                 {% if heading_position == 'center' %}
                 <div class="text-center mb-2">
                 	<h2 class="mb-0 {{card_translate_description}}">{{card_title}}</h2>
-                	<p class="h4 mb-0 text-muted card_translate_description"><i>{{card_tagline}}</i></p>
+                	<p class="h4 mb-0 text-muted {{card_translate_description}}"><i>{{card_tagline}}</i></p>
                 	<div class="d-inline-block g-width-50 g-height-2 bg-primary mb-2"></div>
                 </div>
                 {% endif%}

data/assets/data/masonry.html

@@ -89,108 +89,298 @@ exclude_from_search:                    true
     {% comment %} Collect posts|group grids
     ---------------------------------------------------------------------------- {% endcomment %}
     {% if grid.type == 'post' %}
+
+      {% if grid.gutters %}
+        {% assign gutter = 1  %}
+      {% else %}
+        {% assign gutter = 0  %}
+      {% endif %}
+
       <!-- Posts|Group -->
-      <div id="{{grid.id}}" class="{{grid.id | replace: '_','-' }} row g-0 mx-2">
+      <div id="{{grid.id}}" class="row {{grid.id | replace: '_','-' }} g-0">
         <!-- Collect posts only if group matches -->
         {% for post in site.posts %} {% if post.group contains grid.group %}
 
+
+        {% if grid.translate_links %}
+          {% assign translate = "" %}
+        {% else %}
+          {% assign translate = "notranslate" %}
+        {% endif %}
+
+        {% if grid.link_new_window %}
+          {% assign target = "_blank" %}
+        {% else %}
+          {% assign target = "" %}
+        {% endif %}
+
         <!-- resposive items: 3-2-1 -->
-        <!-- div class="col-lg-4 col-md-6 col-sm-12 px-{{grid.bs_gutter}} py-{{grid.bs_gutter}}" -->
-        <!-- div class="col-xl-{{grid.responsive.xl}} col-lg-{{grid.responsive.lg}} col-md-{{grid.responsive.md}} col-sm-{{grid.responsive.sm}} col-{{grid.responsive.xs}} px-{{grid.bs_gutter}} py-{{grid.bs_gutter}}" -->
-        <div class="col-xl-{{masonry_options.responsive.xl}} col-lg-{{masonry_options.responsive.lg}} col-md-{{masonry_options.responsive.md}} col-sm-{{masonry_options.responsive.sm}} col-{{masonry_options.responsive.xs}} px-{{grid.bs_gutter}} py-{{grid.bs_gutter}}">
-          <article class="card bg-dark text-center text-white border-0 rounded-0">
-            <img class="card-img img-object--cover g-height-300" src="{{post.image.path | relative_url}}" alt="{{post.title}}" style="filter: contrast(1) brightness(0.5);">
-            <!-- div class="card-img-overlay" -->
-              <div class="card-content mt-6">
-                {% if post %}
-                  {% assign categories = post.categories %}
-                {% else %}
-                  {% assign categories = page.categories %}
-                {% endif %}
+        <div class="col-xl-{{masonry_options.responsive.xl}} col-lg-{{masonry_options.responsive.lg}} col-md-{{masonry_options.responsive.md}} col-sm-{{masonry_options.responsive.sm}} col-{{masonry_options.responsive.xs}} px-{{gutter}} py-{{gutter}}">
+
+          <article class="card bg-dark text-center text-white border-0 rounded-0 bottom">
+            <img class="card-img {{grid.image_styles}}" src="{{post.image.path | relative_url}}" alt="{{post.title}}" style="filter: contrast(1) brightness(0.5); height: {{grid.image_height}}; width: {{grid.image_width}}">
+            <div class="card-content mt-5">
+
+              {% if post %}
+                {% assign categories = post.categories %}
+              {% else %}
+                {% assign categories = page.categories %}
+              {% endif %}
+
+              {% comment %} categories: {{categories | debug}}
+              ------------------------------------------------------------------ {% endcomment %}
+              {% for category in categories %}
+              {% if category contains post.category %}
+              <a  class="article-link d-block text-white text-uppercase link-no-decoration {{translate}}"
+                  href="/pages/public/blog/navigator/archive/categoryview/#{{grid.group | slugify}}"
+                  target="{{target}}"
+                  style="font-size: 32px;">
+                {{grid.group}}
+              </a>
+              {% endif %}
+              {% endfor %}
 
-                {% comment %} categories: {{categories | debug}}
-                ---------------------------------------------------------------- {% endcomment %}
+              <ul class="list-inline d-flex justify-content-center mb-5">
+                <li class="list-inline-item">
+                  <i class="mdi mdi-account md-gray-400 mdi-24px mr-1" style="margin-right: 8px;"></i>
+                  {{site.author.name | split: ' ' | first}} &nbsp;&middot;&nbsp;&nbsp;
+                </li>
+                <li class="list-inline-item">
+                  <i class="mdi mdi-calendar-blank md-gray-400 mdi-24px mr-1"></i>
+                  {{post.date | date: '%b %d, %Y'}}
+                </li>
+              </ul>
 
-                {% for category in categories %}
-                {% if category contains post.category %}
-                <a  class="d-block text-white text-uppercase link-no-decoration"
-                    href="/pages/public/blog/navigator/archive/categoryview/#{{category | slugify}}"
-                    style="font-size: 24px;">{{category}}
+              <!-- Post link (caption) -->
+              <h4 class="caption notoc">
+                <a class="article-link {{translate}}"
+                   href="{{post.url}}"
+                   target="{{target}}"
+                   style="font-size: 32px;">
+                   {{post.tags[0]}}
                 </a>
-                {% endif %}
-                {% endfor %}
-
-                <ul class="list-inline d-flex justify-content-center mb-5">
-                  <li class="list-inline-item">
-                    <i class="mdi mdi-account md-gray-400 mdi-24px mr-1" style="margin-right: 8px;"></i>
-                    {{site.author.name | split: ' ' | first}} &nbsp;&middot;&nbsp;&nbsp;
-                  </li>
-                  <li class="list-inline-item">
-                    <i class="mdi mdi-calendar-blank md-gray-400 mdi-24px mr-1"></i>
-                    {{post.date | date: '%b %d, %Y'}}
-                  </li>
-                </ul>
-                <h4 class="notoc card-title">
-                  <a class="text-white link-no-decoration" href="{{post.url | relative_url}}">{{post.tags[0]}}</a>
-                </h4>
-              </div>
-            <!--/div -->
+              </h4>
+              <!-- /Post link (caption) -->
+
+            </div>
           </article>
-        </div>
 
+        </div>
         {% endif %} {% endfor %}
       </div>
       <!-- /Posts|Group -->
     {% endif %}
 
-    {% comment %} Collect Bootrap Image Card Grids
+
+    {% comment %} Collect collection grids
     ---------------------------------------------------------------------------- {% endcomment %}
-    {% if grid.type == 'bs_image_cards' %}
-    <!-- Card Image Grid -->
-    <div id="{{grid.id}}" class="{{grid.id | replace: '_','-' }} row g-0 mx-2">
-      {% for image in grid.images %}
-      <div class="col-xl-{{masonry_options.responsive.xl}} col-lg-{{masonry_options.responsive.lg}} col-md-{{masonry_options.responsive.md}} col-sm-{{masonry_options.responsive.sm}} col-{{masonry_options.responsive.xs}} px-{{grid.bs_gutter}} py-{{grid.bs_gutter}}">
-        <div class="card">
-          {% if grid.lightbox.enabled %}
-          <a href="{{grid.image_base_path}}/{{image.file}}"
-             data-lightbox="{{grid.id}}-image-group"
-             data-caption="{{image.title}}"
-             data-title="{{image.title}}">
-            <img id="{{forloop.index}}" class="{{grid.image_styles}}" src="{{grid.image_base_path}}/{{image.file}}" alt="{{image.title}}">
+    {% if grid.type == 'collection' %}
+
+    {% comment %} Set collection data
+    -------------------------------------------------------------------------------- {% endcomment %}
+    {% assign collection_name   = grid.collection %}
+
+    {% comment %} Collect collection documents
+    -------------------------------------------------------------------------------- {% endcomment %}
+    {% for collection in site.collections %}
+      {% if collection.label contains collection_name %}
+        {% assign articles = collection.docs %}
+        {% break %}
+      {% endif %}
+    {% endfor %}
+
+    <!-- Collection|Articles -->
+    <div id="{{grid.id}}" class="row {{grid.id | replace: '_','-' }} g-0">
+
+      {% if grid.translate_titles %}
+        {% assign translate = "" %}
+      {% else %}
+        {% assign translate = "notranslate" %}
+      {% endif %}
+
+      {% if grid.gutters %}
+        {% assign gutter = 1  %}
+      {% else %}
+        {% assign gutter = 0  %}
+      {% endif %}
+
+      {% for article in articles %}
+      <div class="col-xl-{{masonry_options.responsive.xl}} col-lg-{{masonry_options.responsive.lg}} col-md-{{masonry_options.responsive.md}} col-sm-{{masonry_options.responsive.sm}} col-{{masonry_options.responsive.xs}} px-{{gutter}} py-{{gutter}}">
+        <!-- Article item -->
+        <div id="{{article.title | downcase | replace: ' ' ,'_'}}" class="article-item article-item--w400">
+          {% if grid.preview %}
+          <a class="article-link" data-bs-toggle="modal" href="#articleModal_{{grid.id}}_{{forloop.index}}">
+            <div class="article-hover">
+              <div class="article-hover-content">
+                <i class="mdi mdi-plus mdi-10x"></i>
+              </div>
+            </div>
+            <img class="{{grid.image_styles}}" src="{{article.image.path}}" alt="{{article.title}}" style="height: {{grid.image_height}}; width: {{grid.image_width}}">
           </a>
-        {% else %}
-          <img id="{{forloop.index}}" class="{{grid.image_styles}}" src="{{grid.image_base_path}}/{{image.file}}" alt="{{image.title}}">
-        {% endif %}
+          {% else %}
+            <!-- img class="img-fluid img-object--w400" src="{{article.image.path}}" alt="{{article.title}}" / -->
+            <img class="{{grid.image_styles}}" src="{{article.image.path}}" alt="{{article.title}}" style="height: {{grid.image_height}}; width: {{grid.image_width}}">
+          {% endif %}
+          <div class="article-caption">
+            <div class="article-caption-heading">
+              <a class="card-link {{translate}}" href="{{article.url}}">{{article.title}}</a>
+            </div>
+            <div class="article-caption-subheading text-muted">{{article.tags[0]}}</div>
+          </div>
+        </div>
+        <!-- /Article item -->
+      </div>
+
+      <!-- Article Modal-->
+      {% if grid.preview %}
+      <div id="articleModal_{{grid.id}}_{{forloop.index}}" class="article-modal modal fade" tabindex="-1" role="dialog" aria-hidden="true">
+        <div class="modal-dialog">
+          <div class="modal-content">
+
+            <div class="close-modal" data-bs-dismiss="modal">
+              <img src="{{'/assets/images/icons/controls/close-icon.svg' | relative_url}}" alt="Close modal">
+            </div>
+
+            <div class="container">
+              <div class="row justify-content-center">
+                <div class="col-lg-8">
+                  <div class="modal-body">
+                    <!-- Project details-->
+                    <h2 class="text-uppercase notoc {{translate}}">{{article.title}}</h2>
+                    <p class="item-intro text-muted">{{article.tagline}}</p>
+                    <img class="img-fluid d-block mx-auto" src="{{article.image.path | relative_url}}" alt="{{article.title}}">
+                    <p>{{article.description}}</p>
+                    <ul class="list-inline">
+                      <li>
+                        <strong>Title:</strong>
+                        <span class="{{translate}}">{{article.title}}</span>
+                      </li>
+                      <li>
+                        <strong>Categories:</strong>
+                        <span class="{{translate}}">{{article.categories}}</span>
+                      </li>
+                      <!-- li>
+                        <strong>Tags:</strong>
+                        <span class="{{translate}}">{{article.tags}}</span>
+                      </li -->
+                    </ul>
+                    <button class="btn btn-primary btn-xl text-uppercase" data-bs-dismiss="modal" type="button">
+                      <i class="mdi mdi-close mdi-24px mx-2"></i>
+                      Close Preview
+                    </button>
+                  </div>
+                </div>
+              </div>
+            </div>
+
+          </div>
         </div>
       </div>
+      {% endif %}
+      <!-- /Article Modal-->
+
       {% endfor %}
     </div>
-    <!-- /Card Image Grid -->
+    <!-- /Collection|Articles -->
+
+    {% endif %}
+
+    {% comment %} Collect Bootrap Card Grids
+    ---------------------------------------------------------------------------- {% endcomment %}
+    {% if grid.type == 'card' %}
+
+      {% if grid.gutters %}
+        {% assign gutter = 1  %}
+      {% else %}
+        {% assign gutter = 0  %}
+      {% endif %}
+
+      <!-- Card Image Grid -->
+      <div id="{{grid.id}}" class="row {{grid.id | replace: '_','-' }} g-0">
+        {% for image in grid.images %}
+        <div class="col-xl-{{masonry_otions.responsive.xl}} col-lg-{{masonry_options.responsive.lg}} col-md-{{masonry_options.responsive.md}} col-sm-{{masonry_options.responsive.sm}} col-{{masonry_options.responsive.xs}} px-{{gutter}} py-{{gutter}}">
+          <div class="card">
+            {% if grid.lightbox %}
+            <div class="{{grid.caption.position}}">
+              <a href="{{grid.image_base_path}}/{{image.file}}"
+                 data-lightbox="{{grid.id}}-image-group"
+                 data-caption="{{image.caption}}"
+                 data-title="{{image.caption}}">
+                <img id="{{forloop.index}}" class="{{grid.image_styles}}" src="{{grid.image_base_path}}/{{image.file}}" alt="{{image.caption}}" style="height: {{grid.image_height}}">
+              </a>
+              {% if grid.caption.enabled %}
+              <div class="caption">{{image.caption}}</div>
+              {% endif %}
+            </div>
+            {% else %}
+            <div class="{{grid.caption.position}}">
+              <img id="{{forloop.index}}" class="{{grid.image_styles}}" src="{{grid.image_base_path}}/{{image.file}}" alt="{{image.caption}}">
+              {% if grid.caption.enabled %}
+              <div class="caption">{{image.caption}}</div>
+              {% endif %}
+            </div>
+            {% endif %}
+          </div>
+        </div>
+        {% endfor %}
+      </div>
+      <!-- /Card Image Grid -->
     {% endif %}
 
     {% comment %} Collect Image Grids
     ---------------------------------------------------------------------------- {% endcomment %}
-    {% if grid.type == 'image_grid' %}
-    <!-- Image Grid -->
-    <div id="{{grid.id}}" class="row g-0 mx-3 {{grid.id | replace: '_','-' }}">
-      {% for image in grid.images %}
-      <div class="col-xl-{{masonry_options.responsive.xl}} col-lg-{{masonry_options.responsive.lg}} col-md-{{masonry_options.responsive.md}} col-sm-{{masonry_options.responsive.sm}} col-{{masonry_options.responsive.xs}} px-{{grid.bs_gutter}} py-{{grid.bs_gutter}}">
-        <div class="nocard">
-          {% if grid.lightbox.enabled %}
-          <a href="{{grid.image_base_path}}/{{image.file}}"
-             data-lightbox="{{grid.id}}-image-group"
-             data-caption="{{image.title}}"
-             data-title="{{image.title}}">
-            <img id="{{forloop.index}}" class="{{grid.image_styles}}" src="{{grid.image_base_path}}/{{image.file}}" alt="{{image.title}}">
-          </a>
+    {% if grid.type == 'image' %}
+
+      {% if grid.gutters %}
+        {% assign gutter = 1  %}
+      {% else %}
+        {% assign gutter = 0  %}
+      {% endif %}
+
+      <!-- Image Grid -->
+      <div id="{{grid.id}}" class="row {{grid.id | replace: '_','-' }} g-0">
+        {% for image in grid.images %}
+        <div class="col-xl-{{masonry_options.responsive.xl}} col-lg-{{masonry_options.responsive.lg}} col-md-{{masonry_options.responsive.md}} col-sm-{{masonry_options.responsive.sm}} col-{{masonry_options.responsive.xs}} px-{{gutter}} py-{{gutter}}">
+          {% if grid.lightbox %}
+          <div class="{{grid.caption.position}}">
+            <a href="{{grid.image_base_path}}/{{image.file}}"
+               data-lightbox="{{grid.id}}-image-group"
+               data-caption="{{image.caption}}"
+               data-title="{{image.caption}}">
+              <img id="{{forloop.index}}" class="{{grid.image_styles}}" src="{{grid.image_base_path}}/{{image.file}}" alt="{{image.caption}}">
+              {% if grid.caption.enabled %}
+                {% if grid.gutters and grid.caption.position == 'top' %}
+                  <div class="caption" style="top: calc(2px + {{gutter}}*4px - {{gutter}}px); width: calc(100% - {{gutter}}*3%);">{{image.caption}}</div>
+                {% elsif grid.gutters and grid.caption.position == 'center' %}
+                  <div class="caption" style="width: calc(100% - {{gutter}}*3%);">{{image.caption}}</div>
+                {% elsif grid.gutters and grid.caption.position == 'bottom' %}
+                  <div class="caption" style="top: calc(100% - {{gutter}}*1% - 1px); width: calc(100% - {{gutter}}*3%);">{{image.caption}}</div>
+                {% else %}
+                  <div class="caption">{{image.caption}}</div>
+                {% endif %}
+              {% endif %}
+            </a>
+          </div>
           {% else %}
-          <img id="{{forloop.index}}" class="{{grid.image_styles}}" src="{{grid.image_base_path}}/{{image.file}}" alt="{{image.title}}">
+            <div class="{{grid.caption.position}}">
+              <img id="{{forloop.index}}" class="{{grid.image_styles}}" src="{{grid.image_base_path}}/{{image.file}}" alt="{{image.caption}}">
+              {% if grid.caption.enabled %}
+                {% if grid.gutters and grid.caption.position == 'top' %}
+                  <div class="caption" style="top: calc(2px + {{gutter}}*4px - {{gutter}}px); width: calc(100% - {{gutter}}*3%);">{{image.caption}}</div>
+                {% elsif grid.gutters and grid.caption.position == 'center' %}
+                  <div class="caption" style="width: calc(100% - {{gutter}}*3%);">{{image.caption}}</div>
+                {% elsif grid.gutters and grid.caption.position == 'bottom' %}
+                  <div class="caption" style="top: calc(100% - {{gutter}}*1%); width: calc(100% - {{gutter}}*3%);">{{image.caption}}</div>
+                {% else %}
+                  <div class="caption">{{image.caption}}</div>
+                {% endif %}
+              {% endif %}
+            </div>
           {% endif %}
         </div>
+        {% endfor %}
       </div>
-      {% endfor %}
-    </div>
-    <!-- /Image Grid -->
+      <!-- /Image Grid -->
     {% endif %}
 
   {% endif %}