j1-template 2021.1.1 → 2021.1.2

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

@@ -15,7 +15,7 @@ pagination:
   enabled:                              false
   permalink:                            /page:num/
 
-regenerate:                             false
+regenerate:                             true
 
 resources:                              []
 resource_options:
@@ -43,6 +43,7 @@ resource_options:
 -------------------------------------------------------------------------------- {% endcomment %}
 {% assign view_config         = site.data.builder.blog_navigator.archive_view %}
 {% assign view_description    = view_config.description %}
+{% assign defaults            = site.data.builder.blog_navigator.defaults %}
 
 {% if site.permalink == 'none' %}
   {% capture browser_page_url %}{{page.url}}.html{% endcapture %}
@@ -88,28 +89,46 @@ resource_options:
       {% assign comment_count = sharing.comment_count %}
     {% endfor %}
 
-    <article class="card raised-z5 mb-5">
+    <article class="card raised-z3 mb-5">
       <h3 id="{{100000|rand}}" class="card-header bg-primary">{{post.title}}</h3>
-      <!-- h5 class="notoc card-subtitle text-muted mb-2">{{post.tagline}}</h5 -->
-      <div class="card-body r-text-300">{{excerpt}}</div>
-      <div class="card-footer r-text-200">
-        <div class="card-footer-text">
-          {% if post.date %}
-          <i class="mdi mdi-calendar-blank mr-1"></i> {{post.date | date: "%Y %B, %e"}}
-          {% endif %}
-          {% if likes_count %}
-          <span class="font-weight-bold"> · </span>
-          <i class="mdi mdi-heart mr-1"></i> {{likes_count}}
-          {% endif %}
-          {% if comment_count %}
-          <span class="font-weight-bold"> · </span>
-          <i class="mdi mdi-comment mr-1"></i> {{comment_count}}
-          {% endif %}
+      <div class="row mx-0">
+
+        <!-- [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] -->
+        <div class="col-md-6 img-bg--fill px-0"
+          style="background-image: url({{post.image}});">
+        </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="background-image: url({{defaults.post_image}});">
+        </div>
+        {% endif %}
+
+        <div class="col-md-6">
+          <div class="card-body r-text-300">{{excerpt}}</div>
+          <div class="card-footer r-text-200">
+            <div class="card-footer-text">
+              <hr class="my-3">
+              {% if post.date %}
+              <i class="mdi mdi-calendar-blank mdi-md-grey mr-1"></i> {{post.date | date: "%Y %B, %e"}}
+              {% endif %}
+              {% if likes_count %}
+              <span class="font-weight-bold"> · </span>
+              <i class="mdi mdi-heart mdi-md-grey mr-1"></i> {{likes_count}}
+              {% endif %}
+              {% if comment_count %}
+              <span class="font-weight-bold"> · </span>
+              <i class="mdi mdi-comment mdi-md-grey mr-1"></i> {{comment_count}}
+              {% endif %}
+            </div>
+            <a class="card-link text-muted text-lowercase"
+               href="{{post.url}}#readmore">
+               Read · {{post.tagline}}
+            </a>
+          </div>
         </div>
-        <a class="card-link md-grey-800 font-weight-bold g-font-size-12 text-uppercase"
-           href="{{post.url}}#readmore">
-           Read · {{post.tagline}}
-        </a>
       </div>
     </article>
   {% endfor %}

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

@@ -48,6 +48,7 @@ resource_options:
 -------------------------------------------------------------------------------- {% endcomment %}
 {% assign view_config         = site.data.builder.blog_navigator.category_view %}
 {% assign view_description    = view_config.description %}
+{% assign defaults            = site.data.builder.blog_navigator.defaults %}
 
 {% if site.permalink == 'none' %}
   {% capture browser_page_url %}{{page.url}}.html{% endcapture %}
@@ -126,29 +127,46 @@ resource_options:
             {% assign comment_count = sharing.comment_count %}
           {% endfor %}
 
