add new gallery on page with test images

_data/footer-links.yml

@@ -1,9 +1,12 @@
-contact:
-  title: "Kontakt"
-  href: "/kontakt"
+pictures:
+  title: "Fotos"
+  href: "/fotos"
 colophon:
   title: "Colophon"
   href: "/colophon"
+contact:
+  title: "Kontakt"
+  href: "/kontakt"
 imprint:
   title: "Impressum"
   href: "/impressum"

_data/galleries.yml

@@ -0,0 +1,18 @@
+- id: Test
+  date: 22.06.2022
+  title: Das ist eine Testgallery
+  description: "Diese Gallery ist nur zu Testzwecken da."
+  imagefolder: /test/
+  images:
+    - name: DSC00789.jpg
+      filename: DSC00789.jpg
+      text: Emmy schwarzer Hintergrud
+    - name: DSC00803.jpg
+      filename: DSC00803.jpg
+      text: Emmy schwarzer Hintergrund - Wildes Haar
+    - name: DSC00830.jpg
+      filename: DSC00830.jpg
+      text: Emmy auf der Weide
+    - name: DSC00856.jpg
+      filename: DSC00856.jpg
+      text: Lotte

_layouts/gallery.html

@@ -0,0 +1,30 @@
+---
+layout: default
+---
+<script src="/assets/js/jquery-3.6.0.min.js"></script>
+<script src="/assets/js/lightbox-2.11.3.min.js"></script>
+<link href="/assets/css/lightbox.css" rel="stylesheet" />
+<link href="/assets/css/gallery.css" rel="stylesheet" />
+<main id="post-container" class="single-post">
+    {% for gallery in site.data.galleries %}
+    <article class="post">
+        {% if gallery.id == page.galleryid %}
+        <header class="post-header wrapper">
+            <h2 class="post-title">{{ gallery.title }}</h2>
+            <p>{{ gallery.description }}</p>
+        </header>
+        <div class="post-content wrapper">
+            <ol class="gallery">
+            {% for image in gallery.images %}
+                <li>
+                    <a href="/assets/images/gallery/{{ gallery.imagefolder }}/{{ image.filename }}" data-lightbox="{{ gallery.id }}" title="{{ image.text }}">
+                        <img src="/assets/images/gallery/{{ gallery.imagefolder }}/thumb/thumb-{{ image.filename }}">
+                    </a>
+                </li>
+                {% endfor %}
+            </ol>
+        </div>
+        {% endif %}
+    </article>
+    {% endfor %}
+</main>

assets/css/gallery.css

@@ -0,0 +1,27 @@
+ol.gallery {
+    display: block;
+    margin: 0;
+    max-width: 480px;
+    padding: 0;
+}
+
+ol.gallery li {
+    display: block;
+    padding: 5px;
+    width: 150px;
+    height: 150px;
+    float: left;
+}
+
+ol.gallery li:last-child {
+    float: none;
+    clear: left;
+}
+
+ol.gallery li:hover {
+    background: #f0f0f0;
+}
+
+ol.gallery li a {
+    background: none;
+}

assets/css/lightbox.css

