j1-template 2024.3.12 → 2024.3.14

data/lib/starter_web/_data/modules/gallery.yml

@@ -841,5 +841,141 @@ settings:
                                         <h6>Beginner Mat Pilates: Core Workout</h6>
                                         <br>
 
+    # --------------------------------------------------------------------------
+    # HTML5 VIDEO (over VodeoJS)
+    #
+    - gallery:
+      enabled:                          true
+
+      id:                               jg_video_html5_videojs
+      type:                             video
+      video:                            html5
+      video_base_path:                  /assets/video/html5
+      image_base_path:                  /assets/video/poster/html5
+      thumb_base_path:                  /assets/video/poster/html5
+
+      # ------------------------------------------------------------------------
+      # Justified Gallery settings
+      # ------------------------------------------------------------------------
+      #
+      gallery_options:
+        rowHeight:                      250
+        gutters:                        3
+
+      # ------------------------------------------------------------------------
+      # Lightbox|lightGallery settings
+      # ------------------------------------------------------------------------
+      #
+      lightbox:
+        enabled:                        true
+        type:                           lg
+
+      lightGallery:
+        plugins:                        lgThumbnail, lgVideo
+
+        options:
+          licenseKey:                   0000-0000-000-0000
+          download:                     false
+          alignThumbnails:              left
+          animateThumb:                 true
+          autoplayFirstVideo:           true
+          videojs:                      true
+          videojsTheme:                 vjs-theme-uno
+
+        videojsOptions:
+          enabled:                      true
+
+          muted:                        false
+          preload:                      true
+#         videoStart:                   ["00:00:30", "00:01:30"]                  # start time (hh:mm:ss) for [video1, video2]
+
+          controls:                     true
+          controlBar:
+            playbackRates:              [0.25, 0.5, 1, 1.5, 2]
+            remainingTimeDisplay:       true
+            pictureInPictureToggle:     false
+
+            volumePanel:
+              inline:                   false
+
+            # hotkeysPlugin:
+            #   enabled:                  true
+            #   options:
+            #     volumeStep:             0.2
+            #
+            # zoomPlugin:
+            #   enabled:                  true
+            #   options:
+            #     moveX:                  0
+            #     moveY:                  0
+            #     rotate:                 0
+            #     zoom:                   1
+
+      # ------------------------------------------------------------------------
+      # CSS filter options
+      #
+      filters:
+        enabled:                        false
+        grayscale:                      0
+        contrast:                       1
+        brightness:                     1
+
+      # ------------------------------------------------------------------------
+      # Video settings
+      # ------------------------------------------------------------------------
+      #
+      videos:
+
+        - video:                        # video 1
+          enabled:                      true
+
+          name:                         Peck Pocketed
+          type:                         html5
+          size:                         1280-720
+          source:                       peck_pocketed.mp4
+          poster_image:                 peck_pocketed.jpg
+          pinterest_prefix:             Pin video
+          tweet_prefix:                 Try video
+          caption_text:                 Peck Pocketed &middot; Student Academy Award winning Cartoon Clip
+          description: >
+                                        <h5>Peck Pocketed by Kevin Herron | Disney Favorite</h5>
+                                        <h6>Student Academy Award winning Cartoon Clip</h6>
+
+        # - video:                        # video 2
+        #   enabled:                      true
+        #
+        #   name:                         Rollin Wild
+        #   type:                         html5
+        #   size:                         1280-720
+        #   source:                       rolling_wild.mp4
+        #   poster_image:                 rolling_wild.jpg
+        #   pinterest_prefix:             Pin video
+        #   tweet_prefix:                 Try video
+        #   caption_text:                 Rollin` Wild &middot; Short Funny animated video clip created at the Film Academy
+        #   description: >
+        #                                 <h5>Rollin` Wild</h5>
+        #                                 <h6>Short Funny Animated Clip created at the Film Academy</h6>
+
+        - video:                        # video 2
+          enabled:                      true
+
+          name:                         Last Carpool Karaoke
+          type:                         youtube
+          size:                         1280-720
+          source:                       //youtube.com/watch?v=nV8UZJNBY6Y
+          poster_image:                 rolling_wild.jpg
+          pinterest_prefix:             Pin video
+          tweet_prefix:                 Try video
+          caption_text:                 Carpool Karaoke 2023 &middot; Last Carpool Karaoke
+          description: >
+                                        <h5>Carpool Karaoke 2023</h5>
+                                        <h6>
+                                          April 2023 - Adele wakeup James at home for the last Late Night Show,
+                                          for the last Carpool Caraoke ever.
+                                        </h6>
+                                        <br>
+          playerParams:
+            start:                      50                                      # seconds to start
+
 # ------------------------------------------------------------------------------
 # END config

