gallery, fixes, etc.

assets/scss/_common.scss

@@ -457,3 +457,100 @@ details[open] summary {
 .fb-tile-icon {
   font-size: 96px;
 }
+
+.img-slider{
+  position: relative;
+  margin: 10px;
+  width: 95%;
+  height: 500px;
+  background: #1D212B;
+}
+
+.img-slider .is-slide{
+  z-index: 1;
+  position: absolute;
+  width: 100%;
+  clip-path: circle(0% at 0 50%);
+}
+
+.img-slider .is-slide.active{
+  clip-path: circle(150% at 0 50%);
+  transition: 2s;
+  transition-property: clip-path;
+}
+
+.img-slider .is-slide img{
+  z-index: 1;
+  width: 100%;
+  border-radius: 5px;
+}
+
+.img-slider .is-navigation{
+  z-index: 2;
+  position: absolute;
+  display: flex;
+  bottom: 20px;
+  left: 50%;
+  border-radius: 10px;
+  transform: translateX(-50%);
+  background-color: #1a1a37;
+}
+
+.img-slider .is-navigation .is-btn{
+  background: rgba(255, 255, 255, 0.5);
+  width: 12px;
+  height: 12px;
+  margin: 10px;
+  border-radius: 50%;
+  cursor: pointer;
+}
+
+.img-slider .is-navigation .is-btn.active{
+  background: #2696E9;
+  box-shadow: 0 0 2px rgba(0, 0, 0, 0.5);
+}
+
+@media (max-width: 820px){
+  .img-slider{
+    width: 600px;
+    height: 375px;
+  }
+
+  .img-slider .is-navigation{
+    bottom: 25px;
+  }
+
+  .img-slider .is-navigation .is-btn{
+    width: 10px;
+    height: 10px;
+    margin: 8px;
+  }
+}
+
+@media (max-width: 620px){
+  .img-slider{
+    width: 400px;
+    height: 250px;
+  }
+
+  .img-slider .is-navigation{
+    bottom: 15px;
+  }
+
+  .img-slider .is-navigation .is-btn{
+    width: 8px;
+    height: 8px;
+    margin: 6px;
+  }
+}
+
+@media (max-width: 420px){
+  .img-slider{
+    width: 320px;
+    height: 200px;
+  }
+
+  .img-slider .is-navigation{
+    bottom: 10px;
+  }
+}

content/german/schulchronik/2018.md

@@ -3,17 +3,10 @@ title: "2018"
 draft: false
 bg_image: media/backgrounds/page-title.webp
 type: schulchronik
-pretext: >+
-  2018 war sowohl für das GCG als auch für Georg Cantor selbst ein ganz
-  besonderes Jahr. Während der 100. Todestag von unserem Namensgeber gefeiert
-  wurde, zelebrierte unsere Gymnasium sein 30 jähriges Bestehen.
-
-
-  Im Rahmen dieser Festlichkeiten wurden vielfältige Aktionen geplant. Unter anderem wurde mit viel Mühe und Arbeit eine Rallye zum Thema Cantor zusammengestellt, ein Flashmob in Form eines Unendlichkeitszeichen organisiert und es fand ein fantastisches Schulfest statt, welches die damalige 10. Klasse zusammengestellt hat.
-
-
-
+pretext: >
+  2018 war sowohl für das GCG als auch für Georg Cantor selbst ein ganz besonderes Jahr. Während der 100. Todestag von unserem Namensgeber gefeiert wurde, zelebrierte unser Gymnasium sein 30-jähriges Bestehen.
 
+  Im Rahmen dieser Festlichkeiten wurden vielfältige Aktionen geplant. Unter anderem wurde mit viel Mühe und Arbeit eine Rallye zum Thema Cantor zusammengestellt, ein Flashmob in Form eines Unendlichkeitszeichens organisiert und es fand ein fantastisches Schulfest statt, welches die damalige 10. Klasse zusammengestellt hat.
 topics:
   - title: 30-jähriges Jubiläum
     content: |
@@ -34,71 +27,33 @@ topics:
       {{< figure src="/media/schulchronik/2018/projektarbeit/CantorBroschuere.webp" >}}
 
 
-
-
       {{< /gallery >}}
 
 
       ## Wie entwickelt man eigentlich eine App?
 
 
-      -Was lange währt wird gut-
+      -Was lange währt, wird gut-
 
 
-      Zeitraum:	Mai 2017 bis April 2018
+      - Zeitraum: Mai 2017 bis April 2018
+
+      - Ziel: Erstellung einer mathematischen Stadtrallye für das Smartphone, die historisches und mathematisches Wissen über das Wirken von Georg Cantor an verschiedenen Standorten in Halle vermitteln soll, Ehrung Georg
+
+      Cantors anlässlich seines 100. Todestages, Beitrag zum 30-jährigen Schuljubiläum
+
+      - Beteiligte: Mitarbeiter und Studenten des Institutes für Didaktik der Mathematik in Leipzig unter Leitung von Fr. Juniorprof. Silvia Schöneburg, Schulchronik AG mit Fr. K. Schmidt, weitere interessierte Schülerinnen und Schüler
 
 
-      Ziel:	Erstellung einer
+      1. Zu Beginn wurden Infos  überbmögliche Stationen gesammelt, photographiert und  Preise für die Schüler ausgewählt. Frau Schmidt beschäftigte sich mit diesem Arbeitsschritt bis Oktober 2017.
 
-      mathematischen Stadtrallye für das Smartphone, die historisches und
+      1. Ab Oktober bildete sich aus Mitarbeitern und Studenten der Uni Leipzig, Schülern und Fr. Schmidt eine Arbeitsgemeinschaft.
 
-      mathematisches Wissen über das Wirken von Georg Cantor an
-
-      verschiedenen Standorten in Halle vermitteln soll, Ehrung Georg
-
-      Cantors anläßlich seines 100. Todestages, Beitrag zum 30 –
-
-      jährigen Schuljubiläum
-
-
-      Beteiligte: Mitarbeiter und
-
-      Studenten des Institutes für Didaktik der Mathematik in Leipzig
-
-      unter Leitung von Fr. Juniorprof. Silvia Schöneburg, Schulchronik Ag
-
-      mit Fr. K. Schmidt, weitere interessierte Schülerinnen und Schüler
-
-
-      1. Zu Beginn wurden Infos  über
-
-      mögliche Stationen gesammelt, photographiert und  Preise für die
-
-      Schüler ausgewählt. Frau Schmidt beschäftigtesich mit diesem
-
-      Arbeitsschritt bis Oktober 2017.
-
-      1. Ab Oktober bildete sich
-
-      aus Mitarbeiternund Studenten der Uni Leipzig, Schülern
-
-      und Fr. Schmidt eineArbeitsgemeinschaft.
-
-      1. Von Oktober
-
-      2017 bisApril 2018 wurden **4
-
-      Apps** für die
-
-      Klassen 5/6, 7/8, 9/10 und11/12 erstellt.
+      1. Von Oktober 2017 bis April 2018 wurden **4 Apps** für die Klassen 5/6, 7/8, 9/10 und11/12 erstellt.
 
       1. Anschließend wurde eine **Broschüre** über das Projekt gestaltet.
 
-      1. Am 28.09.2018 kam es dann
-
-      letztendlich zur Durchführungder Rallyes zum 30-jährigen Schuljubiläum (die Klassen 5-8 werden
-
-      von Schülern der Klassen 11 und 12 unterstützt, die zuvor von den
+      1. Am 28.09.2018 kam es dann letztendlich zur Durchführung der Rallyes zum 30-jährigen Schuljubiläum (die Klassen 5-8 werden von Schülern der Klassen 11 und 12 unterstützt, die zuvor von den
 
       App-Erstellern eingewiesen wurden).
 
@@ -113,7 +68,7 @@ topics:
 
       Neben den klassischen Aktionen bei unseren Schulfesten wie Sportspielen,
 
-      Basteleien, Schach usw. gibt es in diesem Jahr anläßlich unseres 30-jährigen
+      Basteleien, Schach usw. gibt es in diesem Jahr anlässlich unseres 30-jährigen
 
       Schuljubiläums und des 100. Todestages von Georg Cantor auch eine
 
@@ -174,8 +129,7 @@ topics:
     superhaufen:
       enable: false
   - title: Wettbewerbserfolge
-    content: |
-      Inhalt
+    content: "\n\n\n"
     superhaufen:
       enable: false
 cantorpreisträger: Carolina Sirui Cao

content/german/superhaufen/30-jahriges-jubilaum.md

@@ -4,6 +4,10 @@ draft: false
 bg_image: /media/backgrounds/page-title.webp
 type: superhaufen
 gallery: true
+previous:
+  title: 2018
+  link: /schulchronik/2018/
+  enable: true
 tiles:
   - title: Festveranstaltung
     bg_color: "#ffef00"
@@ -146,8 +150,8 @@ tiles:
       Den Freitag, den zweiten Tag der Festtage zum 30. Jubiläum, verbrachten
       Schülerinnen und Schüler mit unterschiedlichen Aktionen, wie zum Beispiel
       einem Kinobesuch, einer Vorlesung in Physik oder einer Rallye durch die
-      Stadt Halle auf den Spuren von Georg Cantor, in Form von 4
-      selbstprogrammierten Cantor-Apps.
+      Stadt Halle auf den Spuren von Georg Cantor, in Form von 4 selbst
+      programmierten Cantor-Apps.
     font_color: "#ffffff"
     unterhaufen:
       - title: Überblick
@@ -309,7 +313,7 @@ tiles:
 
       Nach reichlicher Überlegung kam unserem Schuldirektor Herrn Gorsler
 
-      die Idee einen Flashmob zu veranstalten. Die genaue Form – das mit
+      die Idee, einen Flashmob zu veranstalten. Die genaue Form – das mit
 
       Georg Cantor verbundene Unendlichkeitszeichen – schlug Frau Schmidt
 
@@ -338,7 +342,7 @@ tiles:
       getroffen und der Text entsprechend des Anlasses angepasst.
 
 
-      Nun waren alle Vorbereitungen getroffen. Am Freitag, den 28.09.2018,
+      Nun waren alle Vorbereitungen getroffen. Am Freitag, dem 28.09.2018,
 
       liefen die Schülerinnen und Schüler im Anschluss an die Rallye zum
 
@@ -346,7 +350,7 @@ tiles:
 
       ihren Klassen an ihren mit Kreide gekennzeichneten Platz. Plötzlich
 
-      erfüllte das ausgewählte Lied „[Zusammen](https://www.youtube.com/watch?v=dQw4w9WgXcQ)“ den Platz, sodass alle
+      erfüllte das ausgewählte Lied „Zusammen“ den Platz, sodass alle
 
       Schülerinnen und Schüler enthusiastisch und voller Freude anfingen
 
@@ -355,6 +359,8 @@ tiles:
 
       Der Flashmob bildete einen krönenden Abschluss der Festwoche.
 
+      {{< slider dir="/media/schulchronik/2018/flashmob" >}}
+
 
       {{< gallery dir="/media/schulchronik/2018/liedtext" />}}
     font_color: "#ffffff"

layouts/partials/page-header.html

@@ -3,7 +3,7 @@
     <div class="row">
       <div class="col-md-8">
         <ul class="list-inline">
-          <li class="list-inline-item h2"><a class="text-primary font-secondary" href="{{ if .Parent.Page }}{{ .Parent.Page.Permalink }}{{ else }}{{ .Site.BaseURL | absLangURL }}{{end}}">{{ with .Parent.Params.title }}{{.}}{{ else }}{{ .Site.Params.home }}{{end}}</a></li>
+          <li class="list-inline-item h2"><a class="text-primary font-secondary" href="{{ if .Params.Previous.Enable }}{{ .Params.Previous.Link }}{{ else if .Parent.Page }}{{ .Parent.Page.Permalink }}{{ else }}{{ .Site.BaseURL | absLangURL }}{{end}}">{{ if .Params.Previous.Enable }}{{ .Params.Previous.Title }}{{ else }}{{ with .Parent.Params.title }}{{.}}{{ else }}{{ .Site.Params.home }}{{end}}{{ end }}</a></li>
           <li class="list-inline-item h2"><i class="mdi mdi-chevron-double-right text-white"></i></li>
           <li class="list-inline-item text-white h2 font-secondary">{{ .Title }}</li>
         </ul>

layouts/shortcodes/slider.html

@@ -0,0 +1,75 @@
+<div class="img-slider">
+	{{- with (.Get "dir") -}}
+		{{- $files := readDir (print "/static/" .) }}
+		{{- range $index, $file := $files -}}
+			{{- $isimg := lower $file.Name | findRE "\\.(gif|jpg|jpeg|tiff|png|bmp|webp|avif|jxl)" }}
+			{{- if $isimg }}
+				{{- $linkURL := print $.Site.BaseURL "/" ($.Get "dir") "/" $file.Name | absURL }}
+                <div class="is-slide {{if eq $index 0 }}active{{end}}">
+                    <img src="{{ $linkURL }}" alt="">
+                </div>            
+			{{- end }}
+		{{- end }}
+	{{- end }}
+    <div class="is-navigation">
+        <div class="is-btn active"></div>
+        <div class="is-btn"></div>
+        <div class="is-btn"></div>
+        <div class="is-btn"></div>
+    </div>
+</div>
+<script type="text/javascript">
+    var slides = document.querySelectorAll('.is-slide');
+    var btns = document.querySelectorAll('.is-btn');
+    let currentSlide = 1;
+
+    // Javascript for image slider manual navigation
+    var manualNav = function(manual){
+      slides.forEach((slide) => {
+        slide.classList.remove('active');
+
+        btns.forEach((btn) => {
+          btn.classList.remove('active');
+        });
+      });
+
+      slides[manual].classList.add('active');
+      btns[manual].classList.add('active');
+    }
+
+    btns.forEach((btn, i) => {
+      btn.addEventListener("click", () => {
+        manualNav(i);
+        currentSlide = i;
+      });
+    });
+
+    // Javascript for image slider autoplay navigation
+    var repeat = function(activeClass){
+      let active = document.getElementsByClassName('active');
+      let i = 1;
+
+      var repeater = () => {
+        setTimeout(function(){
+          [...active].forEach((activeSlide) => {
+            activeSlide.classList.remove('active');
+          });
+
+        slides[i].classList.add('active');
+        btns[i].classList.add('active');
+        i++;
+
+        if(slides.length == i){
+          i = 0;
+        }
+        if(i >= slides.length){
+          return;
+        }
+        repeater();
+    /// Time in ms
+      }, 5000);
+      }
+      repeater();
+    }
+    repeat();
+    </script>

layouts/superhaufen/single.html

@@ -21,12 +21,12 @@
               </button>
             </div>
             <div class="modal-body">
-              <div class="content">
+              <div class="content mb-2">
                 {{ .content | markdownify }}
               </div>
               {{ range .unterhaufen }}
                 <div class="container mb-0">
-                  <div class="card border-primary rounded-0 hover-shadow mb-5">
+                  <div class="card border-primary rounded-0 hover-shadow mb-2">
                     <div class="card-body mb-0">
                       <details class="mb-0">
                       <summary class="mb-0">{{ .title }}</summary>

static/schulchronik/admin/config.yml

@@ -184,6 +184,13 @@ collections:
       - {label: "Hintergrundbild", name: "bg_image", widget: "hidden", default: "/media/backgrounds/page-title.webp"}
       - {label: "Type", name: "type", widget: "hidden", default: "superhaufen"}
       - {label: "Gallerie-Komponente", name: "gallery", widget: "boolean", default: true, required: false, hint: "Benötigt für Gallerie bzw. Bildeinbettung"}
+      - label: "Rückverlinkung"
+        name: "previous"
+        widget: "object"
+        fields:
+          - {label: "Aktiviert", name: "enable", widget: "hidden", default: true}
+          - {label: "Titel", name: "title", widget: "string", required: true}
+          - {label: "Link", name: "link", widget: "string", required: true}
       - label: "Kacheln"
         name: "tiles"
         widget: "list"