j1-template 2023.2.0 → 2023.2.2

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: f1536e55c2bb0fb4fa129d0e1201102edd9dc986985fb8d6c49d2129c144d4ce
-  data.tar.gz: 47c4bdcfe97959454d8ed2b41fe0f501f9ef7da991670c2314e2852b87f2caa9
+  metadata.gz: dcbf50d4b49f1e3b06ad10b84e19252817683798fbb9c0aab00737a339a5e861
+  data.tar.gz: 64c367576dd758a510de24d94431cd93fa9d59540b8cdecc6e3b67a8b7115b3e
 SHA512:
-  metadata.gz: 5197ed34d8d08623adda11b42965a78f4f867145bd698798a8b03be0ec23881de8ad729116ae8e2df57d48d0b40d0e86ae86ce1775a2816617e73b4288df9b1b
-  data.tar.gz: 0b0a06af2642959fc3b8d830dd282909124442d6066803dcda0a36fb951297a690fe34cc23108bff88b99aeb156e8db86322c438ff3ed394e0c7e718e4bd4bd5
+  metadata.gz: ddce5f497bc4444e065f71a0ea71f75899149954d951685730d5df6cf3b03b0a08516afe696d93edd68642809b8a09bcccf5f9fa1b71636a6ef6d95994cf4467
+  data.tar.gz: '08da2f5079b22fab8d1b070d1a91ea53832247c7dc781262bc9f0fb1c0d2f8d25e1ca681c8c619c7f6e7c250706eb77e3ba52e9f0fd7faa3212dbf2b2c1165d0'

data/_includes/themes/j1/layouts/layout_metadata_generator.html

@@ -201,7 +201,7 @@
 {% comment %} Load additional fonts from remote
 -------------------------------------------------------------------------------- {% endcomment %}
 <!-- Google fonts -->
-<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Montserrat:400,700" />
+<!-- link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Montserrat:400,700" / -->
 
 
 {% comment %} J1 SEO processing

data/assets/data/banner.html

@@ -259,8 +259,8 @@ exclude_from_search:                    true
                 		<img
                 			class="sticker-image"
                 			src="/assets/images/sticker/600x600/sticker-new-version.png"
-                			alt="Get new version 2023.2.0"
-                			title="Get new version 2023.2.0"
+                			alt="Get new version 2023.2.2"
+                			title="Get new version 2023.2.2"
                 			style="width: 140px; height: 120px;"
                 		>
                   </a>

data/assets/data/masonry.html

@@ -101,7 +101,6 @@ exclude_from_search:                    true
         <!-- Collect posts only if group matches -->
         {% for post in site.posts %} {% if post.group contains grid.group %}
 
-
         {% if grid.translate_links %}
           {% assign translate = "" %}
         {% else %}
@@ -114,11 +113,25 @@ exclude_from_search:                    true
           {% assign target = "" %}
         {% endif %}
 
+        {% comment %} Collect CSS image filters
+        ------------------------------------------------------------------------ {% endcomment %}
+        {% assign css_filters   = masonry_options.filters | merge: grid.filters %}
+        {% assign image_filters = 'filter:' %}
+
+        {% if css_filters.enabled %}
+          {% for filter in css_filters %}
+            {% if filter[0] contains 'enabled' %}
+              {% continue %}
+            {% endif %}
+            {% capture image_filters %}{{image_filters}} {{filter[0]}}({{filter[1]}}){% endcapture %}
+          {% endfor %}
+        {% endif %}
+
         <!-- resposive items: 3-2-1 -->
         <div class="col-xl-{{masonry_options.responsive.xl}} col-lg-{{masonry_options.responsive.lg}} col-md-{{masonry_options.responsive.md}} col-sm-{{masonry_options.responsive.sm}} col-{{masonry_options.responsive.xs}} px-{{gutter}} py-{{gutter}}">
 
           <article class="card bg-dark text-center text-white border-0 rounded-0 bottom">
-            <img class="card-img {{grid.image_styles}}" src="{{post.image.path | relative_url}}" alt="{{post.title}}" style="filter: contrast(1) brightness(0.5); height: {{grid.image_height}}; width: {{grid.image_width}}">
+            <img class="card-img {{grid.image_styles}}" src="{{post.image.path | relative_url}}" alt="{{post.title}}" style="{{image_filters}}; height: {{grid.image_height}};">
             <div class="card-content mt-5">
 
               {% if post %}
