try some photo gallery stuff

content/gallery/_index.md

@@ -0,0 +1,6 @@
++++
+paginate_by = 4
+sort_by = "date"
+template = "index.html"
+title = "Photo gallery"
++++

content/gallery/test-2/index.md

@@ -0,0 +1,10 @@
++++
+title = "Photo gallery Test photos number two"
+template = "gallery.html"
+date = 2024-06-07
++++
+
+Another few photos for testing my new gallery layout
+
+{{ gallery() }}
+

content/gallery/test/index.md

@@ -0,0 +1,10 @@
++++
+title = "Photo gallery Test photos"
+template = "gallery.html"
+date = 2024-06-06
++++
+
+All photos shot on a phone camera over the last years.
+
+{{ gallery() }}
+

sass/gallery.scss

@@ -0,0 +1,14 @@
+@import "variables";
+
+.gallery {
+  display: grid;
+  grid-auto-flow: row dense; 
+  grid-auto-rows: 1fr; 
+  grid-template-columns: 1fr 1fr 1fr; 
+  grid-template-rows: 1fr 1fr 1fr; 
+  gap: 2em 2em; 
+  grid-template-areas: 
+    ". . ."
+    ". . ."
+    ". . .";
+}

sass/style.scss

@@ -4,5 +4,6 @@
 @import 'logo';
 @import 'main';
 @import 'post';
+@import 'gallery';
 @import 'pagination';
 @import 'footer';

templates/gallery.html

@@ -0,0 +1,13 @@
+{% extends "index.html" %}
+
+{%- block title -%}
+{{ title_macros::title(page_title=page.title, main_title=config.title) }}
+{%- endblock -%}
+
+{% block content %}
+    <div class="post">
+        {{ post_macros::header(page=page) }}
+        {{ post_macros::content(page=page, summary=false) }}
+        {{ post_macros::earlier_later(page=page) }}
+    </div>
+{% endblock content %}

templates/shortcodes/gallery.html

@@ -0,0 +1,10 @@
+<div class="gallery">
+{% for asset in page.assets -%}
+  {%- if asset is matching("[.](jpg|png)$") -%}
+    {% set image = resize_image(path=asset, width=960, height=720, op="fit") %}
+    <a href="{{ get_url(path=asset) }}" target="_blank">
+      <img src="{{ image.url }}" />
+    </a>
+  {%- endif %}
+{%- endfor %}
+</div>