Image Gallery

.gitattributes

@@ -0,0 +1,9 @@
+# Auto detect text files and perform LF normalization
+* text=auto
+
+# Do not count vendored files in GitHub stats
+# Bootstrap
+fantasycourt.nl/themes/fantasy-court/assets/css/_bootstrap_* linguist-vendored
+
+# Rat Lightbox
+fantasycourt.nl/static/js/rat.lightbox.js linguist-vendored

README.md

@@ -1,20 +1,24 @@
 # Fantasy Court
 This repository contains the source code for the website of Fantasy Court.
-For running:
-- `cd fantasycourt.nl`
 
-# Legacy Code
-The old code (pure HTML and CSS) is available under the `legacy/` folder.
 
-# Hugo
-The new site utilises Hugo to make everything more maintainable. It can be found under the `hugo/` folder.
+# GoHugo
+The new site utilises GoHugo to make everything more maintainable. It can be found under the `fantasycourt.nl/` folder.
 
 Documentation: https://gohugo.io/
 
+Before running any of the Hugo-commands, navigate to the correct folder:
+- `cd fantasycourt.nl`
+
 To run:
 - `hugo server -D`
 
 To build:
 - `hugo`
 
 In Windows, the relevant Execution Policy needs to be set to be able to run Hugo. In Powershell, this can be done using `Set-ExecutionPolicy RemoteSigned -scope Process`. The former Execution Policy is restored once this Powershell instance is closed.