@@ -204,6 +217,20 @@ exclude_from_search:                    true
         {% assign gutter = 0  %}
       {% endif %}
 
+      {% comment %} Collect CSS image filters
+      ------------------------------------------------------------------------ {% endcomment %}
+      {% assign css_filters   = masonry_options.filters | merge: grid.filters %}
+      {% assign image_filters = 'filter:' %}
+
+      {% if css_filters.enabled %}
+        {% for filter in css_filters %}
+          {% if filter[0] contains 'enabled' %}
+            {% continue %}
+          {% endif %}
+          {% capture image_filters %}{{image_filters}} {{filter[0]}}({{filter[1]}}){% endcapture %}
+        {% endfor %}
+      {% endif %}
+
       {% for article in articles %}
       <div class="col-xl-{{masonry_options.responsive.xl}} col-lg-{{masonry_options.responsive.lg}} col-md-{{masonry_options.responsive.md}} col-sm-{{masonry_options.responsive.sm}} col-{{masonry_options.responsive.xs}} px-{{gutter}} py-{{gutter}}">
         <!-- Article item -->
@@ -215,11 +242,10 @@ exclude_from_search:                    true
                 <i class="mdi mdi-plus mdi-10x"></i>
               </div>
             </div>
-            <img class="{{grid.image_styles}}" src="{{article.image.path}}" alt="{{article.title}}" style="height: {{grid.image_height}}; width: {{grid.image_width}}">
+            <img class="{{grid.image_styles}}" src="{{article.image.path}}" alt="{{article.title}}" style="{{image_filters}}; height: {{grid.image_height}}; width: {{grid.image_width}}">
           </a>
           {% else %}
-            <!-- img class="img-fluid img-object--w400" src="{{article.image.path}}" alt="{{article.title}}" / -->
-            <img class="{{grid.image_styles}}" src="{{article.image.path}}" alt="{{article.title}}" style="height: {{grid.image_height}}; width: {{grid.image_width}}">
+            <img class="{{grid.image_styles}}" src="{{article.image.path}}" alt="{{article.title}}" style="{{image_filters}}; height: {{grid.image_height}}; width: {{grid.image_width}}">
           {% endif %}
           <div class="article-caption">
             <div class="article-caption-heading">
@@ -295,6 +321,20 @@ exclude_from_search:                    true
         {% assign gutter = 0  %}
       {% endif %}
 
+      {% comment %} Collect CSS image filters
+      ------------------------------------------------------------------------ {% endcomment %}
+      {% assign css_filters   = masonry_options.filters | merge: grid.filters %}
+      {% assign image_filters = 'filter:' %}
+
+      {% if css_filters.enabled %}
+        {% for filter in css_filters %}
+          {% if filter[0] contains 'enabled' %}
+            {% continue %}
+          {% endif %}
+          {% capture image_filters %}{{image_filters}} {{filter[0]}}({{filter[1]}}){% endcapture %}
+        {% endfor %}
+      {% endif %}
+
       <!-- Card Image Grid -->
       <div id="{{grid.id}}" class="row {{grid.id | replace: '_','-' }} g-0">
         {% for image in grid.images %}
@@ -306,7 +346,7 @@ exclude_from_search:                    true
                  data-lightbox="{{grid.id}}-image-group"
                  data-caption="{{image.caption}}"
                  data-title="{{image.caption}}">
-                <img id="{{forloop.index}}" class="{{grid.image_styles}}" src="{{grid.image_base_path}}/{{image.file}}" alt="{{image.caption}}" style="height: {{grid.image_height}}">
+                <img id="{{forloop.index}}" class="{{grid.image_styles}}" src="{{grid.image_base_path}}/{{image.file}}" alt="{{image.caption}}" style="{{image_filters}}; height: {{grid.image_height}}">
               </a>
               {% if grid.caption.enabled %}
               <div class="caption">{{image.caption}}</div>
@@ -337,6 +377,20 @@ exclude_from_search:                    true
         {% assign gutter = 0  %}
       {% endif %}
 
+      {% comment %} Collect CSS image filters
+      ------------------------------------------------------------------------ {% endcomment %}
+      {% assign css_filters   = masonry_options.filters | merge: grid.filters %}
+      {% assign image_filters = 'filter:' %}
+
+      {% if css_filters.enabled %}
+        {% for filter in css_filters %}
+          {% if filter[0] contains 'enabled' %}
+            {% continue %}
+          {% endif %}
+          {% capture image_filters %}{{image_filters}} {{filter[0]}}({{filter[1]}}){% endcapture %}
+        {% endfor %}
+      {% endif %}
+
       <!-- Image Grid -->
       <div id="{{grid.id}}" class="row {{grid.id | replace: '_','-' }} g-0">
         {% for image in grid.images %}
@@ -346,9 +400,9 @@ exclude_from_search:                    true
             <a href="{{grid.image_base_path}}/{{image.file}}"
                data-lightbox="{{grid.id}}-image-group"
                data-caption="{{image.caption}}"
+               data-containerStyle="{{image_filters}}"
                data-title="{{image.caption}}">
-              <img id="{{forloop.index}}" class="{{grid.image_styles}}" src="{{grid.image_base_path}}/{{image.file}}" alt="{{image.caption}}">
-              {% if grid.caption.enabled %}
+              <img id="{{forloop.index}}" class="{{grid.image_styles}}" src="{{grid.image_base_path}}/{{image.file}}" alt="{{image.caption}}" style="{{image_filters}}">              {% if grid.caption.enabled %}
                 {% if grid.gutters and grid.caption.position == 'top' %}
                   <div class="caption" style="top: calc(2px + {{gutter}}*4px - {{gutter}}px); width: calc(100% - {{gutter}}*3%);">{{image.caption}}</div>
                 {% elsif grid.gutters and grid.caption.position == 'center' %}
@@ -363,7 +417,7 @@ exclude_from_search:                    true
           </div>
           {% else %}
             <div class="{{grid.caption.position}}">
-              <img id="{{forloop.index}}" class="{{grid.image_styles}}" src="{{grid.image_base_path}}/{{image.file}}" alt="{{image.caption}}">
+              <img id="{{forloop.index}}" class="{{grid.image_styles}}" src="{{grid.image_base_path}}/{{image.file}}" alt="{{image.caption}}" style="{{image_filters}}">
               {% if grid.caption.enabled %}
                 {% if grid.gutters and grid.caption.position == 'top' %}
                   <div class="caption" style="top: calc(2px + {{gutter}}*4px - {{gutter}}px); width: calc(100% - {{gutter}}*3%);">{{image.caption}}</div>

data/assets/data/slick.html

@@ -80,7 +80,7 @@ exclude_from_search:                    true
 
   {% comment %} Set Carousel defaults
   {% assign carousel.lightbox.enabled  = false %}
-  -------------------------------------------------------------------------- {% endcomment %}
+  ------------------------------------------------------------------------------ {% endcomment %}
 
   {% comment %} Generate HTML portion for all sliders (enabled)
   ------------------------------------------------------------------------------ {% endcomment %}
@@ -120,10 +120,24 @@ exclude_from_search:                    true
             {% assign target = "" %}
           {% endif %}
 
+          {% comment %} Collect CSS image filters
+          ------------------------------------------------------------------------ {% endcomment %}
+          {% assign css_filters   = carousel_defaults.filters | merge: carousel.filters %}
+          {% assign image_filters = 'filter:' %}
+
+          {% if css_filters.enabled %}
+            {% for filter in css_filters %}
+              {% if filter[0] contains 'enabled' %}
+                {% continue %}
+              {% endif %}
+              {% capture image_filters %}{{image_filters}} {{filter[0]}}({{filter[1]}}){% endcapture %}
+            {% endfor %}
+          {% endif %}
+
           <!-- Article slide -->
           <div class="col-lg-3 col-sm-6 mb-2 mb-lg-0 pr-{{carousel.gutters}}">
             <div id="{{article.title | downcase | replace: ' ' ,'_'}}" class="card bottom">
-              <img class="{{carousel.image_styles}}" src="{{article.image.path}}" alt="{{article.title}}" />
+              <img class="{{carousel.image_styles}}" src="{{article.image.path}}" alt="{{article.title}}" style="{{image_filters}}; height: {{carousel.image_height}};">
               <!-- Article link (caption) -->
               <div class="caption">
                 <a class="article-link {{translate}}"
@@ -164,10 +178,25 @@ exclude_from_search:                    true
           {% assign target = "" %}
         {% endif %}
 
+        {% comment %} Collect CSS image filters
+        ------------------------------------------------------------------------ {% endcomment %}
+        {% assign css_filters   = carousel_defaults.filters | merge: carousel.filters %}
+        {% assign image_filters = 'filter:' %}
+
+        {% if css_filters.enabled %}
+          {% for filter in css_filters %}
+            {% if filter[0] contains 'enabled' %}
+              {% continue %}
+            {% endif %}
+            {% capture image_filters %}{{image_filters}} {{filter[0]}}({{filter[1]}}){% endcapture %}
+          {% endfor %}
+        {% endif %}
+
         <!-- Collect data only if group matches -->
         <div class="col-lg-3 col-sm-6 mb-2 mb-lg-0 pr-{{carousel.gutters}}">
           <article class="card bg-dark text-center text-white border-0 rounded-0 bottom">
-            <img class="card-img {{carousel.image_styles}}" src="{{post.image.path | relative_url}}" alt="{{post.title}}" style="filter: contrast(1) brightness(0.5); height: {{carousel.image_height}}">
+            <!--  class="card-img {{carousel.image_styles}}" src="{{post.image.path | relative_url}}" alt="{{post.title}}" style="filter: contrast(1) brightness(0.5); height: {{carousel.image_height}}; witdth: {{carousel.image_witdth}}" -->
+            <img class="card-img {{carousel.image_styles}}" src="{{post.image.path | relative_url}}" alt="{{post.title}}" style="{{image_filters}}; height: {{carousel.image_height}};">
 
             <div class="card-img-overlay">
               <div class="card-content mt-4">
@@ -248,6 +277,20 @@ exclude_from_search:                    true
     ---------------------------------------------------------------------------- {% endcomment %}
     {% if carousel.type == 'image' %}
 
+    {% comment %} Collect CSS image filters
+    ------------------------------------------------------------------------ {% endcomment %}
+    {% assign css_filters   = carousel_defaults.filters | merge: carousel.filters %}
+    {% assign image_filters = 'filter:' %}
+
+    {% if css_filters.enabled %}
+      {% for filter in css_filters %}
+        {% if filter[0] contains 'enabled' %}
+          {% continue %}
+        {% endif %}
+        {% capture image_filters %}{{image_filters}} {{filter[0]}}({{filter[1]}}){% endcapture %}
+      {% endfor %}
+    {% endif %}
+
       <!-- Image slider -->
       <div id="{{carousel.id}}" class="{{carousel.id | replace: '_','-' }}">
         {% for slide in carousel.slides %}
@@ -255,13 +298,13 @@ exclude_from_search:                    true
           <div class="card {{carousel.captions.position}}">
           {% if carousel.lightbox.enabled %}
             <a class="card-link" href="{{carousel.image_base_path}}/{{slide.image}}" data-caption="{{slide.caption}}" target="_blank">
-              <img class="{{carousel.image_styles}}" src="{{carousel.image_base_path}}/{{slide.image}}" alt="{{slide.caption}}" style="height: {{carousel.image_height}}">
+              <img class="{{carousel.image_styles}}" src="{{carousel.image_base_path}}/{{slide.image}}" alt="{{slide.caption}}" style="{{image_filters}}; height: {{carousel.image_height}};">
             </a>
             {% if carousel.captions.enabled %}
               <div id="{{carousel.id}}_caption"class="caption">{{slide.caption}}</div>
             {% endif %}
           {% else %}
-            <img class="{{carousel.image_styles}}" src="{{carousel.image_base_path}}/{{slide.image}}" alt="{{slide.caption}}" style="height: {{carousel.image_height}}">
+            <img class="{{carousel.image_styles}}" src="{{carousel.image_base_path}}/{{slide.image}}" alt="{{slide.caption}}" style="{{image_filters}}; height: {{carousel.image_height}};"">
             {% if carousel.captions.enabled %}
               <div id="{{carousel.id}}_caption"class="caption">{{slide.caption}}</div>
             {% endif %}

data/assets/themes/j1/adapter/js/lightbox.js

@@ -90,7 +90,7 @@ j1.adapter.lightbox = (function (j1, window) {
   var lightboxDefaults;
   var lightboxSettings;
   var lightboxOptions;
-  var frontmatterOptions;  
+  var frontmatterOptions;
   var _this;
   var logger;
   var logText;
@@ -132,7 +132,9 @@ j1.adapter.lightbox = (function (j1, window) {
       lightboxOptions           = $.extend(true, {}, lightboxDefaults, lightboxSettings, frontmatterOptions);
 
       var dependencies_met_j1_finished = setInterval(function() {
-        if (j1.getState() == 'finished') {
+        var pageState   = $('#no_flicker').css("display");
+        var pageVisible = (pageState == 'block') ? true: false;
+        if (j1.getState() == 'finished' && pageVisible) {
 
           _this.setState('started');
           logger.debug('\n' + 'state: ' + _this.getState());
@@ -153,13 +155,31 @@ j1.adapter.lightbox = (function (j1, window) {
             wrapAround:                   lightboxOptions.wrapAround
           });
 
-          _this.setState('finished');
-          logger.debug('\n' + 'state: ' + _this.getState());
-          logger.info('\n' + 'initializing module finished');
+          // _this.setState('finished');
+          // logger.debug('\n' + 'state: ' + _this.getState());
+          // logger.info('\n' + 'initializing module finished');
 
           clearInterval(dependencies_met_j1_finished);
         } // END dependencies_met_j1_finished
       }, 25);
+
+      // jadams, 2023-05-07: place CSS styles in GENERAL on a LIGHTBOX V2 doesn't help.
+      // a lightbox shoud restpect the individual IMAGE styles
+      // FixMe:
+      //
+      var dependencies_met_lb_v2_finished = setInterval(function() {
+        var lb_v2 = $('#lightbox').length;
+        if (lb_v2) {
+          _this.setState('finished');
+          logger.debug('\n' + 'state: ' + _this.getState());
+          logger.info('\n' + 'initializing module finished');
+
+          // $('#lightbox').css("filter: grayscale(0.8) contrast(0.8) brightness(0.7) sepia(1)");
+
+          clearInterval(dependencies_met_lb_v2_finished);
+        }
+      }, 25); // END dependencies_met_lb_v2_finished
+
     }, // END init lightbox
 
     // -------------------------------------------------------------------------

data/lib/j1/version.rb

@@ -1,3 +1,3 @@
 module J1
-  VERSION = '2023.2.0'
+  VERSION = '2023.2.2'
 end

data/lib/starter_web/Gemfile

@@ -79,7 +79,7 @@ gem 'j1-template', '~> 2023.2.0'
 
 # Loaded from gem.fury.io
 #source 'https://gem.fury.io/jekyll-one-org/' do
-#  gem 'j1-template', '~> 2023.1.0'
+#  gem 'j1-template', '~> 2023.2.0'
 #end
 
 # ------------------------------------------------------------------------------

data/lib/starter_web/README.md

@@ -379,7 +379,7 @@ This command creates a **initial** project in folder **my-starter**.
   2023-02-28 18:12:12 - GENERATE: Resolving dependencies...
   2023-02-28 18:12:12 - GENERATE: Using bundler 2.3.7
   ...
-  2023-02-28 18:12:12 - GENERATE: Using j1-template 2023.2.0
+  2023-02-28 18:12:12 - GENERATE: Using j1-template 2023.2.2
   2023-02-28 18:12:12 - GENERATE: Bundle complete! 31 Gemfile dependencies, 78 gems now installed.
   2023-02-28 18:12:12 - GENERATE: Bundled gems are installed into `../../.gem`
   2023-02-28 18:12:12 - GENERATE:  C:/Users/xxx/.gem/ruby/3.1.0;C:/DevTools/Ruby31-x64/lib/ruby/gems/3.1.0;
@@ -415,7 +415,7 @@ commands are available as well.
   2023-02-28 18:17:48 - SETUP: Initialize the project ...
   2023-02-28 18:17:48 - SETUP: Be patient, this will take a while ...
   2023-02-28 18:17:49 - SETUP:
-  2023-02-28 18:17:49 - SETUP: > j1@2023.2.0 setup C:\Users\xxx\j1-projects\my-starter
+  2023-02-28 18:17:49 - SETUP: > j1@2023.2.2 setup C:\Users\xxx\j1-projects\my-starter
   2023-02-28 18:17:49 - SETUP: > npm --silent run setup-start && npm --silent run setup-base && run-s -s setup:*
   2023-02-28 18:17:49 - SETUP:
   2023-02-28 18:17:50 - SETUP: Setup project for first use ..
@@ -460,7 +460,7 @@ browser. Let's start the journey ...
   Check setup state of the J1 project ...
   2023-02-28 18:26:18 - SITE: Starting up your site ...
   2023-02-28 18:26:18 - SITE:
-  2023-02-28 18:26:18 - SITE: > j1@2023.2.0 j1-site C:\Users\jadams\j1-projects\my-starter
+  2023-02-28 18:26:18 - SITE: > j1@2023.2.2 j1-site C:\Users\jadams\j1-projects\my-starter
   2023-02-28 18:26:18 - SITE: > run-p -s j1-site:*
   2023-02-28 18:26:18 - SITE:
   2023-02-28 18:26:20 - SITE: Startup UTILSRV ..
@@ -499,7 +499,7 @@ Check setup state of the J1 project ...
 REBUILD: Rebuild the projects website ...
 REBUILD: Be patient, this will take a while ...
 2023-02-28 18:45:09 - REBUILD:
-2023-02-28 18:45:09 - REBUILD: > j1@2023.2.0 rebuild C:\Users\xxx\j1-projects\my-starter
+2023-02-28 18:45:09 - REBUILD: > j1@2023.2.2 rebuild C:\Users\xxx\j1-projects\my-starter
 2023-02-28 18:45:09 - REBUILD: > run-s -s rebuild:* && run-s -s post-rebuild:*
 2023-02-28 18:45:09 - REBUILD:
 2023-02-28 18:45:10 - REBUILD: Rebuild site incremental ..
@@ -547,7 +547,7 @@ using Lerna for all packages:
   2023-02-28 18:29:07 - RESET: Reset the project to factory state ...
   2023-02-28 18:29:07 - RESET: Be patient, this will take a while ...
   2023-02-28 18:29:08 - RESET:
-  2023-02-28 18:29:08 - RESET: > j1@2023.2.0 reset C:\Users\xxx\j1-projects\my-starter
+  2023-02-28 18:29:08 - RESET: > j1@2023.2.2 reset C:\Users\xxx\j1-projects\my-starter
   2023-02-28 18:29:08 - RESET: > run-s -s reset:*
   2023-02-28 18:29:08 - RESET:
   2023-02-28 18:29:08 - RESET: Reset project to factory state ..

data/lib/starter_web/_config.yml

@@ -53,7 +53,7 @@ environment:                            development
 # ------------------------------------------------------------------------------
 # Sets the build version of the site
 #
-version:                                2023.2.0
+version:                                2023.2.2
 
 # copyright
 # ------------------------------------------------------------------------------

data/lib/starter_web/_data/blocks/defaults/footer.yml

@@ -58,10 +58,10 @@ defaults:
     icons:
       facebook:
         enabled:                        false
-        href:                           "#void"
+        href:                           "#"
       twitter:
         enabled:                        false
-        href:                           "#void"
+        href:                           "#"
 
     # --------------------------------------------------------------------------
     # LEGAL settings

data/lib/starter_web/_data/blocks/footer.yml

@@ -74,19 +74,19 @@ settings:
             href:                       https://github.com/jekyll-one/j1-starter
           facebook:
             enabled:                    true
-            href:                       "#void"
+            href:                       "#"
 #           href:                       https://www.facebook.com/<your_profile>/
           twitter:
             enabled:                    true
-            href:                       "#void"
+            href:                       "#"
 #           href:                       https://twitter.com/<your_profile>/
           xing:
             enabled:                    true
-            href:                       "#void"
+            href:                       "#"
 #           href:                       https://www.xing.com/profile/<your_profile>/
           linkedin:
             enabled:                    true
-            href:                       "#void"
+            href:                       "#"
 #           href:                       https://www.linkedin.com/in/<your_profile>/
 
         # ----------------------------------------------------------------------

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

@@ -237,8 +237,8 @@ settings:
                                           cat-3.jpg, cat-4.jpg
                                         ]
         links:                          [
-                                          "#void", "#void",
-                                          "#void", "#void"
+                                          "#", "#",
+                                          "#", "#"
                                         ]
         lb_caption:                     [
                                           "You see cat #1",
@@ -273,8 +273,8 @@ settings:
                                           thomas-tucker_b.jpg
                                         ]
         links:                          [
-                                          "#void", "#void", "#void", "#void",
-                                          "#void", "#void", "#void", "#void"
+                                          "#", "#", "#", "#",
+                                          "#", "#", "#", "#"
                                         ]
         options:
           autoPlay:                     3000

data/lib/starter_web/_data/modules/defaults/attics.yml

@@ -84,7 +84,7 @@ defaults:
   # currently NOT supported
   #
   action_enabled:                       false
-  action_url:                           "#void"
+  action_url:                           "#"
   action_button:                        btn-default
   action_icon:                          download                                # cloud-action
   action_icon_family:                   MDI                                     # MDI | FontAweSome

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

@@ -60,6 +60,15 @@ defaults:
     lg:                                 4                                       # viewport: ≥  992px, 3 colum|s
     xl:                                 3                                       # viewport: ≥ 1200px, 4 colum|s
 
+  # ----------------------------------------------------------------------------
+  # CSS filter options
+  #
+  filters:
+    enabled:                            false
+    grayscale:                          1
+    contrast:                           1
+    brightness:                         1
+
   # ----------------------------------------------------------------------------
   # AJAX (HTML)
   #

data/lib/starter_web/_data/modules/defaults/slick.yml

@@ -56,7 +56,7 @@ defaults:
   xhr_data_path:                        /assets/data/slick
 
   # ----------------------------------------------------------------------------
-  # Lightbox options
+  # Lightbox options (Slick Ligghtbox)
   # ----------------------------------------------------------------------------
   lightbox:
     enabled:                            false
@@ -71,6 +71,15 @@ defaults:
     imageMaxHeight:                     0.9
     lazy:                               false
 
+  # ----------------------------------------------------------------------------
+  # CSS filter options
+  # ----------------------------------------------------------------------------
+  filters:
+    enabled:                            false
+    grayscale:                          1
+    contrast:                           1
+    brightness:                         1
+
   # ----------------------------------------------------------------------------
   # Slider options
   #

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

@@ -42,7 +42,6 @@ settings:
       gutters:                          true
       image_styles:                     img-fluid img-object--cover
       image_height:                     300px
-      image_width:                      300px
       translate_links:                  false                                   # default: false
       link_new_window:                  true                                    # default: false
 
@@ -65,7 +64,7 @@ settings:
       id:                               collection_portfolio
       type:                             collection
       collection:                       portfolio                               # generate grid elements (articles) for the collection
-      image_styles:                     img-fluid
+      image_styles:                     img-fluid img-object--cover
       image_height:                     300px
       image_width:                      300px
       translate_titles:                 false                                   # default: false
@@ -96,7 +95,7 @@ settings:
       id:                               collection_biography
       type:                             collection
       collection:                       biography                               # generate grid elements (articles) for the collection
-      image_styles:                     img-fluid
+      image_styles:                     img-fluid img-object--cover
       image_height:                     470px
       image_width:                      400px
       translate_titles:                 false                                   # default: false
@@ -121,7 +120,7 @@ settings:
       id:                               collection_fantasy
       type:                             collection
       collection:                       fantasy                                 # generate grid elements (articles) for the collection
-      image_styles:                     img-fluid
+      image_styles:                     img-fluid img-object--cover
       image_height:                     470px
       image_width:                      400px
       translate_titles:                 false                                   # default: false
@@ -147,7 +146,7 @@ settings:
       type:                             collection
       translate_titles:                 true                                    # default: false
       collection:                       romance                                 # generate grid elements (articles) for the collection
-      image_styles:                     img-fluid
+      image_styles:                     img-fluid img-object--cover
       image_height:                     470px
       image_width:                      400px
       preview:                          true
@@ -162,7 +161,6 @@ settings:
         initLayout:                     true
         percentPosition:                true
 
-
     # --------------------------------------------------------------------------
     # Image Cards + Lightbox + Gutters + Captions
     #
@@ -338,5 +336,73 @@ settings:
           file:                         gints-gailis_b.jpg
           caption:                      Shangri-La Hotel Jakarta - Indonesia
 
+    # --------------------------------------------------------------------------
+    # Image Grid + Lightbox + Gutters + Captions + Filters
+    #
+    - 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
+
+      # ------------------------------------------------------------------------
+      # Caption options
+      #
+      caption:
+        enabled:                        true
+        position:                       bottom                                  # top|bottom|center
+
+      # ------------------------------------------------------------------------
+      # CSS filter options (Sepia)
+      #
+      filters:
+        enabled:                        true
+        grayscale:                      0.8
+        contrast:                       0.8
+        brightness:                     0.7
+        sepia:                          1
+
+      # ------------------------------------------------------------------------
+      # Masonry options
+      #
+      options:
+        originTop:                      true
+        originLeft:                     true
+        initLayout:                     true
+        percentPosition:                true
+
+      # ------------------------------------------------------------------------
+      # Images
+      #
+      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
+
+        - 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
+
 # ------------------------------------------------------------------------------
 # END config