From 5df93a11a4447f31f275801c333bb2865a779377 Mon Sep 17 00:00:00 2001
From: pdp8 <pdp8@pdp8.info>
Date: Fri, 2 Feb 2024 21:52:23 +0100
Subject: picture gallery

---
 html.rb        | 19 +++++++++++++++++--
 html/style.css | 10 ++++++++++
 2 files changed, 27 insertions(+), 2 deletions(-)

diff --git a/html.rb b/html.rb
index 1018a31..8ad6c07 100755
--- a/html.rb
+++ b/html.rb
@@ -78,13 +78,27 @@ def music_html
          end
     html += "<p>Bandcamp: <a href='#{bc}'>#{bc}</a>"
     html += '</div>'
-    # html += '<hr>'
   end
   html += '<p>&copy; pdp8 <a rel="license" href="http://creativecommons.org/licenses/by/4.0/">Creative Commons Attribution 4.0 International License</a>'
   html += File.read(File.join(SNIPPETS, 'tail.html'))
   print_html 'music', html
 end
 
+def picture_html
+  html = File.read(File.join(SNIPPETS, 'head.html'))
+  html += nav 'pictures'
+  html += '<div class="gallery">'
+  Dir[File.join(MEDIA_DIR, 'pictures', '*.jpeg')].sort.reverse.each do |img|
+    thumb = File.join(MEDIA_URL, 'pictures', 'thumb', File.basename(img).sub(/jpeg$/, 'webp'))
+    html += "<a href='#{File.join(MEDIA_URL, 'pictures',
+                                  File.basename(img))}'><img class='thumb' loading='lazy' width='150' height='100' src='#{thumb}'></a>"
+  end
+  html += '</div>'
+  html += '<p>&copy; pdp8 <a rel="license" href="http://creativecommons.org/licenses/by/4.0/">Creative Commons Attribution 4.0 International License</a>'
+  html += File.read(File.join(SNIPPETS, 'tail.html'))
+  print_html 'pictures', html
+end
+
 def video_html
   videos = Dir[File.join(MEDIA_DIR, 'videos', '*')].sort.reverse
   html = File.read(File.join(SNIPPETS, 'head.html'))
@@ -146,10 +160,11 @@ def climbing_html
 end
 
 music_html
+picture_html
 video_html
 climbing_html
 
-%w[about code pictures contact].each do |basename|
+%w[about code contact].each do |basename|
   file_html basename
 end
 
diff --git a/html/style.css b/html/style.css
index 05e4964..1d5bfab 100644
--- a/html/style.css
+++ b/html/style.css
@@ -71,6 +71,16 @@ video {
   margin-right: auto;
 }
 
+.gallery {
+  margin: 1em;
+  flex-wrap: wrap;
+  display: flex
+}
+
+.thumb {
+  margin: 2px 3px;
+}
+
 .cover {
   max-height: min(50vh, 90vw);
   max-width: min(50vh, 90vw);
-- 
cgit v1.2.3