j1-template 2020.0.20 → 2021.0.0

data/lib/starter_web/pages/public/learn/kickstarter/web_in_a_day/{000_includes → _includes}/parts.asciidoc

@@ -61,7 +61,7 @@ Find here is a list of the basic Chocolatey commands used this section.
 And some more related ones. If you'd like to explore the Chocolatey CLI a bit 
 *more*, give it a try before moving on.
 
-[cols="8a,4", options="header", role="table-responsive-stacked-lg, full-width"]
+[cols="8a,4", options="header", role="rtable, full-width"]
 |===============================================================================
 |Command |Description
 

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

@@ -1,14 +1,20 @@
 ---
 title:                                  Roundtrip
 tagline:                                present images
-description:                            J1 Template Roundtrip - Present image based data
-
-tags:                                   [ Page, Roundtrip ]
-index:                                  [ Template, Roundtrip, Images ]
-categories:                             [ pages ]
-
-toc:                                    true
-scrollbar:                              false
+date:                                   2020-11-03 12:00:00
+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.
+
+tags:                                   [ Roundtrip, Introduction ]
+categories:                             [ Images, Module ]
 
 permalink:                              /pages/public/learn/roundtrip/present_images/
 regenerate:                             true
@@ -31,56 +37,42 @@ resource_options:
             href:                       https://unsplash.com/@ripato/portfolio
 ---
 
+// Page Initializer
+// =============================================================================
 // Enable the Liquid Preprocessor
-// -----------------------------------------------------------------------------
 :page-liquid:
 
-// Set other global page attributes here
+// Set page (local) attributes here
 // -----------------------------------------------------------------------------
-//:my-asciidoc-attribute:
+// :page--attr:                         <attr-value>
+:images-dir:                            {imagesdir}/pages/roundtrip/100_present_images
 
 //  Load Liquid procedures
 // -----------------------------------------------------------------------------
-{% capture set_env_entry_document %}themes/{{site.template.name}}/procedures/global/set_env_entry_document.proc{%endcapture%}
+{% capture load_attributes %}themes/{{site.template.name}}/procedures/global/attributes_loader.proc{%endcapture%}
 
-// Initialize entry document environmental attributes
+// Load page attributes
 // -----------------------------------------------------------------------------
-{% include {{set_env_entry_document}} %}
-
-// Load tag, url and data attributes
-// -----------------------------------------------------------------------------
-include::{includedir}/attributes.asciidoc[tag=tags]
-include::{includedir}/attributes.asciidoc[tag=urls]
-include::{includedir}/attributes.asciidoc[tag=data]
-
-// Set local page attributes
-// -----------------------------------------------------------------------------
-:images-dir:                            {imagesdir}/pages/roundtrip/100_present_images
-
+{% include {{load_attributes}} scope="all" %}
 
 // Page content
 // ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
+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.
 
-// Include sub-documents
-// -----------------------------------------------------------------------------
-
-Welcome to the first preview page focussing the image module. This page shows
-you some of the quite useful features of J1 Template to manage your image based
-content using lightboxes, carousels (slider) and galleries.
-
-The image module offer complex functionality based on powerful open source
-libraries like the build-in Gallely gallery for simple _Bootstrap_ grid-based
-image galleries or Justified Gallery for high-end, masonry styled preview
-maps. The build-in carousel app carousel, using the jQuery plugin Owl Carousel
-as a base, let you present your images as slide shows.
+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. Have fun!
+can do for image data. Have fun!
 
 == J1 Lightboxes
 
-A Lightbox in general is a helper which displays enlarged, almost
+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
@@ -96,186 +88,142 @@ 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
+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 compare to the more simpler Lightbox V2 lightbox.
+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 image
-data like gallery or carousel, the build-in carousel module.
+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.
 
-.A Lightbox block for standalone images
+.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.
 
-.A Lightbox block for grouped 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-styled thumbnail preview plus image resizing, a dowload
-dialog, sharing provider support and some more helpfull. Check what
+supports a gallery-style thumbnail preview plus image resizing, a dowload
+dialogue, sharing provider support and some more helpful. Check what
 LightGallery can do by the following example.
 
-[subs=attributes]
-++++
-  <div id="caption1" style="display:none">
-    <h4 class="notoc">Image 1</h4><p>Golden Gate Bridge with San Francisco in distance</p>
-  </div>
-  <div id="caption2" style="display:none">
-    <h4 class="notoc">Image 2</h4><p>Forest with mountains behind</p>
-  </div>
-  <div id="caption3" style="display:none">
-    <h4 class="notoc">Image 3</h4><p>Bicyclist looking out over hill at ocean</p>
-  </div>
-
-  <div id="lightgallery-roundtrip-example" class="imageblock mb-4" data-sub-html=".caption">
-    <a href="{images-dir}/lightbox-image-1.jpg" data-sub-html="#caption1">
-      <img src="{images-dir}/lightbox-thumb-1.jpg" alt="Golden Gate Bridge with San Francisco in distance">
-    </a>
-    <a href="{images-dir}/lightbox-image-2.jpg" data-sub-html="#caption2">
-      <img src="{images-dir}/lightbox-thumb-2.jpg" alt="Forest with mountains behind">
-    </a>
-    <a href="{images-dir}/lightbox-image-3.jpg" data-sub-html="#caption3">
-      <img src="{images-dir}/lightbox-thumb-3.jpg" alt="Bicyclist looking out over hill at ocean">
-    </a>
-  </div>
-
-  <script>
-    $(document).ready(function(){
-      $('#lightgallery-roundtrip-example').lightGallery({
-          thumbnail: true
-      });
-    });
-  </script>
-++++
+// .Example of a Justified Gallery
+gallery::jg_example[]
+
 
 == J1 Carousel App
 