-          <article class="card raised-z5 mb-5">
-            <h3 id="{{100000|rand}}" class="card-header bg-primary notoc">{{post.title}}</h3>
-            <!-- h5 class="notoc card-subtitle text-muted mb-2">{{post.tagline}}</h5 -->
-            <div class="card-body r-text-300">{{excerpt}}</div>
-
-            <div class="card-footer r-text-200">
-              <div class="card-footer-text">
-                {% if post.date %}
-                <i class="mdi mdi-calendar-blank mr-1"></i> {{post.date | date: "%Y %B, %e"}}
-                {% endif %}
-                {% if likes_count %}
-                <span class="font-weight-bold"> · </span>
-                <i class="mdi mdi-heart mr-1"></i> {{likes_count}}
-                {% endif %}
-                {% if comment_count %}
-                <span class="font-weight-bold"> · </span>
-                <i class="mdi mdi-comment mr-1"></i> {{comment_count}}
-                {% endif %}
+          <article class="card raised-z3 mb-5">
+            <h4 id="{{100000|rand}}" class="card-header bg-primary">{{post.title}}</h4>
+            <div class="row mx-0">
+
+              <!-- [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] -->
+              <div class="col-md-6 img-bg--fill px-0"
+                style="background-image: url({{post.image}});">
+              </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="background-image: url({{defaults.post_image}});">
+              </div>
+              {% endif %}
+
+              <div class="col-md-6">
+                <div class="card-body r-text-300">{{excerpt}}</div>
+                <div class="card-footer r-text-200">
+                  <div class="card-footer-text">
+                    <hr class="my-3">
+                    {% if post.date %}
+                    <i class="mdi mdi-calendar-blank mdi-md-grey mr-1"></i> {{post.date | date: "%Y %B, %e"}}
+                    {% endif %}
+                    {% if likes_count %}
+                    <span class="font-weight-bold"> · </span>
+                    <i class="mdi mdi-heart mdi-md-grey mr-1"></i> {{likes_count}}
+                    {% endif %}
+                    {% if comment_count %}
+                    <span class="font-weight-bold"> · </span>
+                    <i class="mdi mdi-comment mdi-md-grey mr-1"></i> {{comment_count}}
+                    {% endif %}
+                  </div>
+                  <a class="card-link text-muted text-lowercase"
+                     href="{{post.url}}#readmore">
+                     Read · {{post.tagline}}
+                  </a>
+                </div>
               </div>
-              <a class="card-link md-grey-800 font-weight-bold g-font-size-12 text-uppercase"
-                 href="{{post.url}}#readmore">
-                 Read · {{post.tagline}}
-              </a>
             </div>
           </article>
         {% endif %}

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

@@ -43,6 +43,7 @@ resource_options:
 -------------------------------------------------------------------------------- {% endcomment %}
 {% assign view_config         = site.data.builder.blog_navigator.date_view %}
 {% assign view_description    = view_config.description %}
+{% assign defaults            = site.data.builder.blog_navigator.defaults %}
 
 {% if site.permalink == 'none' %}
   {% capture browser_page_url %}{{page.url}}.html{% endcapture %}
@@ -111,28 +112,46 @@ resource_options:
     {% capture link %}
       {% assign excerpt = post.excerpt|truncatewords:50|replace:'...',' ...'|strip_html|strip_newlines|strip %}
       <li>
-        <article class="card raised-z5 mb-5">
-          <h3 id="{{100000|rand}}" class="card-header bg-primary notoc">{{post.title}}</h3>
-          <!-- h5 class="notoc card-subtitle text-muted mb-2">{{post.tagline}}</h5 -->
-          <div class="card-body r-text-300">{{excerpt}}</div>
-          <div class="card-footer r-text-200">
-            <div class="card-footer-text">
-              {% if post.date %}
-              <i class="mdi mdi-calendar-blank mr-1"></i> {{post.date | date: "%Y %B, %e"}}
-              {% endif %}
-              {% if likes_count %}
-              <span class="font-weight-bold"> · </span>
-              <i class="mdi mdi-heart mr-1"></i> {{likes_count}}
-              {% endif %}
-              {% if comment_count %}
-              <span class="font-weight-bold"> · </span>
-              <i class="mdi mdi-comment mr-1"></i> {{comment_count}}
-              {% endif %}
+        <article class="card raised-z3 mb-5">
+          <h4 id="{{100000|rand}}" class="card-header bg-primary">{{post.title}}</h4>
+          <div class="row mx-0">
+
+            <!-- [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] -->
+            <div class="col-md-6 img-bg--fill px-0"
+              style="background-image: url({{post.image}});">
+            </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="background-image: url({{defaults.post_image}});">
+            </div>
+            {% endif %}
+
+            <div class="col-md-6">
+              <div class="card-body r-text-300">{{excerpt}}</div>
+              <div class="card-footer r-text-200">
+                <div class="card-footer-text">
+                  <hr class="my-3">
+                  {% if post.date %}
+                  <i class="mdi mdi-calendar-blank mdi-md-grey mr-1"></i> {{post.date | date: "%Y %B, %e"}}
+                  {% endif %}
+                  {% if likes_count %}
+                  <span class="font-weight-bold"> · </span>
+                  <i class="mdi mdi-heart mdi-md-grey mr-1"></i> {{likes_count}}
+                  {% endif %}
+                  {% if comment_count %}
+                  <span class="font-weight-bold"> · </span>
+                  <i class="mdi mdi-comment mdi-md-grey mr-1"></i> {{comment_count}}
+                  {% endif %}
+                </div>
+                <a class="card-link text-muted text-lowercase"
+                   href="{{post.url}}#readmore">
+                   Read · {{post.tagline}}
+                </a>
+              </div>
             </div>