@@ -0,0 +1,204 @@
+body.lb-disable-scrolling {
+  overflow: hidden;
+}
+
+.lightboxOverlay {
+  position: absolute;
+  top: 0;
+  left: 0;
+  z-index: 9999;
+  background-color: black;
+  filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=80);
+  opacity: 0.8;
+  display: none;
+}
+
+.lightbox {
+  position: absolute;
+  left: 0;
+  width: 100%;
+  z-index: 10000;
+  text-align: center;
+  line-height: 0;
+  font-weight: normal;
+  outline: none;
+}
+
+.lightbox .lb-image {
+  display: block;
+  height: auto;
+  max-width: inherit;
+  max-height: none;
+  border-radius: 3px;
+
+  /* Image border */
+  border: 4px solid white;
+}
+
+.lightbox a img {
+  border: none;
+}
+
+.lb-outerContainer {
+  position: relative;
+  *zoom: 1;
+  width: 250px;
+  height: 250px;
+  margin: 0 auto;
+  border-radius: 4px;
+
+  /* Background color behind image.
+     This is visible during transitions. */
+  background-color: white;
+}
+
+.lb-outerContainer:after {
+  content: "";
+  display: table;
+  clear: both;
+}
+
+.lb-loader {
+  position: absolute;
+  top: 43%;
+  left: 0;
+  height: 25%;
+  width: 100%;
+  text-align: center;
+  line-height: 0;
+}
+
+.lb-cancel {
+  display: block;
+  width: 32px;
+  height: 32px;
+  margin: 0 auto;
+  background: url(../images/loading.gif) no-repeat;
+}
+
+.lb-nav {
+  position: absolute;
+  top: 0;
+  left: 0;
+  height: 100%;
+  width: 100%;
+  z-index: 10;
+}
+
+.lb-container > .nav {
+  left: 0;
+}
+
+.lb-nav a {
+  outline: none;
+  background-image: url('data:image/gif;base64,R0lGODlhAQABAPAAAP///wAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw==');
+}
+
+.lb-prev, .lb-next {
+  height: 100%;
+  cursor: pointer;
+  display: block;
+}
+
+.lb-nav a.lb-prev {
+  width: 34%;
+  left: 0;
+  float: left;
+  background: url(../images/prev.png) left 48% no-repeat;
+  filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0);
+  opacity: 0;
+  -webkit-transition: opacity 0.6s;
+  -moz-transition: opacity 0.6s;
+  -o-transition: opacity 0.6s;
+  transition: opacity 0.6s;
+}
+
+.lb-nav a.lb-prev:hover {
+  filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=100);
+  opacity: 1;
+}
+
+.lb-nav a.lb-next {
+  width: 64%;
+  right: 0;
+  float: right;
+  background: url(../images/next.png) right 48% no-repeat;
+  filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0);
+  opacity: 0;
+  -webkit-transition: opacity 0.6s;
+  -moz-transition: opacity 0.6s;
+  -o-transition: opacity 0.6s;
+  transition: opacity 0.6s;
+}
+
+.lb-nav a.lb-next:hover {
+  filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=100);
+  opacity: 1;
+}
+
+.lb-dataContainer {
+  margin: 0 auto;
+  padding-top: 5px;
+  *zoom: 1;
+  width: 100%;
+  border-bottom-left-radius: 4px;
+  border-bottom-right-radius: 4px;
+}
+
+.lb-dataContainer:after {
+  content: "";
+  display: table;
+  clear: both;
+}
+
+.lb-data {
+  padding: 0 4px;
+  color: #ccc;
+}
+
+.lb-data .lb-details {
+  width: 85%;
+  float: left;
+  text-align: left;
+  line-height: 1.1em;
+}
+
+.lb-data .lb-caption {
+  font-size: 13px;
+  font-weight: bold;
+  line-height: 1em;
+}
+
+.lb-data .lb-caption a {
+  color: #4ae;
+}
+
+.lb-data .lb-number {
+  display: block;
+  clear: left;
+  padding-bottom: 1em;
+  font-size: 12px;
+  color: #999999;
+}
+
+.lb-data .lb-close {
+  display: block;
+  float: right;
+  width: 30px;
+  height: 30px;
+  background: url(../images/close.png) top right no-repeat;
+  text-align: right;
+  outline: none;
+  filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=70);
+  opacity: 0.7;
+  -webkit-transition: opacity 0.2s;
+  -moz-transition: opacity 0.2s;
+  -o-transition: opacity 0.2s;
+  transition: opacity 0.2s;
+}
+
+.lb-data .lb-close:hover {
+  cursor: pointer;
+  filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=100);
+  opacity: 1;
+}

fotos.html

@@ -1,14 +1,17 @@
 ---
 layout: default
-title: Fotos
-sitemap: false
+title: Meine Fotos
 ---
+<main id="post-container" class="single-post">
     <article class="post">
         <header class="post-header wrapper">
             <h2 class="post-title">Fotos</h2>
         </header>
         <div class="post-content wrapper">
-        <p>Moin,</p>
-        <p>hier kommt bald Inhalt oder ein verweis auf eine richtige Seite.</p>
+            {% for gallery in site.data.galleries %}
+            <p><a href="/fotos/{{ gallery.id }}">{{ gallery.id }}</a><br>
+            {{ gallery.title }}<small> vom {{ gallery.date }}</small></p>
+            {% endfor %}
         </div>
     </article>
+</main>

fotos/test.html

@@ -0,0 +1,5 @@
+---
+title: the first gallery page
+layout: gallery
+galleryid: Test
+---