data/lib/starter_web/_data/modules/lazyLoader.0.yml

@@ -0,0 +1,118 @@
+# ------------------------------------------------------------------------------
+# ~/_data/modules/lazyCSSLoader.yml
+# User Configuration of the lazyCSSLoader Module
+#
+# Product/Info:
+# https://jekyll.one
+#
+# Copyright (C) 2023, 2024 Juergen Adams
+#
+# J1 Template is licensed under the MIT License.
+# See: https://github.com/jekyll-one-org/j1-template/blob/main/LICENSE
+# ------------------------------------------------------------------------------
+# NOTE:
+#
+# ------------------------------------------------------------------------------
+
+# ------------------------------------------------------------------------------
+# Description
+#
+description:
+  title:                                lazyCSSLoader
+  scope:                                User settings
+  location:                             _data/modules/lazyCSSLoader.yml
+
+# ------------------------------------------------------------------------------
+# User settings
+#
+settings:
+  enabled:                              true
+
+  # ----------------------------------------------------------------------------
+  # Loader settings
+  # ----------------------------------------------------------------------------
+  loaders:
+
+    # --------------------------------------------------------------------------
+    # Images (foreground)
+    #
+    - loader:
+      enabled:                          true
+      type:                             image
+      description:                      Foreground Images (img)
+
+      selector:                         'img.lazy'
+      rootMargin:                       '150px'
+
+    # --------------------------------------------------------------------------
+    # MDI Light Icon CSS
+    #
+    - loader:
+      enabled:                          true
+      type:                             css
+      description:                      MDI Icons (light)
+
+      src:                              /assets/theme/j1/core/css/icon-fonts/mdil.min.css
+      selector:                         '.mdil'
+      rootMargin:                       '150px'
+
+    # --------------------------------------------------------------------------
+    # MDI Regular Icon CSS
+    #
+    - loader:
+      enabled:                          true
+      type:                             css
+      description:                      MDI Icon CSS (regular)
+
+      src:                              /assets/theme/j1/core/css/icon-fonts/mdi.min.css
+      selector:                         '.mdi'
+      rootMargin:                       '150px'
+
+    # --------------------------------------------------------------------------
+    # FontAwesone (FA) Icon CSS
+    #
+    - loader:
+      enabled:                          true
+      type:                             css
+      description:                      FA Icon CSS
+
+      src:                              /assets/theme/j1/core/css/icon-fonts/fontawesome.min.css
+      selector:                         '.fa'
+      rootMargin:                       '150px'
+
+    # --------------------------------------------------------------------------
+    # countryFlag Icon CSS
+    #
+    - loader:
+      enabled:                          true
+      type:                             css
+      description:                      CountryFlag Icon CSS
+
+      src:                              /assets/theme/j1/core/country-flags/css/theme/uno.min.css
+      selector:                         '.flag-icon'
+      rootMargin:                       '150px'
+
+    # --------------------------------------------------------------------------
+    # rTable CSS
+    #
+    - loader:
+      enabled:                          true
+      description:                      rTable CSS
+
+      src:                               /assets/theme/j1/modules/rtable/css/theme/uno/rtable.min.css
+      selector:                         '.rtable'
+      rootMargin:                       '150px'
+
+    # --------------------------------------------------------------------------
+    # Rouge CSS
+    #
+    # - loader:
+    #   enabled:                          true
+    #   description:                      Rouge CSS
+    #
+    #   src:                              /assets/theme/j1/modules/rouge/css/uno.light/theme.min.css
+    #   selector:                         '.highlight'
+    #   rootMargin:                       '150px'
+
+# ------------------------------------------------------------------------------
+# END config

data/lib/starter_web/_data/modules/lazyLoader.yml

@@ -1,6 +1,6 @@
 # ------------------------------------------------------------------------------
-# ~/_data/modules/lazyLoader.yml
-# User Configuration of the lazyLoader Module
+# ~/_data/modules/lazyCSSLoader.yml
+# User Configuration of the lazyCSSLoader Module
 #
 # Product/Info:
 # https://jekyll.one
@@ -18,9 +18,9 @@
 # Description
 #
 description:
-  title:                                lazyLoader
+  title:                                lazyCSSLoader
   scope:                                User settings
-  location:                             _data/modules/lazyLoader.yml
+  location:                             _data/modules/lazyCSSLoader.yml
 
 # ------------------------------------------------------------------------------
 # User settings
@@ -34,59 +34,96 @@ settings:
   loaders:
 
     # --------------------------------------------------------------------------
-    # MDI Light Icon CSS
+    # Images (foreground)
     #
     - loader:
       enabled:                          true
-      description:                      MDI Icons (light)
+      type:                             image
+      description:                      Foreground Images (img)
 