-            <a class="card-link md-grey-800 font-weight-bold g-font-size-12 text-uppercase"
-               href="{{post.url}}#readmore">
-               Read · {{post.tagline}}
-            </a>
           </div>
         </article>
       </li>

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

@@ -40,6 +40,7 @@ resource_options:
 -------------------------------------------------------------------------------- {% endcomment %}
 {% assign view_config           = site.data.builder.blog_navigator.tag_view %}
 {% assign view_description      = view_config.description %}
+{% assign defaults            = site.data.builder.blog_navigator.defaults %}
 
 {% if site.permalink == 'none' %}
   {% capture browser_page_url %}{{page.url}}.html{% endcapture %}
@@ -154,19 +155,49 @@ resource_options:
       {% assign excerpt = post.excerpt|truncatewords:50|replace:'...',' ...'|strip_html|strip_newlines|strip %}
 
       <!-- place post  -->
-      <article class="card raised-z5 mb-5">
+      <article class="card raised-z3 mb-5">
         <h3 id="{{100000|rand}}" class="card-header bg-primary">{{post.title}}</h3>
-        <!-- h5 class="notoc card-subtitle text-muted mb-2">{{post.tagline}}</h5 -->
-        <div class="card-body r-text-300">{{excerpt}}</div>
-        <div class="card-body text-muted r-text-200">
-          <i class="mdi mdi-calendar-blank"></i> {{post.date|date:"%Y %B, %e"}}
-        </div>
-        <div class="card-footer r-text-200">
-          <a class="card-link md-blue font-weight-bold g-font-size-12 text-uppercase"
-             href="{{post.url}}#readmore">Read · {{post.tagline}}
-          </a>
+        <div class="row mx-0">
+
+          <!-- [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] -->
+          <div class="col-md-6 img-bg--fill px-0"
+            style="background-image: url({{post.image}});">
+          </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="background-image: url({{defaults.post_image}});">
+          </div>
+          {% endif %}
+
+          <div class="col-md-6">
+            <div class="card-body r-text-300">{{excerpt}}</div>
+            <div class="card-footer r-text-200">
+              <div class="card-footer-text">
+                <hr class="my-3">
+                {% if post.date %}
+                <i class="mdi mdi-calendar-blank mdi-md-grey mr-1"></i> {{post.date | date: "%Y %B, %e"}}
+                {% endif %}
+                {% if likes_count %}
+                <span class="font-weight-bold"> · </span>
+                <i class="mdi mdi-heart mdi-md-grey mr-1"></i> {{likes_count}}
+                {% endif %}
+                {% if comment_count %}
+                <span class="font-weight-bold"> · </span>
+                <i class="mdi mdi-comment mdi-md-grey mr-1"></i> {{comment_count}}
+                {% endif %}
+              </div>
+              <a class="card-link text-muted text-lowercase"
+                 href="{{post.url}}#readmore">
+                 Read · {{post.tagline}}
+              </a>
+            </div>
+          </div>
         </div>
       </article>
+
     {% endif %}{% endfor %}
   {% endunless %}{% endfor %}
 </div>

data/lib/starter_web/pages/public/blog/navigator/index.html

@@ -13,7 +13,7 @@ pagination:
 
 sort:                                   date
 toc:                                    true
-fam_menu_id:                            default
+fam_menu_id:                            open_toc
 
 regenerate:                             true                                    # needed to update pagination pages
 

data/lib/starter_web/pages/public/learn/roundtrip/100_present_images.org.asciidoc

