j1-template 2023.9.2 → 2023.10.0

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

@@ -7,7 +7,7 @@
 #
 #  Copyright (C) 2023 Juergen Adams
 #
-#  J1 Theme is licensed under the MIT License.
+#  J1 Template is licensed under the MIT License.
 #  See: https://github.com/jekyll-one/J1 Theme/blob/master/LICENSE
 # ------------------------------------------------------------------------------
 
@@ -30,6 +30,10 @@ settings:
   # ----------------------------------------------------------------------------
   grids:
 
+    # --------------------------------------------------------------------------
+    # POSTS
+    # ------------------------------------------.-------------------------------
+
     # --------------------------------------------------------------------------
     # Post Series
     #
@@ -39,14 +43,32 @@ settings:
       id:                               post_series_example
       type:                             post
       group:                            Featured                                # generate grid elements only for the group
-      gutters:                          true
+      gutters:                          3
+
       image_styles:                     img-fluid img-object--cover
       image_height:                     300px
       translate_links:                  false                                   # default: false
       link_new_window:                  true                                    # default: false
 
       # ------------------------------------------------------------------------
-      # Masonry options
+      # Bootstrap responsive options
+      #
+      responsive:
+        xs:                             12
+        sm:                             12
+        md:                             6
+        lg:                             4
+        xl:                             4
+
+      # ------------------------------------------------------------------------
+      # Lightbox options (no lightbox available for posts)
+      # ------------------------------------------------------------------------
+      #
+      lightbox:
+        enabled:                        false
+
+      # ------------------------------------------------------------------------
+      # masonry options
       #
       options:
         originTop:                      true
@@ -63,6 +85,10 @@ settings:
         contrast:                       0.8
         brightness:                     0.4
 
+    # --------------------------------------------------------------------------
+    # COLLECTIONS
+    # ------------------------------------------.-------------------------------
+
     # --------------------------------------------------------------------------
     # Collection Portfolio
     #
@@ -72,12 +98,29 @@ settings:
       id:                               collection_portfolio
       type:                             collection
       collection:                       portfolio                               # generate grid elements (articles) for the collection
+      gutters:                          3
+
       image_styles:                     img-fluid img-object--cover
       image_height:                     300px
       image_width:                      300px
       translate_titles:                 false                                   # default: false
-      lightbox:                         false
-      gutters:                          true
+
+      # ------------------------------------------------------------------------
+      # Bootstrap responsive options
+      #
+      responsive:
+        xs:                             12
+        sm:                             12
+        md:                             6
+        lg:                             4
+        xl:                             4
+
+      # ------------------------------------------------------------------------
+      # Lightbox options (no lightbox available for collections)
+      # ------------------------------------------------------------------------
+      #
+      lightbox:
+        enabled:                        false
 
       # ------------------------------------------------------------------------
       # Preview options
@@ -86,7 +129,7 @@ settings:
         enabled:                        true
 
       # ------------------------------------------------------------------------
-      # Masonry options
+      # masonry options
       #
       options:
         originTop:                      true
@@ -102,16 +145,35 @@ settings:
 
       id:                               collection_biography
       type:                             collection
+
       collection:                       biography                               # generate grid elements (articles) for the collection
+      gutters:                          3
+
       image_styles:                     img-fluid img-object--cover
       image_height:                     470px
       image_width:                      400px
       translate_titles:                 false                                   # default: false
       preview:                          true
-      gutters:                          true
 
       # ------------------------------------------------------------------------
-      # Masonry options
+      # Bootstrap responsive options
+      #
+      responsive:
+        xs:                             12
+        sm:                             12
+        md:                             6
+        lg:                             4
+        xl:                             4
+
+      # ------------------------------------------------------------------------
+      # Lightbox options (no lightbox available for collections)
+      # ------------------------------------------------------------------------
+      #
+      lightbox:
+        enabled:                        false
+
+      # ------------------------------------------------------------------------
+      # masonry options
       #
       options:
         originTop:                      true
@@ -127,16 +189,35 @@ settings:
 
       id:                               collection_fantasy
       type:                             collection
+
       collection:                       fantasy                                 # generate grid elements (articles) for the collection
+      gutters:                          3
+
       image_styles:                     img-fluid img-object--cover
       image_height:                     470px
       image_width:                      400px
       translate_titles:                 false                                   # default: false
       preview:                          true
-      gutters:                          true
 
       # ------------------------------------------------------------------------
-      # Masonry options
+      # Bootstrap responsive options
+      #
+      responsive:
+        xs:                             12
+        sm:                             12
+        md:                             6
+        lg:                             4
+        xl:                             4
+
+      # ------------------------------------------------------------------------
+      # Lightbox options (no lightbox available for collections)
+      # ------------------------------------------------------------------------
+      #
+      lightbox:
+        enabled:                        false
+
+      # ------------------------------------------------------------------------
+      # masonry options
       #
       options:
         originTop:                      true
@@ -153,15 +234,34 @@ settings:
       id:                               collection_romance
       type:                             collection
       translate_titles:                 true                                    # default: false
+
       collection:                       romance                                 # generate grid elements (articles) for the collection
+      gutters:                          3
+
       image_styles:                     img-fluid img-object--cover
       image_height:                     470px
       image_width:                      400px
       preview:                          true
-      gutters:                          true
 
       # ------------------------------------------------------------------------
-      # Masonry options
+      # Bootstrap responsive options
+      #
+      responsive:
+        xs:                             12
+        sm:                             12
+        md:                             6
+        lg:                             4
+        xl:                             4
+
+      # ------------------------------------------------------------------------
+      # Lightbox options (no lightbox available for collections)
+      # ------------------------------------------------------------------------
+      #
+      lightbox:
+        enabled:                        false
+
+      # ------------------------------------------------------------------------
+      # masonry options
       #
       options:
         originTop:                      true
@@ -170,28 +270,50 @@ settings:
         percentPosition:                true
 
     # --------------------------------------------------------------------------
-    # Image Cards + Lightbox + Gutters + Captions
+    # IMAGES
+    # ------------------------------------------.-------------------------------
+
+    # --------------------------------------------------------------------------
+    # Images + Fixed Height + Gutters + Captions + Lightbox
     #
     - grid:
       enabled:                          true
 
-      id:                               card_example
-      type:                             card
+      id:                               image_fixed_height_lb
+      type:                             image
+      gutters:                          3
+
       image_base_path:                  /assets/images/modules/gallery/mega_cities
       image_styles:                     img-fluid
       image_height:                     300px
-      lightbox:                         true
-      gutters:                          true
 
       # ------------------------------------------------------------------------
-      # Caption options
+      # Bootstrap responsive options
+      #
+      responsive:
+        xs:                             12
+        sm:                             12
+        md:                             6
+        lg:                             4
+        xl:                             4
+
+      # ------------------------------------------------------------------------
+      # lightbox settings
+      # ------------------------------------------------------------------------
+      #
+      lightbox:
+        enabled:                        true
+        type:                           lb                                      # lb | lg
+
+      # ------------------------------------------------------------------------
+      # caption options
       #
       caption:
         enabled:                        true
         position:                       bottom                                  # top|bottom|center
 
       # ------------------------------------------------------------------------
-      # Masonry options
+      # masonry options
       #
       options:
         originTop:                      true
@@ -229,27 +351,45 @@ settings:
           caption:                      Shangri-La Hotel Jakarta - Indonesia
 
     # --------------------------------------------------------------------------
-    # Image Grid + No Lightbox + No Gutters + No Captions
+    # Images + Variable Height + Gutters + Captions + Lightbox
     #
     - grid:
       enabled:                          true
 
-      id:                               image_grid_base_example
+      id:                               image_variable_height_lb
       type:                             image
+      gutters:                          3
+
       image_base_path:                  /assets/images/modules/gallery/mega_cities
       image_styles:                     img-fluid
-      lightbox:                         false
-      gutters:                          false
 
       # ------------------------------------------------------------------------
-      # Caption options
+      # Bootstrap responsive options
+      #
+      responsive:
+        xs:                             12
+        sm:                             12
+        md:                             6
+        lg:                             4
+        xl:                             4
+
+      # ------------------------------------------------------------------------
+      # Lightbox options
+      # ------------------------------------------------------------------------
+      #
+      lightbox:
+        enabled:                        true
+        type:                           lb                                      # lb | lg
+
+      # ------------------------------------------------------------------------
+      # caption options
       #
       caption:
-        enabled:                        false
+        enabled:                        true
         position:                       bottom                                  # top|bottom|center
 
       # ------------------------------------------------------------------------
-      # Masonry options
+      # masonry options
       #
       options:
         originTop:                      true
@@ -287,27 +427,59 @@ settings:
           caption:                      Shangri-La Hotel Jakarta - Indonesia
 
     # --------------------------------------------------------------------------
-    # Image Grid + Lightbox + Gutters + Captions
-    #
+    # Images + Variable Height + Gutters + Captions + lightGallery
     - grid:
       enabled:                          true
 
-      id:                               image_grid_full_example
+      id:                               image_variable_height_lg
       type:                             image
+      gutters:                          3
+
       image_base_path:                  /assets/images/modules/gallery/mega_cities
       image_styles:                     img-fluid
-      lightbox:                         true
-      gutters:                          true
+      image_height:                     300px
 
       # ------------------------------------------------------------------------
-      # Caption options
+      # Bootstrap responsive options
+      #
+      responsive:
+        xs:                             12
+        sm:                             12
+        md:                             6
+        lg:                             4
+        xl:                             4
+
+      # ------------------------------------------------------------------------
+      # VideoJS settings
+      # ------------------------------------------------------------------------
+      #
+      videojs:
+        enabled:                        false
+
+      # ------------------------------------------------------------------------
+      # lightbox settings
+      # ------------------------------------------------------------------------
+      #
+      lightbox:
+        enabled:                        true
+        type:                           lg                                      # lb | lg
+
+      lightGallery:
+        plugins:                        lgFullscreen, lgRotate, lgThumbnail
+
+        options:
+          download:                     false
+          alignThumbnails:              left
+
+      # ------------------------------------------------------------------------
+      # caption options
       #
       caption:
         enabled:                        true
         position:                       bottom                                  # top|bottom|center
 
       # ------------------------------------------------------------------------
-      # Masonry options
+      # masonry options
       #
       options:
         originTop:                      true
@@ -320,62 +492,135 @@ settings:
       #
       images:
 
-        - image:                        # image 1
+#       image 1
+        - image:
           file:                         denys-nevozhai-1_b.jpg
           caption:                      Man posing at the rooftop of Jin Mao Tower Shanghai - China
-
-        - image:                        # image 2
+#       image 2
+        - image:
           file:                         thomas-tucker_b.jpg
           caption:                      Sunset over Taipei City - Taiwan
-
-        - image:                        # image 3
+#       image 3
+        - image:
           file:                         emmad-mazhari_b.jpg
           caption:                      Chicago - United States
-
-        - image:                        # image 4
+#       image 4
+        - image:
           file:                         johan-mouchet_b.jpg
           caption:                      The Queen Bee at the Eureka Tower - Melbourne Southbank Australia
-
-        - image:                        # image 5
+#       image 5
+        - image:
           file:                         federico-rizzarelli_b.jpg
           caption:                      Shanghai - China
-
-        - image:                        # image 6
+#       image 6
+        - image:
           file:                         gints-gailis_b.jpg
           caption:                      Shangri-La Hotel Jakarta - Indonesia
 
     # --------------------------------------------------------------------------
-    # Image Grid + Lightbox + Gutters + Captions + Filters
-    #
+    # VIDEOS
+    # ------------------------------------------.-------------------------------
+
+    # --------------------------------------------------------------------------
+    # Video + Variable Height + Gutters + Captions + lightGallery
     - grid:
       enabled:                          true
 
-      id:                               image_grid_full_example_filters
-      type:                             image
-      image_base_path:                  /assets/images/modules/gallery/mega_cities
-      image_styles:                     img-fluid
-      lightbox:                         true
-      gutters:                          true
+      id:                               mixed_video_example
+      type:                             video
+      gutters:                          2
 
       # ------------------------------------------------------------------------
-      # Caption options
+      # Bootstrap responsive options
       #
-      caption:
+      responsive:
+        xs:                             12
+        sm:                             12
+        md:                             6
+        lg:                             6
+        xl:                             6
+
+      # ------------------------------------------------------------------------
+      # VideoJS settings
+      # See settings: https://jekyll.one/pages/public/manuals/videojs/videojs_api/
+      # ------------------------------------------------------------------------
+      #
+      videojs:
         enabled:                        true
-        position:                       bottom                                  # top|bottom|center
+        theme:                          uno
+
+        # ----------------------------------------------------------------------
+        # Player settings
+        # See: https://jekyll.one/pages/public/manuals/videojs/lightgallery_api
+        # ----------------------------------------------------------------------
+        #
+        player:
+          enabled:                      true
+
+          videojsPlayer:
+            enabled:                    true
+
+            options:
+              muted:                    false
+              preload:                  false
+              autoplayFirstVideo:       true
+
+            controls:                   true
+            controlBar:
+              remainingTimeDisplay:     true
+              pictureInPictureToggle:   false
+
+          vimeoPlayer:
+            enabled:                    true
+            options:
+              autoPlay:                 true
+              byline:                   0
+              portrait:                 0
+              color:                    CCCCCC
+
+          wistiaPlayer:
+            enabled:                    true
+            options:
+              autoPlay:                 true
+              fullscreenButton:         true
+              muted:                    false
+              qualityControl:           false
+
+          youTubePlayer:
+            enabled:                    true
+            options:
+              autoPlay:                 true
+              modestbranding:           1
+              showinfo:                 0
+              controls:                 0
 
       # ------------------------------------------------------------------------
-      # CSS filter options (Sepia)
+      # Lightbox settings
+      # See settings for lightbox:     https://jekyll.one/pages/public/manuals/modules/lightbox
+      # See settings for lightGallery: https://jekyll.one/pages/public/manuals/videojs/videojs_api
+      # ------------------------------------------------------------------------
       #
-      filters:
+      lightbox:
         enabled:                        true
-        grayscale:                      0.8
-        contrast:                       0.8
-        brightness:                     0.7
-        sepia:                          1
+        type:                           lg
+
+      lightGallery:
+        plugins:                        lgThumbnail, lgVideo
+
+        options:
+          download:                     false
+          alignThumbnails:              left
+          autoplayFirstVideo:           true
+
+      # ------------------------------------------------------------------------
+      # caption options
+      #
+      caption:
+        enabled:                        true
+        position:                       bottom                                  # top|bottom|center
 
       # ------------------------------------------------------------------------
-      # Masonry options
+      # masonry options
       #
       options:
         originTop:                      true
@@ -384,33 +629,102 @@ settings:
         percentPosition:                true
 
       # ------------------------------------------------------------------------
-      # Images
+      # html5 video settings
+      # ------------------------------------------------------------------------
       #
-      images:
-
-        - image:                        # image 1
-          file:                         denys-nevozhai-1_b.jpg
-          caption:                      Man posing at the rooftop of Jin Mao Tower Shanghai - China
-
-        - image:                        # image 2
-          file:                         thomas-tucker_b.jpg
-          caption:                      Sunset over Taipei City - Taiwan
-
-        - image:                        # image 3
-          file:                         emmad-mazhari_b.jpg
-          caption:                      Chicago - United States
-
-        - image:                        # image 4
-          file:                         johan-mouchet_b.jpg
-          caption:                      The Queen Bee at the Eureka Tower - Melbourne Southbank Australia
+      html5:
+        video_base_path:                /assets/videos/gallery/html5
+        poster_base_path:               /assets/videos/gallery/html5
 
-        - image:                        # image 5
-          file:                         federico-rizzarelli_b.jpg
-          caption:                      Shanghai - China
-
-        - image:                        # image 6
-          file:                         gints-gailis_b.jpg
-          caption:                      Shangri-La Hotel Jakarta - Indonesia
+      # ------------------------------------------------------------------------
+      # videos
+      #
+      videos:
+
+#       video 1
+        - video:
+          name:                         Planet Earth II
+          type:                         youtube
+          size:                         "1280-720"
+          source:                       "https://youtu.be/IUN664s7N-c"
+          pinterest_prefix:             Pin video
+          tweet_prefix:                 Try video
+          description: >
+                                        <h4>
+                                          Visual Soundscapes - Mountains | Planet Earth II | BBC America
+                                        </h4>
+                                        <p>
+                                          On the heels of Planet Earth II’s record-breaking
+                                          Emmy nominations, BBC America presents stunning visual
+                                          soundscapes from the series' amazing habitats.
+                                        </p>
+          poster:
+            style:                      img-responsive
+            source:                     "https://img.youtube.com/vi/IUN664s7N-c/maxresdefault.jpg"
+          caption:
+            position:                   bottom
+            text:                       "YouTube &middot; Visual Soundscapes - Mountains | BBC America"
+
+#       video 2
+        - video:
+          name:                         Nature Video by Charlie Kaye
+          type:                         vimeo
+          size:                         "1280-720"
+          source:                       "https://vimeo.com/112836958"
+          pinterest_prefix:             Pin video
+          tweet_prefix:                 Try video
+          description: >
+                                        <h4>
+                                          Nature
+                                        </h4>
+                                        <p>
+                                          Video by <a target='_blank' href='https://vimeo.com/charliekaye'>Charlie Kaye.</a>
+                                        </p>
+          poster:
+            style:                      img-responsive
+            source:                     "https://www.lightgalleryjs.com/images/demo/vimeo-video-poster.jpg"
+          caption:
+            position:                   bottom
+            text:                       "Vimeo &middot; Nature Video by Charlie Kaye"
+
+#       video 3
+        - video:
+          name:                         Thank You
+          type:                         wistia
+          size:                         "1280-720"
+          source:                       "https://private-sharing.wistia.com/medias/mwhrulrucj"
+          pinterest_prefix:             Pin video
+          tweet_prefix:                 Try video
+          description: >
+                                        <h4>Thank You!</h4>
+                                        <p>
+                                          Sample Wistia video
+                                        </p>
+          poster:
+            style:                      img-responsive
+            source:                     "https://www.lightgalleryjs.com/images/demo/wistia-video-poster.jpeg"
+          caption:
+            position:                   bottom
+            text:                       "Wistia &middot; Thank You"
+
+#       video 4
+        - video:
+          name:                         Peck Pocketed
+          type:                         html5
+          size:                         "1280-720"
+          source:                       video1.mp4
+          pinterest_prefix:             Pin video
+          tweet_prefix:                 Try video
+          description: >
+                                        <h4>
+                                          Peck Pocketed by Kevin Herron | Disney Favorite
+                                        </h4>
+          poster:
+            style:                      img-responsive
+            source:                     video1-poster.jpg
+          caption:
+            position:                   bottom
+            text:                       "MP4 Video &middot; Student Academy Award winning cartoon clip"
 
 # ------------------------------------------------------------------------------
 # END config