-      src:                              /assets/theme/j1/core/css/icon-fonts/mdil.min.css
-      selector:                         '.mdil'
-      rootMargin:                       '150px 0px'
+      selector:                         img.lazy
+      rootMargin:                       150px
 
     # --------------------------------------------------------------------------
-    # MDI Regular Icon CSS
+    # HTML content (banner) loaded via AJAX
     #
     - loader:
       enabled:                          true
-      description:                      MDI Icon CSS (regular)
+      type:                             xhr
+      description:                      Teaser Banner
 
-      src:                              /assets/theme/j1/core/css/icon-fonts/mdi.min.css
-      selector:                         '.mdi'
-      rootMargin:                       '150px 0px'
+      content:                          banner_home_teaser_content
+      content_file:                     /assets/data/banner.html
+      selector:                         banner_home_teaser                      # div id
+      rootMargin:                       150px
+
+    - loader:
+      enabled:                          true
+      type:                             xhr
+      description:                      Parallax Banner
+
+      content:                          banner_home_parallax_content
+      content_file:                     /assets/data/banner.html
+      selector:                         banner_home_parallax                    # div id
+      rootMargin:                       250px
 
     # --------------------------------------------------------------------------
-    # FontAwesone (FA) Icon CSS
+    # CSS files
     #
     - loader:
       enabled:                          true
-      description:                      FA Icon CSS
+      type:                             css
+      description:                      MDI Icons (light)
+
+      src:                              /assets/theme/j1/core/css/icon-fonts/mdil.min.css
+      selector:                         .mdil
+      rootMargin:                       150px
+
+    - loader:
+      enabled:                          true
+      type:                             css
+      description:                      MDI Icon CSS (regular)
+
+      src:                              /assets/theme/j1/core/css/icon-fonts/mdi.min.css
+      selector:                         .mdi
+      rootMargin:                       150px
+
+    - loader:
+      enabled:                          true
+      type:                             css
+      description:                      FA Icon CSS (all)
 
       src:                              /assets/theme/j1/core/css/icon-fonts/fontawesome.min.css
-      selector:                         '.fa'
-      rootMargin:                       '150px 0px'
+      selector:                         .fa
+      rootMargin:                       150px
 
-    # --------------------------------------------------------------------------
-    # countryFlag Icon CSS
-    #
     - loader:
       enabled:                          true
+      type:                             css
       description:                      CountryFlag Icon CSS
 
       src:                              /assets/theme/j1/core/country-flags/css/theme/uno.min.css
-      selector:                         '.flag-icon'
-      rootMargin:                       '150px 0px'
+      selector:                         .flag-icon
+      rootMargin:                       150px
 
-    # --------------------------------------------------------------------------
-    # rTable CSS
+
+    # - loader:
+    #   enabled:                          true
+    #   type:                             css
+    #   description:                      rTable CSS
     #
-    - loader:
-      enabled:                          true
-      description:                      rTable CSS
+    #   src:                              /assets/theme/j1/modules/rtable/css/theme/uno/rtable.min.css
+    #   selector:                         .rtable
+    #   rootMargin:                       150px
 
-      src:                              /assets/theme/j1/modules/rtable/css/theme/uno/rtable.min.css
-      selector:                         '.rtable'
-      rootMargin:                       '150px 0px'
+    # - loader:
+    #   enabled:                          true
+    #   type:                             css
+    #   description:                      Rouge CSS
+    #
+    #   src:                              /assets/theme/j1/modules/rouge/css/uno.light/theme.min.css
+    #   selector:                         .highlight
+    #   rootMargin:                       50px
 
 # ------------------------------------------------------------------------------
 # END config

data/lib/starter_web/_data/modules/masonry.yml

@@ -669,13 +669,13 @@ settings:
           name:                         Planet Earth II
           type:                         youtube
           size:                         1280-720
-          source:                       //youtube.com/watch?v=IUN664s7N-c
+          source:                       //youtu.be/IUN664s7N-c
           pinterest_prefix:             Pin video
           tweet_prefix:                 Try video
           description: >
-                                        <h5>The Breathtaking Beauty of Nature</h5>
+                                        <h5>Beauty of Nature</h5>
                                         <h6>
-                                          The BBC America presents impressive landscapes of
+                                          The BBC America presents breathtaking landscapes of
                                           amazing habitats from their Planet Earth II series
                                           on YouTube
                                         </h6>
@@ -685,7 +685,7 @@ settings:
             source:                     //img.youtube.com/vi/IUN664s7N-c/maxresdefault.jpg
           caption:
             position:                   bottom
-            text:                       YouTube Video &middot; The Breathtaking Beauty of Nature
+            text:                       YouTube Video &middot; Beauty of Nature
 
 #       video 2
         - video: