j1-template 2021.1.16 → 2021.1.20

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: c12cd88e9e52360d54f5809acfcf85ffc231894d0e428e276e9316a31940bee3
-  data.tar.gz: 29ac27fc75d251318b125332af6cde2a98e0f72251f6b27a3c0fcd5992a46e4d
+  metadata.gz: 51ecc688c61c30398bf7f60daddbfa196364746b46d1acbb70c239ac694053ae
+  data.tar.gz: 502cb2fa06f3d3a36e567136622bc7380b02515686bec6908569a60df3f33d86
 SHA512:
-  metadata.gz: c799b86a10bb4296b5a6a8dc2461de6e7356854cf543ff4c438709c8c34e499dd5084e6b4de53e558fe2f2cdf07c3bb4cc2f58736b418207b8e2eff2deddfc0f
-  data.tar.gz: 6451e86ebc262270516a801f9cf30f60bcd704613497e1d8a7c511d2e29cb180c003e98143ac27243d9021a1c164bfddbf755237655b61d709d246d5044a27e4
+  metadata.gz: 4be3c494e1907ff3768a47ebe10cfce678f6e6a71df2d8c45d41920e17d1b3384bca928b2b221f9ce4ab4672534740e19d9580943a8d8043af231dd27e049350
+  data.tar.gz: 7fb913619b313f5dd8ec15648fce0e9466eb71599d3ac8cdd093ac453be8984216ab8f468f1aca32bf43eb401b747c1a3af1faee80a1834f1651b3ace7a4a34a

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

@@ -162,7 +162,7 @@
         <div class="previewer-headline">
 
           <div class="post-headline">
-            <h2 id="previewer" class="mt-4">{{previewer_headline}}</h2>
+            <h1 id="previewer" class="notoc mt-4">{{previewer_headline}}</h1>
           </div>
 
           {% if paginator.total_pages > 1 %}

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

@@ -77,7 +77,7 @@
         <!-- Include a pager at top position -->
         {% include {{pager}} %}
         <div class="post-headline mt-4">
-          <h2 id="blog_article_navigator" class="notoc">{{ page.title }}</h2>
+          <h1 id="blog_article_navigator" class="notoc">{{ page.title }}</h1>
         </div>
 
         <!-- [INFO   ] [j1.layout.content_generator_coll.html  ] [ start place content ] -->

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

@@ -82,10 +82,10 @@
       {% include {{pager}} %}
       <div class="post-headline mt-4">
         {% if language == "en" %}
-          <h2 class="notoc">{{ page.date | localize: "%Y %B, %e" }}</h2>
+          <h1 class="notoc">{{ page.date | localize: "%Y %B, %e" }}</h1>
         {% endif %}
         {% if language == "de" %}
-          <h2 class="notoc">{{ page.date | localize: "%-d. %B %Y" }}</h2>
+          <h1 class="notoc">{{ page.date | localize: "%-d. %B %Y" }}</h1>
         {% endif %}
       </div>
 
@@ -95,12 +95,14 @@
       <header class="bmd-layout-header">
         <!-- jadams, 2021-02-28 added mb-3 to the navbar -->
         <div class="navbar navbar-dark bg-primary raised-z2 mb-3">
-          <button class="bmd-drawer drawer-toggler animated fadeIn" type="button" data-toggle="drawer" data-target="#post_navigator">
+          <button class="bmd-drawer drawer-toggler animated fadeIn" type="button" data-toggle="drawer" data-target="#post_navigator" aria-label="drawer-toggler-button">
             <span class="mdi mdi-menu mdi-2x"></span>
           </button>
           <ul class="nav navbar-nav">
             <li class="nav-item">
-              <span class="navbar-text">Series: {{page.series}}</span>
+              <!-- jadams, 2021-08-04: modified displaying the series name -->
+              <!-- span class="navbar-text">Series: {{page.series}}</span-->
+              <span class="navbar-text">{{page.series|upcase}}</span>
             </li>
           </ul>
         </div>

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

@@ -55,6 +55,9 @@
 <!-- [INFO   ] [j1.layout.meta_data_generator.html    ] [ initial zoom level when the page is first loaded by the browser ] -->
 <meta name="viewport" content="width=device-width, initial-scale=1.0" />
 
+<!-- [INFO   ] [j1.layout.meta_data_generator.html    ] [ added version info for the templte ] -->
+<meta name="template version" content="{{site.version}}" />
+
 {% if template_config.translation.enabled %}
 <!-- [INFO   ] [j1.layout.meta_data_generator.html    ] [ add google translator meta tag to enable customized translations ] -->
 <meta name="google-translate-customization" />
@@ -79,14 +82,28 @@
   {% endif %}
 {% else %}
   {% if page.description %}
+    <!-- [INFO   ] [j1.layout.meta_data_generator.html    ] [ detected content type: PAGE ] -->
     {% assign size = site.description|size %}
-    <!-- [INFO   ] [j1.layout.meta_data_generator.html    ] [ SIZE of page description: {{size}} ] -->
-    {% if size >= 15 %}
-    <!-- [SEO    ] [j1.layout.meta_data_generator.html    ] [ GRATULATIONS. Your page description has more than 15 word. (Recommended: 70-160 characters  ) ] -->
+    <!-- [INFO   ] [j1.layout.meta_data_generator.html    ] [ SIZE of page description: {{size}} chars ] -->
+    {% if size >= 70 %}
+    <!-- [SEO    ] [j1.layout.meta_data_generator.html    ] [ GRATULATIONS. Your page description has more than 70 characters. (Recommended: 70-160 characters) ] -->
     {% else %}
-    <!-- [SEO    ] [j1.layout.meta_data_generator.html    ] [ Consider!  to IMPROVE|INCREASE your page description ] -->
+    <!-- [SEO    ] [j1.layout.meta_data_generator.html    ] [ Consider to IMPROVE|INCREASE your page description! ] -->
     {% endif %}
     <meta name="description" content="{{page.description}}" />
+  {% elsif page.excerpt %}
+    <!-- [INFO   ] [j1.layout.meta_data_generator.html    ] [ detected content type: POST ] -->
+    {% assign size = page.excerpt|size %}
+    <!-- [INFO   ] [j1.layout.meta_data_generator.html    ] [ SIZE of page exerpt: {{size}} chars ] -->
+    {% if size >= 70 %}
+    <!-- [SEO    ] [j1.layout.meta_data_generator.html    ] [ GRATULATIONS. Your page description (exerpt) has more than 70 characters. (Recommended: 70-160 characters) ] -->
+    {% else %}
+    <!-- [SEO    ] [j1.layout.meta_data_generator.html    ] [ Consider to IMPROVE|INCREASE your post excerpt for a valid page description! ] -->
+    {% endif %}
+    <meta name="description" content="{{page.excerpt|strip_html}}" />
+  {% else %}
+    <!-- [WARNING] [j1.layout.meta_data_generator.html    ] [ NO page description detected ] -->
+    <!-- [SEO    ] [j1.layout.meta_data_generator.html    ] [ Consider to add a page description! ] -->
   {% endif %}
 {% endif %}
 
@@ -173,7 +190,7 @@
 {{robots_follow}}
 
 <!-- [INFO   ] [j1.layout.meta_data_generator.html    ] [ meta tag for provider APIs: analytics ] -->
-{% if page.analytics %}
+{% if page.analytics and site.data.j1_config.analytics.enabled %}
   {% capture analytics %}<meta name="analytics" content="true" />{% endcapture %}
 {% else %}
   {% capture analytics %}<meta name="analytics" content="false" />{% endcapture %}
@@ -182,7 +199,7 @@
 {{analytics}}
 
 <!-- [INFO   ] [j1.layout.meta_data_generator.html    ] [ meta tag for provider APIs: comments ] -->
-{% if page.comments %}
+{% if page.comments and site.data.j1_config.comments.enabled %}
   {% capture comments %}<meta name="comments" content="true" />{% endcapture %}
 {% else %}
   {% capture comments %}<meta name="comments" content="false" />{% endcapture %}
@@ -191,7 +208,7 @@
 {{comments}}
 
 <!-- [INFO   ] [j1.layout.meta_data_generator.html    ] [ meta tag for provider APIs: advertising ] -->
-{% if page.advertising %}
+{% if page.advertising and site.data.j1_config.advertising.enabled %}
   {% capture advertising %}<meta name="advertising" content="true" />{% endcapture %}
 {% else %}
   {% capture advertising %}<meta name="advertising" content="false" />{% endcapture %}
@@ -199,6 +216,15 @@
 
 {{advertising}}
 
+<!-- [INFO   ] [j1.layout.meta_data_generator.html    ] [ meta tag for provider APIs: advertising ] -->
+{% if page.translation and site.data.j1_config.translation.enabled %}
+  {% capture translation %}<meta name="translation" content="true" />{% endcapture %}
+{% else %}
+  {% capture translation %}<meta name="translation" content="false" />{% endcapture %}
+{% endif %}
+
+{{translation}}
+
 <!-- [INFO   ] [j1.layout.meta_data_generator.html    ] [ meta tag for provider APIs: youtube ] -->
 {% if page.youtube %}
   {% capture youtube %}<meta name="youtube" content="true" />{% endcapture %}

data/_includes/themes/j1/modules/navigator/procedures/topsearch.proc

@@ -114,8 +114,8 @@
             </p>
             <p class="result-item-text">{{description}}</p>
             <p class="result-item-text small text-muted mb-3">
-              <i class="mdi mdi-tag mdi-18px mr-1"></i><span class="sr-tags">{{#tags}} {{.}} · {{/tags}}</span>
-              <i class="mdi mdi-tag-text-outline mdi-18px mr-1 ml-2"></i><span class="sr-categories">{{#categories}} {{.}} · {{/categories}}</span>
+              <i class="mdi mdi-tag-text-outline mdi-18px mr-1"></i><span class="sr-categories">{{#categories}} {{.}} · {{/categories}}</span>
+              <i class="mdi mdi-tag mdi-18px mr-1 ml-2"></i><span class="sr-tags">{{#tags}} {{.}} · {{/tags}}</span>
             </p>
           </li>
         {{/docs}}

data/_includes/themes/j1/procedures/posts/collate_timeline.proc

@@ -77,6 +77,8 @@
     <!-- Use custom collator -->
     {% include themes/{{site.template.name}}/procedures/custom/posts_collate %}
   {% else %}
+    {% comment %} NOTE: header_title NOT used
+    ---------------------------------------------------------------------------- {% endcomment %}
     <!-- Use j1 blog timeline collator -->
     {% if header_title %}
     <div class="row timeline-header-box">
@@ -107,14 +109,14 @@
 
       <li class="{{blog_position}}">
         <div class="timeline-badge"><i class="tmicon rounded-x hidden-xs"></i></div>
-
         <div class="card raised-z5 timeline-panel">
 
+          {% comment %} jadams, 2021-08-05:
+          NOTE: Changed headerlevel form h3 -> h2
+          ---------------------------------------------------------------------- {% endcomment %}
           <!-- div class="timeline-title" -->
           <div class="card-header bg-primary pt-4 pb-3">
-            <!-- a href="{{post.url}}" -->
-              <h3 id="{{1000000 | rand}}" class="md-white">{{post.title}}</h3>
-            <!-- /a -->
+            <h2 id="{{1000000 | rand}}" class="md-white">{{post.title}}</h2>
           </div>
 
           <!-- Collect icon data from frontmatter -->

data/_includes/themes/j1/procedures/posts/create_series_header.proc

@@ -59,7 +59,7 @@
      <div class="row">
        <!-- div class="col-xs-12 col-md-12 col-lg-12 mb-4" -->
        <div class="">
-         <h5 id="blog_series_list" class="notoc mt-2 mr-2 mb-4">This article is <strong>part <<idx>> </strong> in a <strong><<count>>-part</strong> series:</h5>
+         <h4 id="blog_series_list" class="notoc mt-2 mr-2 mb-4">This article is <strong>part <<idx>> </strong> in a <strong><<count>>-part</strong> series:</h4>
          <ul class="side-nav">
  {% endcapture %}
          {% for post in site.posts reversed %}

data/_layouts/default.html

@@ -224,127 +224,10 @@ layout:                                 compress
   <div id="{{webhook_options.xhr_container_id}}"></div>
   {% endif %}
 
-  {% comment %} Place container for R-Text resizer modals (deactivated)
-  ------------------------------------------------------------------------------
-  <!-- [INFO   ] [j1.layout.default.html                ] [ place container for R-Text resizer modals ] -->
-  <div id="rtext_resizer">
-    <div class="modal fade right" id="fluidModalRTextResizer" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
-      <div class="modal-dialog modal-side modal-top-right modal-notify modal-success" role="document">
-        <!-- Content -->
-        <div class="modal-content">
-          <!--Header-->
-          <div class="modal-header">
-            <p class="lead">Text Resizer</p>
-            <button type="button" class="close" data-dismiss="modal" aria-label="Close">
-              <i class="mdi mdi-close mdi-dark mdi-48px"></i>
-            </button>
-          </div>
-          <!-- Body -->
-          <div class="modal-body">
-            <div class="text align-left">
-              <p>
-                Change the text size for the main window by the switches from below:
-              </p>
-            </div>
-            <div class="ml-3 mt-5 mb-5">
-              <div class="switch">
-                <label>
-                  <input id="textsize-300" name="textsize-300" type="checkbox" checked>
-                  300 - Default Size
-                </label>
-              </div>
-              <div class="switch">
-                <label>
-                  <input id="textsize-400" name="textsize-400" type="checkbox">
-                  400 - Larger Size
-                </label>
-              </div>
-              <div class="switch">
-                <label>
-                  <input id="textsize-500" name="textsize-500" type="checkbox">
-                  500 - Largest Size
-                </label>
-              </div>
-            </div>
-          </div>
-        <!-- END Content -->
-      </div>
-    </div>
-  </div>
-  <!-- [INFO   ] [j1.layout.default.html                ] [ end modals for r-text resizer ] -->
-  ------------------------------------------------------------------------------ {% endcomment %}
-
-  {% comment %} JS for R-Text (deactivated)
-  ------------------------------------------------------------------------------
-  <!-- [INFO   ] [j1.layout.default.html                ] [ place JS for R-Text resizer modals ] -->
-  <script>
-    // Set global variables
-    var environment     = '{{environment}}';
-    var logger          = log4javascript.getLogger('j1.template.rtext-resizer');
-    var $el             = $("main[class*='r-text']");
-    var base_classes    = $("main[class*='r-text']").attr('class').replace(/r-text-[0-9]*/g, '');
-    var r_text_default  = ' r-text-300';
-    var r_text_larger   = ' r-text-400';
-    var r_text_largest  = ' r-text-500';
-    var cl;
-    var value;
-
-    $('input:checkbox[name="textsize-300"]').on('click', function (e) {
-      value = $(this).is(':checked');
-
-      $('input:checkbox[name="textsize-400"]').prop('checked', false);
-      $('input:checkbox[name="textsize-500"]').prop('checked', false);
-
-      if (value == true) {
-        cl = r_text_default;
-      }
-      $el.attr('class', base_classes + cl);
-
-      if(environment === 'development') {
-        logText = 'Changed textsize to: ' +cl;
-        logger.info(logText);
-      }
-      e.stopPropagation();
-    });
-
-    $('input:checkbox[name="textsize-400"]').on('click', function (e) {
-      value = $(this).is(':checked');
-
-      $('input:checkbox[name="textsize-300"]').prop('checked', false);
-      $('input:checkbox[name="textsize-500"]').prop('checked', false);
-
-      if (value == true) {
-        cl = r_text_larger;
-      }
-      $el.attr('class', base_classes + cl);
-
-      if(environment === 'development') {
-        logText = 'Changed textsize to: ' +cl;
-        logger.info(logText);
-      }
-      e.stopPropagation();
-    });
-
-    $('input:checkbox[name="textsize-500"]').on('click', function (e) {
-      value = $(this).is(':checked');
-
-      $('input:checkbox[name="textsize-300"]').prop('checked', false);
-      $('input:checkbox[name="textsize-400"]').prop('checked', false);
-
-      if (value == true) {
-        cl = r_text_largest;
-      }
-      $el.attr('class', base_classes + cl);
-
-      if(environment === 'development') {
-        logText = 'Changed textsize to: ' +cl;
-        logger.info(logText);
-      }
-      e.stopPropagation();
-    });
-  </script>
-  <!-- [INFO   ] [j1.layout.default.html                ] [ end JS for r-text resizer ] -->
+  {% comment %} Place container for the r-text resizer
   ------------------------------------------------------------------------------ {% endcomment %}
+  <!-- [INFO   ] [j1.layout.default.html                ] [ place container for the r-text resizer modal ] -->
+  <div id="rtext_resizer_container"></div>
 
   {% comment %} Initialize Tooltips|Popovers
   ------------------------------------------------------------------------------ {% endcomment %}

data/assets/data/authclient.html

@@ -1,5 +1,6 @@
 ---
 regenerate:                             true
+exclude_from_search:                    true
 ---
 {% capture cache %}
 

data/assets/data/banner.html

@@ -1,5 +1,6 @@
 ---
 regenerate:                             true
+exclude_from_search:                    true
 ---
 {% capture cache %}
 

data/assets/data/carousel.json

@@ -1,5 +1,6 @@
 ---
 regenerate:                             true
+exclude_from_search:                    true
 ---
 
 {% capture cache %}

data/assets/data/cookieconsent.html

@@ -1,5 +1,6 @@
 ---
 regenerate:                             true
+exclude_from_search:                    true
 ---
 
 {% capture cache %}
@@ -60,6 +61,9 @@ regenerate:                             true
   <meta name="robots" content="noindex, nofollow" />
 </head>
 
+{% comment %} i18n: translations
+-------------------------------------------------------------------------------- {% endcomment %}
+
 {% comment %} Modal cookie consent dialog (default: en-EN)
 -------------------------------------------------------------------------------- {% endcomment %}
 <div id="consent-data-en">
@@ -74,7 +78,7 @@ regenerate:                             true
         </div>
         <p>
           <a href="#bccs-privacy" data-toggle="collapse" class="">Privacy Notice</a>
-          <a href="#bccs-options" data-toggle="collapse" class="float-right">Settings</a>
+          <a href="#bccs-options" data-toggle="collapse" class="float-right">My Settings</a>
         </p>
 
         <div id="bccs-privacy" class="collapse">
@@ -84,7 +88,7 @@ regenerate:                             true
         </div>
 
         <div id="bccs-options" class="collapse">
-          <p class="tagline mt-4 mb-1"><b>Your settings</b></p>
+          <p class="tagline mt-4 mb-1"><b>Settings</b></p>
           <div class="d-inline-block g-width-50 g-height-2 bg-primary mb-3"></div>
 
           <div class="bccs-option" data-name="necessary">
@@ -163,7 +167,7 @@ regenerate:                             true
         </div>
         <p>
           <a href="#bccs-privacy" data-toggle="collapse" class="">Datenschutzerklärung</a>
-          <a href="#bccs-options" data-toggle="collapse" class="float-right">Einstellungen</a>
+          <a href="#bccs-options" data-toggle="collapse" class="float-right">Meine Einstellungen</a>
         </p>
 
         <div id="bccs-privacy" class="collapse">
@@ -173,7 +177,7 @@ regenerate:                             true
         </div>
 
         <div id="bccs-options" class="collapse">
-          <p class="tagline mt-4 mb-1"><b>Ihre Einstellungen</b></p>
+          <p class="tagline mt-4 mb-1"><b>Einstellungen</b></p>
           <div class="d-inline-block g-width-50 g-height-2 bg-primary mb-3"></div>
 
           <div class="bccs-option" data-name="necessary">

data/assets/data/fam.html

@@ -1,5 +1,6 @@
 ---
 regenerate:                             true
+exclude_from_search:                    true
 ---
 
 {% capture cache %}

data/assets/data/footer.html

@@ -1,5 +1,6 @@
 ---
 regenerate:                             true
+exclude_from_search:                    true
 ---
 {% capture cache %}
 

data/assets/data/galleries.json

@@ -1,5 +1,6 @@
 ---
 regenerate:                             true
+exclude_from_search:                    true
 ---
 
 {% capture cache %}

data/assets/data/gallery_customizer.html

@@ -1,5 +1,6 @@
 ---
 regenerate:                             true
+exclude_from_search:                    true
 ---
 {% capture cache %}
 
@@ -26,6 +27,10 @@ regenerate:                             true
 {% comment %} Liquid procedures
 -------------------------------------------------------------------------------- {% endcomment %}
 
+{% comment %} Set global settings
+-------------------------------------------------------------------------------- {% endcomment %}
+{% assign environment         = site.environment %}
+
 {% comment %} Set config files
 -------------------------------------------------------------------------------- {% endcomment %}
 {% assign apps                = site.data.apps %}
@@ -33,8 +38,6 @@ regenerate:                             true
 
 {% comment %} Set config data
 -------------------------------------------------------------------------------- {% endcomment %}
-{% assign environment         = site.environment %}
-
 {% assign customizer_defaults = apps.defaults.justifiedGalleryCustomizer.defaults %}
 {% assign customizer_settings = apps.justifiedGalleryCustomizer.settings %}
 
@@ -47,6 +50,14 @@ regenerate:                             true
   {% assign production = true %}
 {% endif %}
 
+{% comment %} i18n: language selection (supported languages: en|de)
+-------------------------------------------------------------------------------- {% endcomment %}
+{% if site.language == 'en' or site.language == 'de' %}
+  {% assign language = site.language %}
+{% else %}
+  {% assign language = 'en' %}
+{% endif %}
+
 <!-- [INFO   ] [j1.assets.data.banner.html             ] [ set meta data (robots) to exclude HTML datafiles from index ] -->
 <head>
   <meta name="robots" content="noindex, nofollow" />
@@ -56,10 +67,10 @@ regenerate:                             true
 <div id="{{customizer_options.xhr_data_element}}">
 
   {% comment %} Main
-  -------------------------------------------------------------------------------- {% endcomment %}
+  ------------------------------------------------------------------------------ {% endcomment %}
   <!-- [INFO   ] [j1.gallery_customizer              ] [Placement of the Drawer] -->
 
-  <nav class="nav bmd-layout-container bmd-drawer-f-l">
+  <nav class="nav bmd-layout-container custom-size-300 bmd-drawer-f-l">
 
     <header class="bmd-layout-header">
       <div class="navbar navbar-dark bg-primary raised-z2 mb-2">
@@ -68,43 +79,47 @@ regenerate:                             true
         </button>
         <ul class="nav navbar-nav">
           <li class="nav-item">
-            <span class="navbar-text md-grey-900">Gallery: {{customizer_options.title}}</span>
+            <span class="navbar-text md-grey-900" style="font-size: x-large;">{{customizer_options.title}}</span>
           </li>
         </ul>
       </div>
     </header>
 
+    {% comment %} i18n: translations
+    ---------------------------------------------------------------------------- {% endcomment %}
+
+    {% if language == 'en' %}
     <div id="drw_customizer" class="bmd-layout-drawer bg-faded">
-      <span class="navbar-brand ml-2 mb-3">Gallery Settings</span>
+      <span class="navbar-brand ml-2 mb-3">Settings</span>
       <form id="jg-customizer-form" class="form-horizontal">
 
         <div class="mdc-list-group">
-          <div class="col-md-12">
 
+          <div class="col-md-12 mb-4">
             <div class="form-group">
               <label class="bmd-label-floating" for="rowHeight">Row Height [px]</label>
               <input id="rowHeight" name="rowHeight" class="form-control" type="number" value="{{customizer_options.gallery_settings.rowHeight}}">
-              <span class="bmd-help">Preferred row height (min: 40px)</span>
+              <span class="bmd-help">Image line height (min: 100px)</span>
             </div>
           </div>
 
-          <div class="col-md-12">
+          <!-- div class="col-md-12">
             <div class="form-group">
               <label class="bmd-label-floating" for="rowHeightMax">Row Height Max [px]</label>
               <input id="rowHeightMax" name="rowHeightMax" class="form-control" type="number" value="{{customizer_options.gallery_settings.maxRowHeight}}">
               <span class="bmd-help">Maximum row height</span>
             </div>
-          </div>
+          </div-->
 
-          <div class="col-md-12">
+          <div class="col-md-12 mb-4">
             <div class="form-group">
               <label class="bmd-label-floating" for="margins">Thumb Spacing [px]</label>
               <input id="margins" name="margins" class="form-control" type="number" value="{{customizer_options.gallery_settings.margins}}">
-              <span class="bmd-help">Space between the images</span>
+              <span class="bmd-help">Space between the preview images</span>
             </div>
           </div>
 
-          <div class="col-md-12">
+          <div class="col-md-12 mb-4">
             <div class="form-group">
               <label class="bmd-label-floating" for="border">Gallery Padding [px]</label>
               <input id="border" name="border" class="form-control" type="number" value="{{customizer_options.gallery_settings.border}}">
@@ -112,7 +127,7 @@ regenerate:                             true
             </div>
           </div>
 
-          <div class="ml-3 mt-5 mb-5">
+          <div class="ml-1 mt-5 mb-5">
             <div class="switch">
               <label>
                 <input id="captions" name="captions" type="checkbox" checked>
@@ -142,13 +157,13 @@ regenerate:                             true
         </div>
 
         <button type="button" name="reset-defaults"
-                class="btn btn-raised btn-flex btn-primary ml-2"
-                aria-label="Reset Button"
-                style="min-width: 12rem">
-                <i class="mdi mdi-close mdi-24px mdi-md_white mr-1"></i>Reset
+          class="btn btn-raised btn-flex btn-primary ml-2"
+          aria-label="Reset Button"
+          style="min-width: 12rem">
+          <i class="mdi mdi-close mdi-24px mdi-md_white mr-1"></i>
+          Reset
         </button>
 
-
         <!-- div class="mt-1">
           <a  id="reset-defaults" href="#"
               class="btn btn-raised btn-flex btn-md btn-primary mr-2 mb-2" style="min-width: 10rem">
@@ -159,6 +174,79 @@ regenerate:                             true
 
       </form>
     </div>
+    {% endif %}
+
+    {% if language == 'de' %}
+    <div id="drw_customizer" class="bmd-layout-drawer bg-faded">
+      <span class="navbar-brand ml-2 mb-3">Einstellungen</span>
+      <form id="jg-customizer-form" class="form-horizontal">
+
+        <div class="mdc-list-group">
+          <div class="col-md-12 mb-4">
+
+            <div class="form-group">
+              <label class="bmd-label-floating" for="rowHeight">Zeilenhöhe [px]</label>
+              <input id="rowHeight" name="rowHeight" class="form-control" type="number" value="{{customizer_options.gallery_settings.rowHeight}}">
+              <span class="bmd-help">Höhe einer Bildzeile (min: 100px)</span>
+            </div>
+          </div>
+
+          <div class="col-md-12 mb-4">
+            <div class="form-group">
+              <label class="bmd-label-floating" for="margins">Bildabstand [px]</label>
+              <input id="margins" name="margins" class="form-control" type="number" value="{{customizer_options.gallery_settings.margins}}">
+              <span class="bmd-help">Abstände der Vorschaubilder</span>
+            </div>
+          </div>
+
+          <div class="col-md-12 mb-4">
+            <div class="form-group">
+              <label class="bmd-label-floating" for="border">Gallerierahmen [px]</label>
+              <input id="border" name="border" class="form-control" type="number" value="{{customizer_options.gallery_settings.border}}">
+              <span class="bmd-help">Randgröße um die Gallerie</span>
+            </div>
+          </div>
+
+          <div class="ml-1 mt-5 mb-5">
+            <div class="switch">
+              <label>
+                <input id="captions" name="captions" type="checkbox" checked>
+                Untertitel aktivieren
+              </label>
+            </div>
+            <div class="switch">
+              <label>
+                <input id="random" name="random" type="checkbox">
+                Zufällige Bildanzeige
+              </label>
+            </div>
+            <div class="switch">
+              <label>
+                <input id="justify_last_row" name="justify_last_row" type="checkbox">
+                Letzte Reihe ausrichten
+              </label>
+            </div>
+            <div class="switch">
+              <label>
+                <input id="hide_last_row" name="hide_last_row" type="checkbox">
+                Letzte Reihe ausblenden
+              </label>
+            </div>
+          </div>
+
+        </div>
+
+        <button type="button" name="reset-defaults"
+          class="btn btn-raised btn-flex btn-primary ml-2"
+          aria-label="Reset Button"
+          style="min-width: 12rem">
+          <i class="mdi mdi-close mdi-24px mdi-md_white mr-1"></i>
+          Zurücksetzen
+        </button>
+
+      </form>
+    </div>
+    {% endif %}
 
     <!-- main content -->
     <div class="bmd-layout-content">