j1-template 2022.4.10 → 2022.5.0.rc0

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

@@ -0,0 +1,313 @@
+---
+title:                                  Roundtrip
+tagline:                                present images
+date:                                   2020-11-03 00:00:00
+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:                             [ Roundtrip ]
+tags:                                   [ Introduction, Module, Image ]
+
+fab_menu_id:                            page_ctrl
+
+permalink:                              /pages/public/learn/roundtrip/present_images/
+regenerate:                             true
+
+resources:                              [
+                                          animate, clipboard, carousel,
+                                          justifiedGallery, lightbox, lightGallery,
+                                          masterslider, rouge
+                                        ]
+resource_options:
+  - attic:
+      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>
+:ms-slider-previewer:                   https://jekyll.one/pages/public/previewer/masterslider/
+:ms-slider-module-documentation:        https://jekyll.one/pages/public/manuals/modules/masterslider/
+
+//  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 (if any)
+// -----------------------------------------------------------------------------
+[role="dropcap"]
+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!
+
+// [role="notranslate"]
+== J1 Lightbox blocks
+
+A Lightbox is, in general, a helper which displays enlarged, almost
+screen-filling versions of images (or videos) while dimming the remainder
+of the page. The technique, introduced by Lightbox V2, gained widespread
+popularity thanks to its simple style. The term lightbox has been employed
+since then for Javascript libraries to support such functionality.
+
+For the J1 Template, two different lightboxes are available:
+
+* Lightbox V2 (lightbox)
+* LightGallery
+
+The default tool employed by J1 Template is Lightbox V2, a Javascript library
+written by _Lokesh Dhakar_. The name of that (build-in) is *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 block 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[ 800, {data-images-standalone}, role="mb-4" ]
+
+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[ 395, {data-images-group}, group, role="mb-4 wm-800" ]
+
+=== 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 more helpful. Check what
+LightGallery can do this by the following example.
+
+gallery::jg_old_times[ role="mb-4 wm-800" ]
+
+== 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 is 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.
+
+.Carousel Example
+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
+many 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 text-based slide show is a parallax text slider. If
+you want to emphasize your 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, therefore a pure text-based presentation
+maybe the better choice.
+
+.Carousel Example
+carousel::demo_text_carousel_parallax[role="mb-3"]
+
+Parallax text shows can be placed as banners on a page. For text shows,
+different animations are available. Internally, J1 Template uses some of
+the 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 of 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 about your site or the products offered.
+
+.Carousel Example
+carousel::demo_simple[role="mb-3"]
+
+=== Carousel + Caption + Lightbox
+
+Carousels are 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, an almost simple
+lightbox is used: Lightbox V2; or short: lightbox.
+
+.Carousel Example
+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,
+others are browsed by easy-to-use control buttons.
+
+=== 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.
+
+.Carousel Example
+carousel::demo_oneslide[role="mb-3"]
+
+== J1 Master Slider
+
+The Javascript tool _Master Slider_ is a 3rd party plugin fully integrated
+into the J1 Template by the module `masterslider`. J1 Template uses the
+*free* version of Master Slider (MS Lite). The Lite version does *not* support
+all features: the functionality of  *filters*, *layouts* are limited and no
+*overlay* techniques are supported by the MS Lite version.
+
+WARNING: The Master Slider (MS Lite and Pro version) is a so-called _jQuery_
+Plugin. _jQuery_ can simplify Javascript code a lot but will slow-down
+the runtime performance of the JS code. Expect for slower browsers and
+platforms, like mobiles or tablets, initializing an MS Slider will take
+a while to be finished.
+
+=== Carousels versus Sliders
+
+Sliders and Carousels are focussing quite the same thing: presenting image data
+dynamically as an app. The features of Sliders go far beyond what simple
+Carousels can do: presenting image-based data as *slideshows*. Well-known
+Office Products to create *presentations* are _Microsoft Powerpoint_ or
+_Google Docs_. Modern sliders like _Master Slider_ provide similar features to
+present animated *shows* (presentations) based on digital image data combined
+with text elements, buttons, or overlay techniques, e.g., for images or
+other digital data sources.
+
+In short: Carousels are used to present images, and sliders are used to create
+complex image-based slideshows (presentations).
+
+=== MS Slider using Controls + Filters + Lightbox
+
+The following slider uses the (CSS) filter feature of Master Slider.
+Filters can be used, for example, to *transform* the *style* of the images
+presented by a slider. In this example, the slider images are transformed
+from style *color* to *sepia*.
+
+WARNING: Lightbox support is only available for the MS Lite version of J1
+Template. The product versions *MS Lite* and *MS Pro* does not support
+Lightboxes on sliders out-of-the-box.
+
+TIP: Click on the Lightbox symbol mdi:image-outline[18px, md-gray] in the
+slides to see the *colored* images configured for the slider.
+
+masterslider::ms_00001[role="mt-4 mb-5"]
+
+=== MS Slider using Text Elements
+
+One of the major features of sliders is to present additional (animated)
+elements, like text data, connected to the images presented by a slider:
+the slideshow. MS Slider provides functions to combine images and text
+elements: the *MSInfo* element.
+
+masterslider::ms_00003[role="mt-4 mb-5"]
+
+=== MS Slider using ThumbImages
+
+To give the users better control over a slideshow, sliders provide complex UI
+elements like *thumbs* placed side-by-side (left|right), at the top, or at
+the bottom of a slideshow. Find two examples to control a slideshow by
+*thumb images*.
+
+masterslider::ms_00004[role="mt-4 mb-5"]
+
+masterslider::ms_00005[role="mt-4 mb-5"]
+
+=== MS Slider using MS Info in a complex Layout
+
+The following slider presents a slideshow that combines an MSInfo element
+at the bottom and the MS Layout `partialview`. A slideshow typically presents
+a larger number of slides. The layout `partialview` accompanies the *active*
+slide by their neighbors on the left and the right.
+
+masterslider::ms_00009[role="mt-4 mb-5"]
+
+=== More about MS Sliders
+
+If you're interested to learn more about MS Sliders, go for the following
+documents:
+
+* link:{ms-slider-previewer}[MS Slider Previewer, {browser-window--new}]
+* link:{ms-slider-module-documentation}[MS Slider module documentation, {browser-window--new}]
+
+
+== JustifiedGallery
+
+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 the
+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!
+
+Pictures you've made are typically not even in size. Images may have the
+same size (resolution), but some are orientated landscapes, or others
+may be portraits. For that reason, a more powerful gallery is needed to create
+so-called justified views. JustifiedGallery uses 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!
+
+.JustifiedGallery Example
+gallery::jg_customizer[role="mb-4"]
+
+== What 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:{url-roundtrip--present-videos}[Present Videos].

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

@@ -0,0 +1,281 @@
+---
+title:                                  Roundtrip
+tagline:                                present videos
+date:                                   2020-11-04 00:00:00  +100
+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.
+
+categories:                             [ Roundtrip ]
+tags:                                   [ Introduction, Module, Video ]
+
+permalink:                              /pages/public/learn/roundtrip/present_videos/
+regenerate:                             false
+
+personalization:                        true
+fab_menu_id:                            page_ctrl
+
+resources:                              [
+                                          animate, lightGallery, justifiedGallery, video_js,
+                                          vimeo_player, vimeo_froogaloop
+                                        ]
+resource_options:
+  - attic:
+      slides:
+        # Broadway Underground - still image (animate default)
+        - url:                          /assets/videos/headers/still/underground-broadway.jpg
+          alt:                          Broadway Underground
+          alignY:                       top
+          animateFirst:                 false
+        # Broadway Underground - FAYETTE ST, moved file to Github/LFS
+        - url:                          https://github.com/jekyll-one-org/jekyll-one-lfs/raw/master/videos/underground-broadway.mp4
+          alignY:                       0
+          isVideo:                      true
+          loop:                         false
+          duration:                     12000
+        # Broadway Underground - still image (animate random)
+        - url:                          /assets/videos/headers/still/underground-broadway.jpg
+          alt:                          Broadway Underground
+          alignY:                       top
+          transition:                   push_left|push_right|cover_up|cover_down|fade|fadeInOut
+---
+
+// 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
+// ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
+
+++++
+<!-- insert Google Ad (Displayanzeige): horizontal-2, adSlot="5128488466" -->
+<div class="5128488466 mb-5">
+  <ins class="adsbygoogle"
+    style="display: block;"
+    data-ad-client="ca-pub-3885670015316130"
+    data-ad-slot="5128488466"
+    data-ad-format="auto"
+    data-adtest="on"
+    data-full-width-responsive="true">
+  </ins>
+</div>
+++++
+
+++++
+<script>
+
+  $(document).ready(function() {
+    var logger              = log4javascript.getLogger('j1.google.ads');
+    var autoHideOnUnfilled  = true;
+
+    var dependencies_met_page_ready = setInterval (function (options) {
+      if ( j1.getState() === 'finished' ) {
+
+        // monitor for state changes on the ad
+        // ---------------------------------------------------------------------
+        $('.adsbygoogle').attrchange({
+          trackValues: true,
+          callback: function (event) {
+            if (event.newValue === 'unfilled') {
+              var elm = event.target.dataset;
+              if (elm.adClient) {
+                logger.warn('\n' + 'initialized ad detected as: ' + event.newValue);
+                if (autoHideOnUnfilled) {
+                  logger.info('\n' + ' hide ad for slot: ' + elm.adSlot);
+                  $('.' + elm.adSlot ).hide();
+                }
+              }
+            }
+          }
+        });
+
+        // manage uncaught execeptions
+        // ---------------------------------------------------------------------
+        // window.onerror = function (msg, url, line) {
+        //    alert("Message : " + msg );
+        //    alert("url : " + url );
+        //    alert("Line number : " + line );
+        // }
+
+        logger.info('\n' + 'initialize Google Ad on slot: ' + '5128488466');
+        (adsbygoogle = window.adsbygoogle || []).push({});
+
+        clearInterval(dependencies_met_page_ready);
+      }
+   });
+
+  });
+
+</script>
+++++
+
+// Include sub-documents (if any)
+// -----------------------------------------------------------------------------
+[role="dropcap"]
+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.
+
+== Video Galleries
+
+HTML5 Video opens the doors to your way of 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
+LightGallery.
+
+Two types of video sources are supported:
+
+. Video files from local folders (your webspace)
+. Video files from online sources (on the Internet) like YouTube, Vimeo, etc.
+
+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. You can
+place Galleries elsewhere with your content. You can use them for video blogs
+by putting them into your blog article's content.
+
+WARNING: LightGallery can be used for free for private use, but a commercial
+license is needed for business use. See
+link:{url-light-gallery--license}[LightGallery licenses, {browser-window--new}]
+how to use LightGallery for commercial websites and projects.
+
+== Local Video content
+
+Digital image content, simple pictures or videos, are easy to make. Today,
+every mobile has a camera. Presenting a bunch of (digital) pictures is done
+very easily by using Justified Gallery. Videos created by a digicam or a mobile
+can be played by J1 Template using the HTML5 Video support. Present videos you
+have made at it's best.
+
+Two players are available with LightGallery:
+
+. an internal player used by default
+. {url-videojs--home}[video.js, {browser-window--new}], a excellent
+  Javascript video library including a great player
+
+NOTE: The HTML5 specification does *not* define which video and audio formats
+browsers *should* support. J1 LightGallery can play all types of standard
+HTML5 Video formats on modern browsers today (MP4, WebM, and Ogg).
+
+.MP4 Videos - VideoJS Player
+gallery::jg_video_html5[role="mb-5"]
+
+== Online Video content
+
+The Internet is full of inspiring content. If you want to present video
+content from the Internet, the online video support of J1 Template is the
+right choice.
+
+=== YouTube
+
+The community at link:{url-youtube--home}[YouTube, {browser-window--new}] is
+large, with over 1 billion users that watch hundreds of millions of hours of
+content every day. The number of channels on YouTube is enormous. For TV
+Stations, it's a must to publish videos of their shows on YouTube. Find below
+a current gallery from *The Voice Kids* (SAT.1) Germany and a real classic
+channel *Carpool Karaoke* from the frontman James Corden of *The Late Late Show*
+at CBS, Los Angeles.
+
+.The Voice Kids, Germany 2021
+gallery::jg_video_online_youtube_2[role="mb-5"]
+
+.James Cordon's Carpool Karaoke
+gallery::jg_video_online_youtube[role="mb-5"]
+
+=== Vimeo
+
+link:{url-vimeo--home}[Vimeo, {browser-window--new}] is a video-sharing
+platform that includes features such as live-streaming and customization.
+Vimeo provides many tools for video creation, editing, and broadcasting.
+The platform provides you with an excellent channel to present high-quality,
+professional videos and reach audiences worldwide.
+
+Vimeo does offer a basic, free membership, but it limits you to 500MB maximum
+storage per week. Alternately, you can book on paid plans: Plus, PRO, Business.
+Each membership has varied storage limits, but the free plan offers sufficient
+space for private projects to present video content without advertising.
+
+NOTE: A great plus using Vimeo is that *no advertising* is used on that
+platform.
+
+.Vimeo Video Gallery - Fashion
+gallery::jg_video_online_vimeo[role="mb-5"]
+
+=== DailyMotion
+
+link:{url-dailymotion--home}[Dailymotion, {browser-window--new}] is a French
+video-sharing technology platform primarily owned by
+link:{url-vivendi--home}[Vivendi, {browser-window--new}]. The platform is
+available worldwide in 183 languages and 43 localised versions featuring local
+home pages and local content.
+
+The platform is a monetization solution that allows allows to directly connect
+to high-quality advertisers through a proprietary Advertising Solution. Like
+YouTube, videos cav be watched for free, but ads are shown on each and every
+video.
+
+Dailymotion allows users to search videos by *tags*, topic *channels*, or
+user-created *groups*. Users can upload videos of up to 2 gigabytes and a
+length of 60 minutes. If a user is a MotionMaker or MotionPartner, a program
+for particularly creative users or partners, they can upload videos of
+unlimited length.
+
+NOTE: Like YouTube, DailyMotion is a commercial platform using *advertising*
+on all video content. On every video, an ad clip is presented of 15 to
+30 seconds in length.
+
+.DailyMotion Video Gallery - SELF Magazine (Channel)
+gallery::jg_video_online_dailymotion[role="mb-5"]
+
+=== VK
+
+link:{url-vk--home}[VK, {browser-window--new}], former Vkontakte.ru until
+January 2012, is a multilingual social network operated from Russia.
+Registered users can create a profile on VK and exchange information with
+other users.
+
+According to the operator, the platform has over 100 million active users,
+but mainly in Russia, Ukraine, and other Russian spoken countries. VK is
+among the most popular websites in Russia.
+
+NOTE: VK is accused of insufficient protection of personal data. The platform
+is also openly criticized by neo-Nazi and neo-fascist Groups used without
+there being a handle against them so far. To date, the Russian investigative
+authorities (especially the FSB) have not made any efforts to identify
+right-wing extremists or to suppress racist currents on the platform.
+
+.VK Video Gallery - Wildlife
+gallery::jg_video_online_vk[role="mb-5"]
+
+
+== What next
+
+Images and videos are pretty visual. And it can be impressive, for sure.
+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.
+
+What? Please find out how it works.
+Go for: link:{url-roundtrip--typography}[Typography], then.