@@ -0,0 +1,244 @@
+---
+title:                                  Roundtrip
+tagline:                                present images
+date:                                   2020-11-03 00:00:00 +100
+description: >
+                                        Welcome to the preview page focussing on the image module. This page
+                                        shows some valuable features of the J1 Template to manage your image-based
+                                        content using lightboxes, carousels (slider), and galleries.
+
+categories:                             [ Images, Module ]
+tags:                                   [ Roundtrip, Introduction ]
+
+comments:                               false
+fam_menu_id:                            page_ctrl_simple
+
+permalink:                              /pages/public/learn/roundtrip/present_images/
+regenerate:                             false
+
+resources:                              [
+                                          clipboard, rouge, carousel, lightbox,
+                                          justifiedGallery, lightGallery
+                                        ]
+resource_options:
+  - attic:
+      padding_top:                      400
+      padding_bottom:                   50
+      opacity:                          0.5
+      slides:
+        - url:                          /assets/images/pages/roundtrip/images-1920x1280-bw.jpg
+          alt:                          Photo by Ricardo Gomez Angel on Unsplash
+          badge:
+            type:                       unsplash
+            author:                     Ricardo Gomez Angel
+            href:                       https://unsplash.com/@ripato/portfolio
+---
+
+// Page Initializer
+// =============================================================================
+// Enable the Liquid Preprocessor
+:page-liquid:
+
+// Set (local) page attributes here
+// -----------------------------------------------------------------------------
+// :page--attr:                         <attr-value>
+:images-dir:                            {imagesdir}/pages/roundtrip/100_present_images
+
+//  Load Liquid procedures
+// -----------------------------------------------------------------------------
+{% capture load_attributes %}themes/{{site.template.name}}/procedures/global/attributes_loader.proc{%endcapture%}
+
+// Load page attributes
+// -----------------------------------------------------------------------------
+{% include {{load_attributes}} scope="all" %}
+
+// Page content
+// ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
+
+// Include sub-documents
+// -----------------------------------------------------------------------------
+
+Welcome to the first preview page focussing on the image module. This page
+shows some valuable features of the J1 Template to manage your image-based
+content using lightboxes, carousels (slider), and galleries.
+
+The image module offers complex functionality based on powerful OpenSource
+libraries like JustifiedGallery for high-end, masonry-styled preview maps.
+J1 Template uses the jQuery plugin Owl Carousel as a base for image sliders.
+A carousel app (slider) lets you present your images as shows.
+
+Lightboxes like LightGallery or Lightbox V2 support your web for enlarged
+image views of your picture or video content. Have a look, a quick tour
+of what J1 can do for image data. Have fun!
+
+== J1 Lightboxes
+
+A Lightbox, in general, is a helper which displays enlarged, almost
+screen-filling versions of pictures (or videos) while dimming the rest of the
+page. The technique, introduced by Lightbox V2, gained widespread popularity
+due to its simple and elegant style. The term lightbox is used since then for
+Javascript libraries to support such functionality.
+
+For the J1 Template, two different lightboxes can be used:
+
+* Lightbox V2 (lightbox)
+* LightGallery
+
+The default lightbox used by J1 Template is Lightbox V2, a Javascript library
+written by _Lokesh Dhakar_. The name of that (build-in) is simply: lightbox.
+For more complex use cases, like a thumbnail gallery preview or video support,
+LightGallery can be used alternatively.
+
+NOTE: The name LightGallery implies a sort of a Gallery, but the library is a
+_lightbox_. And, LightGallery provides much more functionality on image-based
+data rather than enlarged displaying of images. See the examples below to check
+for the differences in comparison to the simpler Lightbox V2 lightbox.
+
+Both lightboxes are fully integrated to be used as standalone modules or
+used as helpers *under-the-hood* by other apps or modules focussing on
+image-data like gallery or carousel, the build-in carousel module.
+
+== Lightbox Examples
+
+Find below an example of using the lightbox Lightbox standalone. See how
+single (individual) images are linked for use with Lightbox.
+
+.Lightbox block for standalone images
+lightbox::example-standalone[ 400, {data-images-standalone} ]
+
+Lightbox supports image groups (image sets). Click on the images below to
+see how Lightbox manages a group of images.
+
+.Lightbox block for grouped images
+lightbox::example-group[ 400, {data-images-group}, group ]
+
+=== LightGallery Example
+
+LightGallery provides more complex functions on image data. The module
+supports a gallery-style thumbnail preview plus image resizing, a download
+dialog, sharing provider support, and some more helpful. Check what
+LightGallery can do by the following example.
+
+gallery::jg_old_times[]
+
+
+== J1 Carousel App
+
+J1 Carousel is based on OWL Carousel V1 in the latest (and unfortunately
+last) version of 1.3.3. OWL Carousel is a clean and neat jQuery slider plugin
+for creating fully responsive and touch-enabled carousel sliders.
+
+NOTE: OWL Carousel V1 is no longer available on the Internet; for an
+unknown reason. Anyway, the J1 Template is using this version of OWL
+Carousel as a build-in carousel module because the software does an excellent
+job, is based on an MIT license with no issues using them for private and
+business use. And offers a lot of great features!
+
+=== Simple Text Carousel
+
+A slider or carousel is typically used for displaying images. Still, the
+implementation for the J1 Template supports a lot more sources to be
+displayed as a slide show: simple text, for example.
+
+.Simple text carousel
+carousel::demo_text_carousel[role="mb-3"]
+
+Important statements or topics can be placed, e.g., on top of an article or
+a paragraph to give them better visibility. In one line, you can present
+a bunch of facts to know animated for the reader's attention within a single
+line. No much space is needed!
+
+=== Parallax Text Carousel
+
+A more eye-minded type of a text-show is a parallax text slider. If you
+want to place emphasis on your personal statements focussing the meaning, this
+kind of a slide show may be interesting. Image-based slide shows may draw off
+the reader's attention from the text, therefor a pure text-based presentation
+may the better choice.
+
+.Parallax text carousel
+carousel::demo_text_carousel_parallax[role="mb-3"]
+
+Parallax text shows can be placed as banners on a page. A lot of different
+animations can be used. Internally, J1 Template is using some of the really
+great CSS styles offered by _animate.css_.
+
+TIP: Have a look a https://daneden.github.io/animate.css/[Dan Eden's home page]
+to see all the possible dynamic styles, you can create based on pure CSS. Some
+of them are implemented for OWL Carousel for animation. See the documentation
+for the CAROUSEL Module for more details.
+
+=== Simple Image Carousel
+
+Carousels are mostly used for pictures data to animate the images as a series.
+Find with the following some examples how to use a carousel for your image
+data.
+
+A simple image show is useful for example as an animated (or not animated)
+banner presenting exciting things of your site or the products offered.
+
+.Simple Image Carousel
+carousel::demo_simple[role="mb-3"]
+
+=== Carousel + Caption + Lightbox
+
+Carousels can be used for an exceptionally compact form of image galleries.
+This example shows some pictures having individual caption text and supports
+a lightbox to enlarge images full size. For the example below, a almost simple
+lightbox is used: Lightbox V2; or short: lightbox.
+
+.Nice cats
+carousel::demo_cats[role="mb-3"]
+
+The J1 module lightbox is a simple Lightbox but offers a bunch of impressive
+features for displaying images. For example, the lightbox can display all
+images (of a carousel) as a group. If one picture is opened in the lightbox, all
+the other can be browsed as well.
+
+=== One Slide Carousel + Lightbox
+
+The build-in Carousel carousel supports multiple and single image shows.
+Here you find an example of a single image slide show with controls enabled
+to browse all images back and forth. An indicator below the slider shows how
+many images the show contains.
+
+.Single Slide Carousel and a Lightbox
+carousel::demo_oneslide[role="mb-3"]
+
+== J1 Gallery App
+
+To create image and video galleries, J1 Template implements the jQuery
+plugin JustifiedGallery as the main gallery module. Beside Justified
+Gallery, a gallery based on pure _Bootstrap_ code is available with the
+built-in gallery app *gallery*.
+
+JustifiedGallery is a great jQuery plugin to create responsive, infinite,
+and high quality justified image galleries. J1 Template combines the Gallery
+with the lightboxes supported to enlarge the images of a gallery.
+
+See JustifiedGallery in action - and for sure all that you see is even
+responsive. Change the size of your current browser window, by width or height,
+to see what will happen!
+
+=== JustifiedGallery
+
+Pictures you've made are typically not even in size. Images may have the
+same size (resolution), but some of them are orientated landscape or other
+may portrait. For that reason, a more powerful gallery is needed to create
+so-called justified views.
+
+JustifiedGallery is using a so-called masonry grid layout. It works by
+placing elements in an optimal position based on available horizontal and
+vertical space. Sort of like mason fitting stones in a wall. You’ll have
+seen it in use all over the Internet!
+
+.Masonry grid layout of JustifiedGallery
+gallery::jg_customizer[]
+
+== Whats next
+
+Hopefully, you've enjoyed exploring the possibilities J1 offers for managing
+and displaying digital image content. But much, much more can the J1 do for
+your web.
+
+Incredible? See the next example page link:{roundtrip-present-videos}[Present videos].