+
+# Credits
+Utilises the following components:
+- [Bootstrap5](https://getbootstrap.com/docs/5.2/) for general styling
+- [bs-ligthbox](https://github.com/RatMD/bs-lightbox) for the image gallery (source modified)

fantasycourt.nl/assets/fantasy-court/gallery.yaml

@@ -0,0 +1,30 @@
+gallery_images:
+  my_placeholder_category:
+    # Format (only src is required):
+    # - src: <filename>
+    #   title: <default title>
+    #   title-nl: <translated title: Dutch>
+    #   title-en: <translated title: English>
+    #   title-<foo>: <translated title: <foo> languagecode>
+    #   caption: <default caption>
+    #   caption-nl: ...
+    #   copyright: ...
+    #   copyright-nl: ...
+    #   year: <photo origin year>
+    - src: /images/news/N1A1.png
+      title: Kurtelesacs
+      title-nl: Kurtelesacs
+    - src: /images/news/N1A2.png
+      title: iScoop Ice cream
+      year: 2023
+    - src: /images/news/N2A3.png
+      title: Gnome Volunteer
+      title-nl: Kabouter-vrijwilliger
+      year: 2023
+    - src: /images/news/N2A2.png
+      title: Archery
+      title-nl: Boogschieten
+      caption: Performed by a volunteer
+      caption-nl: Door een vrijwilliger
+      copyright: John Doe
+      year: 2023

fantasycourt.nl/config.toml

@@ -66,6 +66,12 @@ title = "Nieuwsarchief"
 url = "/nieuws/"
 weight = 7
 
+# [[languages.nl.menu.main]]
+# identifier = "galerij"
+# title = "Galerij"
+# url = "/galerij/"
+# weight = 8
+
 [languages.en]
 name = "English"
 title = "Fantasy Court"
@@ -122,6 +128,12 @@ title = "News Archive"
 url = "/news/"
 weight = 7
 
+# [[languages.en.menu.main]]
+# identifier = "gallery"
+# title = "Gallery"
+# url = "/galerij/"
+# weight = 8
+
 # Determine frontmatter order
 [frontmatter]
 # Look for the file's date in the filename first, only then in the frontmatter (date, publishdate, lastmod)

fantasycourt.nl/content/galerij/_index.en.md

@@ -0,0 +1,22 @@
+---
+title: Gallery
+header-image: # disabled
+draft: true # Remove this line if the page should be visible in production
+og:
+  title: "Fantasy Court - Gallery"
+  description: "A collection of photo's throughout the years!"
+---
+
+{{< message >}}
+ _A successful Fantasy Court cannot exist without_\
+_the friends we made along the way_
+{{< /message >}}
+
+# Gallery
+This page contains a collection of photo's through the years. How many times can you spot Sir Bearington or Edward Fiddler?
+
+# Editie 2024
+{{< gallery "my_placeholder_category" "2024" >}}
+
+# Editie 2021
+{{< gallery "my_placeholder_category" "2021" >}}

fantasycourt.nl/content/galerij/_index.nl.md

@@ -0,0 +1,22 @@
+---
+title: Galerij
+header-image: # disabled
+draft: true # Remove this line if the page should be visible in production
+og:
+  title: "Fantasy Court - Galerij"
+  description: "Een verzameling van foto's over de jaren heen!"
+---
+
+{{< message >}}
+ _Een succesvolle Fantasy Court kan niet zonder_\
+_de vrienden die we onderweg maakte_
+{{< /message >}}
+
+# Galerij
+Onderstaande is een verzameling van foto's over de jaren heen. Hoe vaak tel jij Sir Bearington of Edward Fiddler?
+
+# Editie 2024
+{{< gallery "my_placeholder_category" "2024" >}}
+
+# Editie 2021
+{{< gallery "my_placeholder_category" "2021" >}}

fantasycourt.nl/layouts/shortcodes/gallery.html

@@ -0,0 +1,73 @@
+<div class="d-flex flex-wrap align-items-md-end">
+{{ $file := "fantasy-court/gallery.yaml" }}
+{{ $category := .Get 0 }}
+{{ with resources.Get $file }}
+    {{ with . | transform.Unmarshal }}
+        {{ $images := index .gallery_images $category }}
+        {{ if not $images }}
+            {{ errorf "The %q shortcode was unable to find category <%s> in %s. See %s" $.Name $category $file $.Position }}
+        {{ end }}
+        {{ range $i, $img := $images }}
+            {{ if not $img.src }}
+                {{ errorf "src attribute should be defined for element %d in category %s (%s). See %s" $i $category $file $.Position }}
+            {{ end }}
+            {{ $img_title := or (index $img (printf "title-%s" $.Site.Language.Lang) ) $img.title }}
+            {{ $img_title2 := cond (not $img.year) $img_title (printf "%s (%d)" $img_title $img.year) }}
+            {{ $img_caption := or (index $img (printf "caption-%s" $.Site.Language.Lang) ) $img.caption }}
+            {{ $img_copyright := or (index $img (printf "copyright-%s" $.Site.Language.Lang) ) $img.copyright }}
+            <div class="col-sm-12 col-md-4 p-2 mx-auto mx-md-0">
+                <a href="{{ $img.src }}" data-bs-toggle="lightbox" data-bs-gallery="{{ $.Get 1 }}" class="d-block text-center"
+                        data-bs-title='{{ $img_title2 }}' data-bs-caption="{{ $img_caption }}" data-bs-copyright="{{ $img_copyright }}">
+                    <img src="{{ $img.src }}" class="img-fluid object-fit-contain" style="max-height: 200px;" />
+                </a>
+            </div>
+        {{ end }}
+    {{ end }}
+{{ else }}
+    {{ errorf "The %q shortcode was unable to find %s. See %s" $.Name $file $.Position }}
+{{ end }}
+</div>
+
+<!-- <div class="d-flex flex-wrap align-items-center">
+    <div class="col-sm-12 col-md-4 p-2">
+        <a href="/fc-2022-muziek.jpg" data-bs-toggle="lightbox" data-bs-gallery="example" class="d-block"
+                data-bs-title="Title" data-bs-caption="Caption" data-bs-copyright="photographername 2024">
+            <img src="/fc-2022-muziek.jpg" class="img-fluid" />
+        </a>
+    </div>
+
+    <div class="col-sm-12 col-md-4 p-2">
+        <a href="/fc-2018-boogschieten.png" data-bs-toggle="lightbox" data-bs-gallery="example" class="d-block"
+                data-bs-title="Title">
+            <img src="/fc-2018-boogschieten.png" class="img-fluid" />
+        </a>
+    </div>
+
+    <div class="col-sm-12 col-md-4 p-2">
+        <a href="/fc-2022-workshop.jpg" data-bs-toggle="lightbox" data-bs-gallery="example" class="d-block"
+                data-bs-caption="Caption">
+            <img src="/fc-2022-workshop.jpg" class="img-fluid" />
+        </a>
+    </div>
+
+    <div class="col-sm-12 col-md-4 p-2">
+        <a href="/fc-2022-crew.jpg" data-bs-toggle="lightbox" data-bs-gallery="example" class="d-block"
+                data-bs-title="Title" data-bs-caption="Caption" data-bs-copyright="photographername 2024">
+            <img src="/fc-2022-crew.jpg" class="img-fluid" />
+        </a>
+    </div>
+
+    <div class="col-sm-12 col-md-4 p-2">
+        <a href="/fc-2022-kleerhaak-workshop.jpg" data-bs-toggle="lightbox" data-bs-gallery="example" class="d-block"
+                data-bs-title="Title">
+            <img src="/fc-2022-kleerhaak-workshop.jpg" class="img-fluid" />
+        </a>
+    </div>
+
+    <div class="col-sm-12 col-md-4 p-2">
+        <a href="/fc-2022-staal.jpg" data-bs-toggle="lightbox" data-bs-gallery="example" class="d-block"
+                data-bs-caption="Caption">
+            <img src="/fc-2022-staal.jpg" class="img-fluid" />
+        </a>
+    </div>
+</div> -->