-J1 Carousel is based on OWL Carousel V1 in the latest (and unfortuneatly
+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 not longer available on the Internet; for unknown
+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 a MIT license with no issues using them for private and business use.
+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.
+as a slide show: simple text, for example.
 
-carousel::owl_demo_text_carousel[role="mb-3"]
+.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 a better visibility. In one line, you can present
-a bunch of facts to know animated for the readers attention within as single
+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.
 
 === Parallax Text Carousel
 
-A more eye-minded type of a text show is a parallax text slider. If you
-want to place emphasis on you personal statements focussing the meaning, this
-type of a slide show may be interesting. Image based slide shows may draw off
-the readers attention from the text, therefor a pure text based presentation
+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 Slider
-// carousel::owl_demo_text_carousel_parallax[role="mb-3"]
-
-++++
-  <div class="parallax-slider__owl_demo_text_carousel_parallax mb-3" style="background-position: 50% 45px">
-    <div id="owl_demo_text_carousel_parallax"></div>
-  </div>
-
- <script>
-    $('head').append('<style>.parallax-slider__owl_demo_text_carousel_parallax{background:url(/assets/images/quotes/default.png) 50% 0 repeat fixed}</style>');
-    $('head').append('<style>.parallax-slider__owl_demo_text_carousel_parallax{padding:75px 0 75px 25px;position:relative}</style>');
-    $('head').append('<style>.parallax-slider__owl_demo_text_carousel_parallax{color:#e5e5e5;font-size:1.5rem;font-weight:400}</style>');
-    $('head').append('<!-- style>.parallax-slider__owl_demo_text_carousel_parallax{text-align:center}</style -->');
-    $('head').append('<!-- style>.parallax-slider__owl_demo_text_carousel_parallax{text-transform:uppercase}</style -->');
-    $('head').append('<style>.parallax-slider__owl_demo_text_carousel_parallax:before{top:0;left:0;width:100%;height:100%;content:" ";position:absolute;background:url(/assets/images/modules/patterns/gridtile.png) repeat;}</style>');
-    $('head').append('<style>.parallax-slider__owl_demo_text_carousel_parallax:after{top:0;left:0;width:100%;height:100%;content:" ";position:absolute;background:rgba(0,0,0,0.3)}</style>');
-  </script>
-++++
-
-Parallax text shows are can be placed as banners on a page. A lot of different
+.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 documetation
+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 series.
+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 interesting things of your site or the products offered.
+banner presenting exciting things of your site or the products offered.
 
 .Simple Image Carousel
-carousel::owl_demo_simple[role="mb-5"]
+carousel::demo_simple[role="mb-5"]
 
 === Carousel + Caption + Lightbox
 
-Carousels can be used for a quite compact form of image galleries. This example
-show some pictures having individual caption text and support a lightbox to
-enlarge images full size. For the example below, a quite simple lightbox
-is used: Lightbox V2; or short: 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::owl_demo_cats[role="mb-5"]
+carousel::demo_cats[role="mb-5"]
 
-The J1 module lightbox is a simple Lightbox but offers a bunch of interesting
-features for displaying images. For example, lightbox can display all images
-(of a carousel) as a group. If one picture is opened in the lightbox, all
-the other can browsed as well.
+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 an single image slide show with controls enabled
+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::owl_demo_oneslide[role="mb-5"]
+carousel::demo_oneslide[role="mb-5"]
 
 == 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 build-in
-gallery app gallery.
+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
-and high quality justified image galleries. J1 Template combines the gallery
-with the lightboxes supported to enlage the images of a gallery.
+Justified Gallery 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 what you see is even
+See Justified Gallery 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
 
 Pictures you've made are typically not even in size. Images may have the
-same size (resolution), but some of the are orientated landscape or other
+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.
 
@@ -289,7 +237,7 @@ gallery::jg_customizer[]
 
 == Whats next
 
-Hopefully you've enjoyed exploring the possibilities J1 offers for managing
+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.
 

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

@@ -1,21 +1,24 @@
 ---
 title:                                  Roundtrip
 tagline:                                present videos
-description:                            J1 Template Roundtrip - Present video based data
-
-tags:                                   [ Page, Roundtrip ]
-index:                                  [ Template, Roundtrip, Video ]
-categories:                             [ pages ]
-
-scrollbar:                              false
-toc:                                    true
+date:                                   2020-11-04 12:00:00
+description: >
+                                        Playing video on web pages seems not that special since you can already
+                                        watch videos on web pages through plugins like Flash Player, Quicktime
+                                        or Silverlight.
+                                        A new standard goes to HTML5 Video, a pure HTML way to
+                                        show video on the web; instead of the previous de facto standard of using
+                                        proprietary software.
+
+tags:                                   [ Roundtrip, Introduction ]
+categories:                             [ Video, Module ]
 
 permalink:                              /pages/public/learn/roundtrip/present_videos/
-regenerate:                             true
+regenerate:                             false
 
 resources:                              [
                                           light_gallery, justified_gallery, video_js,
-                                          vimeo_player, vimeo_player, vimeo_froogaloop
+                                          vimeo_player, vimeo_froogaloop
                                         ]
 resource_options:
   - attic:
@@ -44,40 +47,29 @@ resource_options:
 
 ---
 
+// Page Initializer
+// =============================================================================
 // Enable the Liquid Preprocessor
-// -----------------------------------------------------------------------------
 :page-liquid:
 
-// Set other global page attributes here
+// Set page (local) attributes here
 // -----------------------------------------------------------------------------
-//:my-asciidoc-attribute:
+// :page--attr:                         <attr-value>
+:images-dir:                            {imagesdir}/pages/roundtrip/100_present_images
 
 //  Load Liquid procedures
 // -----------------------------------------------------------------------------
-{% capture set_env_entry_document %}themes/{{site.template.name}}/procedures/global/set_env_entry_document.proc{%endcapture%}
+{% capture load_attributes %}themes/{{site.template.name}}/procedures/global/attributes_loader.proc{%endcapture%}
 
-// Initialize entry document environmental attributes
+// Load page attributes
 // -----------------------------------------------------------------------------
-{% include {{set_env_entry_document}} %}
-
-// Load tag, url and data attributes
-// -----------------------------------------------------------------------------
-include::{includedir}/attributes.asciidoc[tag=tags]
-include::{includedir}/attributes.asciidoc[tag=urls]
-include::{includedir}/attributes.asciidoc[tag=data]
-
-// Set local page attributes
-// -----------------------------------------------------------------------------
-:images-dir:                            {imagesdir}/pages/roundtrip/100_present_images
+{% include {{load_attributes}} scope="all" %}
 
 
 // Page content
 // ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
 
-// Include sub-documents
-// -----------------------------------------------------------------------------
-
-Playing video on a web page seems not that special since you can already
+Playing video on web pages seems not that special since you can already
 watch videos on web pages through plugins like _Flash Player_, _Quicktime_
 or _Silverlight_. A new standard goes to HTML5 Video, a pure HTML way to
 show video on the web; instead of the previous de facto standard of using
@@ -85,9 +77,9 @@ proprietary software.
 
 == Video Galleries
 
-HTML5 Video open the doors to your way presenting video content. Modern
-browsers support the video tag `<video>` for the HTML5 Video standard. Browsers
-have a build-in multimedia framework already for decoding and displaying
+HTML5 Video opens the doors to your way presenting video content. Modern
+browsers support the video tag `<video>` for the HTML5 video standard.
+Browsers have a built-in multimedia framework already for decoding and displaying
 video content. No need to use such proprietary software components anymore!
 
 HTML5 Video support is given by the App gallery combined with the Lightbox
@@ -98,10 +90,10 @@ Two types of video sources are supported:
 . videos from local files (your web space)
 . videos from online sources (on the Internet) like YouTube, Vimeo, etc.
 
-The combination of the App gallery and the lightbox LightGallery is quite
+The combination of the App gallery and the lightbox LightGallery is entirely
 usable for all the video content you want to present on your site. Galleries
 can be placed elsewhere with your content. You can use them for video blogs
-for example by placing them into your blog articles content.
+by putting them into your blog articles content.
 
 WARNING: LightGallery can be used for free for private use but for
 business use, a commercial license is needed. See link:{light-gallery-license}[Light Gallery license]
@@ -109,10 +101,10 @@ how to use LightGallery for commercial webs and projects.
 
 == Local video content
 
-Digital image content, simple pictures or vidoes, are quite easy to make.
-Today, each and every mobile has a camera - not that bad! Presenting a bunch
-of (digital) pictures is very easy by using Justified Gallery for example.
-Videos created by a digi cam or a mobile can played by J1 Template using the
+Digital image content, simple pictures or vidoe, are easy to make. Today, each
+and every mobile has a camera - not that bad! Presenting a bunch
+of (digital) pictures is very easy by using Justified Gallery, for example.
+Videos created by a digicam or a mobile can be played by J1 Template using the
 HTML5 Video support of LightGallery.
 
 Two players are available with LightGallery:
@@ -129,11 +121,11 @@ gallery::jg_video_html5[role="mb-5"]
 
 == Online video content
 
-The Internet is full of interesting content. Video content is very popular,
-the number of channels at e.g. _YouTube_ is enormous. If you want to present
-video content from the Internet, e.g. your channnel, the online video
-support of J1 Template may a good choice. Find some enjoyable videos from
-James Cordon's channel: Carpool Karaoke.
+The Internet is full of inspiring content. Video content is popular,
+the number of channels at _YouTube_ is enormous. If you want to present
+video content from the Internet, e.g. your channel, the online video
+support of J1 Template may be the right choice. Find some enjoyable videos
+from James Cordon's channel: Carpool Karaoke.
 
 .YouTube Video Gallery - Carpool Karaoke
 gallery::jg_video_online_youtube[role="mb-5"]
@@ -144,7 +136,7 @@ gallery::jg_video_online_vimeo[role="mb-5"]
 == Whats next
 
 Images and videos are quite visual - and could be impressive, for sure.
-But the most visual component is text for all pages, for all sites on the
+But the most visual component is the text for all pages, for all sites on the
 Internet. To see how text could be presented great for modern responsive
 websites, check the section Typography next.