j1-template 2021.0.16 → 2021.1.4

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

@@ -11,11 +11,8 @@ sort:                                   date
 toc:                                    true
 fam_menu_id:                            open_toc
 
-indexed:                                false
-exclude_from_search:                    true
-
 pagination:
-  enabled:                              true
+  enabled:                              false
   permalink:                            /page:num/
 
 regenerate:                             false
@@ -43,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 %}
@@ -157,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 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>
+              <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,12 +13,9 @@ pagination:
 
 sort:                                   date
 toc:                                    true
-fam_menu_id:                            default
+fam_menu_id:                            open_toc
 
-indexed:                                false
-exclude_from_search:                    true
-
-regenerate:                             false
+regenerate:                             true                                    # needed to update pagination pages
 
 resources:                              []
 resource_options:

data/lib/starter_web/pages/public/learn/roundtrip/100_present_images.adoc

@@ -1,27 +1,24 @@
 ---
 title:                                  Roundtrip
 tagline:                                present images
-date:                                   2020-11-03 00:00:00
+date:                                   2020-11-03 00:00:00 +100
 description: >
-                                        This page show some of quite useful features of 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 Justified Gallery for high-end, masonry styled preview maps.
-                                        A carousel app, using the jQuery plugin Owl Carousel as a base, let you
-                                        present your images as slide shows.
-                                        Lightboxes like LightGallery or Lightbox V2 support your web for full image
-                                        views of your picture or video content. Have a look, a quick tour what J1
-                                        can do for image data.
+                                        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.
 
-tags:                                   [ Roundtrip, Introduction ]
 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,
-                                          justified_gallery, light_gallery
+                                          justifiedGallery, lightGallery
                                         ]
 resource_options:
   - attic:
@@ -61,28 +58,28 @@ resource_options:
 // Include sub-documents
 // -----------------------------------------------------------------------------
 
-Welcome to the first preview page focussing the image module. This page show
-some of quite useful features of J1 Template to manage your image-based content
-using lightboxes, carousels (slider) and galleries.
+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 Justified Gallery for high-end, masonry styled preview maps.
-A carousel app, using the jQuery plugin Owl Carousel as a base, let you
-present your images as slide shows.
+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 full image
-views of your picture or video content. Have a look, a quick tour what J1
-can do for image data. Have fun!
+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
+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 J1 Template, two different lightboxes can be used:
+For the J1 Template, two different lightboxes can be used:
 
 * Lightbox V2 (lightbox)
 * LightGallery
@@ -97,29 +94,29 @@ _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 to be
-used as helpers _under-the-hood_ by other apps or modules focussing on
+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 the use with Lightbox.
+single (individual) images are linked for use with Lightbox.
 
 .Lightbox block for standalone images
 lightbox::example-standalone[ 400, {data-images-standalone} ]
 
-For a group of images (image sets), Lightbox support image groups. Click
-on the images below to see how Lightbox manage image groups.
+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 lightbox
-supports a gallery-style thumbnail preview plus image resizing, a dowload
-dialogue, sharing provider support and some more helpful. Check what
+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[]
@@ -131,25 +128,25 @@ 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, 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!
+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 typically is used for displaying images but the
-implementation for J1 Template support a lot more sources to be displayed
-as a slide show: simple text, for example.
+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 as single
-line - no much space is needed.
+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
 
@@ -215,27 +212,27 @@ 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*.
 
-Justified Gallery is a great jQuery plugin to create responsive, infinite,
+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 Justified Gallery in action - and for sure all that you see is even
+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!
 
-=== Justified Gallery
+=== 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.
 
-Justified Gallery is using a so-called masonry grid layout. It works by
+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 Justified Gallery
+.Masonry grid layout of JustifiedGallery
 gallery::jg_customizer[]
 
 == Whats next

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].