image albums, flex layout

13 files changed, 193 insertions, 287 deletions

diff --git a/Makefile b/Makefile
index eec9eef..c8db1a6 100644
--- a/Makefile
+++ b/Makefile
@@ -6,43 +6,45 @@ PUB_DIR := /srv/www/pdp8
 
 MUSIC_DIR := $(MEDIA_DIR)/music
 FLAC := $(wildcard $(MUSIC_DIR)/*/*.flac)
-MP3 := $(subst flac, mp3, $(FLAC))
+MP3 := $(subst flac,mp3, $(FLAC))
 
 IMG_DIR := $(MEDIA_DIR)/pictures
 WEBP_DIR := $(IMG_DIR)/webp
 JPEG_DIR := $(IMG_DIR)/jpeg
+THUMB_DIR := $(IMG_DIR)/thumb
 TXT_DIR := $(IMG_DIR)/txt
 
 JPEG_IMG := $(wildcard $(JPEG_DIR)/*.jpeg)
-WEBP_IMG := $(subst jpeg, webp, $(JPEG_IMG))
-TXT_IMG := $(subst jpeg, txt, $(JPEG_IMG))
+WEBP_IMG := $(subst jpeg,webp, $(JPEG_IMG))
+THUMB_IMG := $(addprefix $(THUMB_DIR)/, $(notdir $(WEBP_IMG)))
+TXT_IMG := $(subst jpeg,txt, $(JPEG_IMG))
 
-IMG_COLLECTIONS := $(wildcard $(IMG_DIR)/collections/*)
+IMG_ALBUMS := $(wildcard $(IMG_DIR)/albums/*)
 
 VIDEO_DIR := /srv/media/videos
 VIDEO_WEBM := $(wildcard $(VIDEO_DIR)/*/*.webm)
-VIDEO_MP4 := $(subst webm, mp4, $(VIDEO_WEBM))
-VIDEO_WEBP := $(subst webm, webp, $(VIDEO_WEBM))
-VIDEO_PNG := $(subst webm, png, $(VIDEO_WEBM))
+VIDEO_MP4 := $(subst webm,mp4, $(VIDEO_WEBM))
+VIDEO_WEBP := $(subst webm,webp, $(VIDEO_WEBM))
+VIDEO_PNG := $(subst webm,png, $(VIDEO_WEBM))
 
 CLIMBING_DIR := /srv/media/climbing
 CLIMBING_WEBM := $(wildcard $(CLIMBING_DIR)/*.webm)
 CLIMBING_MP4 := $(subst webm,mp4, $(CLIMBING_WEBM))
 CLIMBING_WEBP := $(subst webm,webp, $(CLIMBING_WEBM))
 
-HTML := index.html music.html pictures.html videos.html climbing.html about.html code.html contact.html social/create.html social/announce.html 
-OTHER := pdp8.png 540px-PDP-8_.jpg style.css robots.txt sitemap.txt rss.xml
+HTML := index.html music.html pictures.html videos.html climbing.html about.html code.html contact.html #social/create.html social/announce.html 
+OTHER := pdp8.png 540px-PDP-8_.jpg style.css sitemap.txt rss.xml
 
 TEST_HTML := $(addprefix $(TEST_DIR)/, $(HTML))
 TEST_OTHER := $(addprefix $(TEST_DIR)/, $(OTHER))
 PUB_HTML := $(addprefix $(PUB_DIR)/, $(HTML))
 
 all: test
-	cd $(TEST_DIR); git commit -am "$$(date)"; git push; cd $(PUB_DIR); git pull
+	cd $(TEST_DIR)/; git commit -am "$$(date)"; git push; cd $(PUB_DIR)/; git pull
 
 test: $(TEST_HTML) $(TEST_OTHER)
 
-pictures: $(WEBP_IMG) $(TXT_IMG) 
+pictures: $(WEBP_IMG) $(THUMB_IMG)
 
 $(TEST_DIR)/rss.xml: $(TEST_HTML)
 	./rss.rb 
@@ -53,11 +55,17 @@ $(TEST_DIR)/index.html: $(TEST_DIR)/music.html
 $(TEST_DIR)/music.html: $(MP3)
 	./music.rb
 
-$(TEST_DIR)/pictures.html: $(IMG_COLLECTIONS)
+$(TEST_DIR)/pictures.html: $(IMG_ALBUMS) $(WEBP_IMG) $(THUMB_IMG)
 	./pictures.rb
 	
 $(TEST_DIR)/videos.html: $(VIDEO_MP4) $(VIDEO_WEBP)
 	./videos.rb
+
+# $(TEST_DIR)/social/create.html: 
+# 	./social.rb create
+	
+# $(TEST_DIR)/social/announce.html: 
+# 	./social.rb announce
 	
 $(TEST_DIR)/climbing.html: $(CLIMBING_MP4) $(CLIMBING_WEBP)
 	./climbing.rb
@@ -86,5 +94,8 @@ $(TEST_DIR)/%.txt: ./html/%.txt
 $(WEBP_DIR)/%.webp: $(JPEG_DIR)/%.jpeg
 	magick $< -resize 1536x1024 -quality 85 $@
 
+$(THUMB_DIR)/%.webp: $(JPEG_DIR)/%.jpeg
+	magick $< -resize 150x100 -quality 85 $@
+
 %.mp4: %.webm
 	ffmpeg -i $< -vf scale=1280:-2 -c:v h264 -c:a aac -b:a 128k -strict -2 -movflags faststart $@ 
diff --git a/climbing.rb b/climbing.rb
index 6705aba..139925d 100755
--- a/climbing.rb
+++ b/climbing.rb
@@ -11,10 +11,9 @@ Dir[File.join(MEDIA_DIR, 'climbing', '*.txt')].collect do |txt|
     webm: txt.sub(MEDIA_DIR, MEDIA_URL).sub('.txt', '.webm'),
     webp: txt.sub(MEDIA_DIR, MEDIA_URL).sub('.txt', '.webp') }
 end.sort_by { |m| m[:date] }.reverse.each do |post|
-  w, h = `ffprobe -v error -select_streams v:0 -show_entries stream=width,height -of csv=p=0 #{post[:webm]}`.chomp.split(',')
   html += '<div class="post">'
   html += "<h1>#{post[:date]}</h1>"
-  html += "<video controls preload='none' width='#{w}' height='#{h}' poster=#{post[:webp]}>
+  html += "<video controls preload='none' poster=#{post[:webp]}>
           <source src='#{post[:webm]}' type='video/webm'>
           <source src='#{post[:mp4]}' type='video/mp4'>
           <a href=#{post[:mp4]}>#{post[:mp4]}</a>
@@ -23,6 +22,5 @@ end.sort_by { |m| m[:date] }.reverse.each do |post|
   html += post[:text]
   html += '</div>'
 end
-html += '<p>&nbsp;&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 'climbing', html
diff --git a/html.rb b/html.rb
index 5f45ddc..d3def36 100755
--- a/html.rb
+++ b/html.rb
@@ -161,7 +161,6 @@ def climbing_html
     html += post[:text]
     html += '</div>'
   end
-  html += '<p>&nbsp;&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 'climbing', html
 end
diff --git a/html/about.html b/html/about.html
index 55f6131..9e2797c 100644
--- a/html/about.html
+++ b/html/about.html
@@ -1,7 +1,14 @@
-<img src="540px-PDP-8_.jpg" alt="pdp-8" title="By Kris Arnold - https://www.flickr.com/photos/wka/3735964493/, CC BY-SA 2.0, https://commons.wikimedia.org/w/index.php?curid=110392229">
-<br>
-The PDP-8 is a 12-bit minicomputer that was produced by Digital Equipment Corporation (DEC). It was the first commercially successful minicomputer, with over 50,000 units being sold over the model's lifetime. Its basic design follows the pioneering LINC but has a smaller instruction set, which is an expanded version of the PDP-5 instruction set.
 <p>
-The PDP-8 combines low cost, simplicity, expandability, and careful engineering for value. The greatest historical significance was that the PDP-8's low cost and high volume made a computer available to many new customers for many new uses. Its continuing significance is as a historical example of value-engineered computer design.
+  <img src="540px-PDP-8_.jpg" alt="pdp-8"
+    title="By Kris Arnold - https://www.flickr.com/photos/wka/3735964493/, CC BY-SA 2.0, https://commons.wikimedia.org/w/index.php?curid=110392229">
+  <br>
+  The PDP-8 is a 12-bit minicomputer that was produced by Digital Equipment Corporation (DEC). It was the first
+  commercially successful minicomputer, with over 50,000 units being sold over the model's lifetime. Its basic design
+  follows the pioneering LINC but has a smaller instruction set, which is an expanded version of the PDP-5 instruction
+  set.
 <p>
-<a href="https://en.wikipedia.org/wiki/PDP-8">https://en.wikipedia.org/wiki/PDP-8</a>
+  The PDP-8 combines low cost, simplicity, expandability, and careful engineering for value. The greatest historical
+  significance was that the PDP-8's low cost and high volume made a computer available to many new customers for many
+  new uses. Its continuing significance is as a historical example of value-engineered computer design.
+<p>
+  <a href="https://en.wikipedia.org/wiki/PDP-8">https://en.wikipedia.org/wiki/PDP-8</a>
\ No newline at end of file
diff --git a/html/contact.html b/html/contact.html
index 4582664..cac00d8 100644
--- a/html/contact.html
+++ b/html/contact.html
@@ -2,14 +2,13 @@
 <a href='mailto:info@pdp8.info'>info@pdp8.info</a>
 <h1>fediverse</h1>
 <a href='https://social.pdp8.info/pdp8'>@pdp8@social.pdp8.info</a>
-<!--
-<h1>matrix</h1>
-<a href='https://matrix.to/#/@pdp8:matrix.pdp8.info'>@pdp8:matrix.pdp8.info</a>
--->
 <h1>newsletter</h1>
+<p>
+  <em>your email will be used only for the newsletter and won't be shared with anyone</em>
+</p>
 <h2>subscribe</h2>
 send a mail to <a href='mailto:info@pdp8.info?subject=Subscribe'>info@pdp8.info</a> with <b>subscribe</b> in the subject
-(your address will be used only for the newsletter and won't be shared with anyone)
+line
 <h2>unsubscribe</h2>
 send a mail to <a href='mailto:info@pdp8.info?subject=Subscribe'>info@pdp8.info</a> with <b>unsubscribe</b> in the
-subject
\ No newline at end of file
+subject line
\ No newline at end of file
diff --git a/html/robots.txt b/html/robots.txt
deleted file mode 100644
index 1bd8b9e..0000000
--- a/html/robots.txt
+++ /dev/null
@@ -1,31 +0,0 @@
-User-agent: Amazonbot
-Disallow: /
-
-User-agent: ChatGPT-User
-Disallow: /
-
-User-agent: GPTBot
-Disallow: /
-
-User-agent: Google-Extended
-Disallow: /
-
-User-agent: anthropic-ai
-Disallow: /
-
-User-agent: Omgilibot
-Disallow: /
-
-User-agent: Omgili
-Disallow: /
-
-User-agent: FacebookBot
-Disallow: /
-
-User-agent: Bytespider
-Disallow: /
-
-User-agent: ImagesiftBot 
-Disallow: /
-
-SITEMAP: https://pdp8.info/sitemap.txt
diff --git a/html/slideshow.js b/html/slideshow.js
deleted file mode 100644
index 48a5395..0000000
--- a/html/slideshow.js
+++ /dev/null
@@ -1,80 +0,0 @@
-selection = []
-visited = []
-current = 0
-playing = 1
-
-document.addEventListener('keyup', function(event) {
-  if(event.keyCode == 37) { prev() } // left
-  else if(event.keyCode == 39) { next() } // right
-  else if(event.keyCode == 32) {
-    toggle_play()
-  } // space
-  else if(event.keyCode == 13) { new_selection() } // enter
-});
-
-function new_selection() {
-  images = Object.keys(distances)
-  start = images[Math.floor(Math.random()*images.length)]
-  sortable = []
-  for (file in distances[start]) {
-    if (visited.indexOf(file) == -1) { // not in visited
-      sortable.push([file,distances[start][file]]) // objects cannot be sorted in js, use array instead
-    }
-  }
-  n = 6
-  selection = []
-  sorted = sortable.sort(function(a, b) { return a[1] - b[1]; }).slice(0,n); // sort by distance, get first n elements
-  sorted.forEach(function(img,index) { 
-    selection.push(img[0])
-    visited.push(img[0])
-  }) 
-  selection = selection.sort(() => Math.random() - 0.5); // shuffle
-  current = 0
-  update()
-}
-
-function src(id,path) { document.getElementById(id).src = path }
-function onclick(id,fun) { document.getElementById(id).onclick = fun }
-
-function hide_controls() {
-  document.getElementById("prev").style.display = "none"
-  document.getElementById("next").style.display = "none"
-}
-
-function show_controls() {
-  document.getElementById("prev").style.display = "block"
-  document.getElementById("next").style.display = "block"
-}
-
-function toggle_play() { playing == 1 ? stop() : play() }
-
-function play() {
-  playing = 1
-  interval = setInterval(function () { next() }, 3000);
-  document.getElementById("play-indicator").title = "Pause slideshow"
-  document.getElementById("play-indicator").className = "fa fa-inverse fa-pause"
-  hide_controls()
-}
-
-function stop() {
-  playing = 0
-  clearInterval(interval)
-  document.getElementById("play-indicator").title = "Play slideshow"
-  document.getElementById("play-indicator").className = "fa fa-inverse fa-play"
-  show_controls()
-}
-
-function prev() {
-  current = (current-1+selection.length) % selection.length // js % cannot handle negative values
-  update()
-}
-
-function next() {
-  current = (current+1) % selection.length
-  update()
-}
-
-function update() {
-  src('image',"https://media.pdp8.info/pictures/"+selection[current])
-}
-
diff --git a/html/style.css b/html/style.css
index 8478ca3..ddaf027 100644
--- a/html/style.css
+++ b/html/style.css
@@ -1,91 +1,67 @@
 body {
+  display: flex;
+  flex-direction: column;
   background-color: black;
   color: #eee;
-  width: 100vw;
-  margin: 0;
+  margin: 1em;
   font-family: sans-serif;
 }
 
 nav {
-  padding: 0.75em 0 1em 0;
-}
-
-nav a {
-  padding: 0 1em;
-  text-decoration: none;
+  display: flex;
+  align-items: center;
 }
 
 nav img {
   height: 2em;
-  display: inline;
-  vertical-align: bottom;
 }
 
-nav #logo img {
-  height: 2em;
+nav .menu {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: baseline;
+  font-size: larger
 }
 
-nav .current {
-  color: white;
+nav a {
+  margin: 0 0.5em;
 }
 
-nav #menu {
-  display: none;
+nav .current {
+  color: #eee;
+  font-weight: bold;
 }
 
-nav a:hover {
-  color: white;
+a {
+  color: #888;
+  transition: 0.5s ease;
+  text-decoration: none;
 }
 
-@media screen and (max-width: 600px) {
-  nav .item {
-    display: none;
-    padding-left: 1em;
-    padding-top: 0.5em;
-  }
-
-  nav #menu {
-    float: right;
-    display: inline;
-    font-size: 2em;
-  }
+a:hover {
+  color: white;
 }
 
-.post {
-  margin: 2em 1em;
+td {
+  padding-right: 1em;
+  font-size: larger;
 }
 
 img,
 video {
   max-height: 80vh;
-  max-width: 80vw;
+  max-width: 95vw;
   object-fit: contain;
-  display: block;
-  margin-left: 0;
+  margin: 0 auto
 }
 
-#image {
-  padding-top: 2.5%;
-  padding-bottom: 1%;
-  margin-left: auto;
-  margin-right: auto;
-}
-
-.gallery {
-  margin: 1em;
-  flex-wrap: wrap;
-  display: flex
-}
-
-.thumb {
-  margin: 2px 3px;
+audio {
+  width: 12.5em;
+  height: 2.5em;
 }
 
-.cover {
-  max-height: min(50vh, 90vw);
-  max-width: min(50vh, 90vw);
-  margin-left: 0;
-  padding: 1em 0;
+audio::-webkit-media-controls-panel {
+  background-color: #aaa;
 }
 
 iframe {
@@ -94,67 +70,51 @@ iframe {
   border: none;
 }
 
-a {
-  color: #888;
-}
-
-td {
-  padding-right: 1em;
-  font-size: larger;
-}
-
-audio {
-  width: 12.5em;
-  height: 2.5em;
+.webring {
+  display: flex;
+  flex-wrap: wrap;
+  margin-top: 2em;
+  align-items: baseline;
 }
 
-audio::-webkit-media-controls-panel {
-  background-color: #aaa;
+.post {
+  /* margin: 1em 2em; */
 }
 
-#controller {
-  position: fixed;
-  left: 0;
-  bottom: 2.5%;
-  width: 100%;
-  text-align: center;
-  padding: 0
+.gallery {
+  display: flex;
+  flex-wrap: wrap;
 }
 
-.btn {
-  display: inline-block;
-  cursor: pointer;
-  color: #111;
-  font-size: 2em;
-  font-weight: bold;
-  width: 4em;
+.thumb {
+  margin: 0.25em;
 }
 
-#prev,
-#next {
-  cursor: pointer;
-  position: absolute;
-  color: lightgrey;
-  font-weight: bold;
-  font-size: 8em;
-  transition: 0.5s ease;
-  bottom: 6vh;
+.cover {
+  max-height: min(50vh, 90vw);
+  max-width: min(50vh, 90vw);
+  margin-left: 0;
+  display: block;
+  padding: 1em 0;
 }
 
-#prev {
-  left: 1%;
+.slide {
+  display: flex;
+  flex-direction: column;
+  margin-top: 2em;
 }
 
-#next {
-  right: 1%;
+.slidenav {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
 }
 
-#prev:hover,
-#next:hover {
-  text-decoration: none;
+.navarrow {
+  font-weight: bold;
+  font-size: 3em;
 }
 
-#prev:active,
-#next:active {
-  color: black;
-}
+.license {
+  margin-top: 3em
+}
\ No newline at end of file
diff --git a/html/tail.html b/html/tail.html
index 53ca8ca..3da431f 100644
--- a/html/tail.html
+++ b/html/tail.html
@@ -1,11 +1,12 @@
-    <script>
-      function show_vertical_menu() {
-        document.getElementById("menu").style.display = "none"
-        items = document.getElementsByClassName("item")
-        for (i = 0; i < items.length; i++) {
-          items[i].style.display = "block"
-        }
-      }
-    </script>
-  </body>
-</html>
+<div class='license'>
+  <a href='mailto:info@pdp8.info'>&copy;pdp8</a>
+  <a rel="license" href="http://creativecommons.org/licenses/by/4.0/">Creative Commons Attribution 4.0 International
+    License</a>
+  <p>
+    no tracking, cookies, javascript, or server-side scripting. source code: <a
+      href='https://git.pdp8.info/pdp8.info/tree/'>https://git.pdp8.info/pdp8.info/tree/</a>
+  </p>
+</div>
+</body>
+
+</html>
\ No newline at end of file
diff --git a/lib.rb b/lib.rb
index 3a94d39..b3dbc73 100755
--- a/lib.rb
+++ b/lib.rb
@@ -7,14 +7,16 @@ SNIPPETS = File.join(File.dirname(__FILE__), 'html')
 
 def nav(cat)
   html = '<nav>'
-  html += "<a id='logo' href='/about.html'><img src='/pdp8.png' alt='pdp8'></a>"
+  html += "<a id='logo' href='/about.html'><img src='/pdp8.png' alt='pdp8 logo'></a>"
+  html += "<div class='menu'>"
   %w[music pictures videos climbing code contact].each do |c|
-    cl = c == cat ? 'item current' : 'item'
-    html += "&nbsp;<a class='#{cl}' href='/#{c}.html'>#{c}</a>"
+    html += '<a '
+    html += "class='current' " if c == cat
+    html += "href='/#{c}.html'>#{c}</a>"
   end
-  html += "&nbsp;<a class='item' href='/social/create.html'>social</a>"
-  html += "&nbsp;<a class='item' href='/rss.xml'>rss</a>"
-  html += "&nbsp;<a id='menu' href='#' onclick='show_vertical_menu()'>&equiv;</a>"
+  html += "<a #{cat == 'social' ? 'class="current"' : ''} href='/social/create.html'>social</a>"
+  html += "<a href='/rss.xml'>rss</a>"
+  html += '</div>'
   html += '</nav>'
   html
 end
diff --git a/music.rb b/music.rb
index e86e0c5..c63f17d 100755
--- a/music.rb
+++ b/music.rb
@@ -5,10 +5,9 @@ require_relative 'lib'
 music = Dir[File.join(MEDIA_DIR, 'music', '20*')].sort.reverse
 html = File.read(File.join(SNIPPETS, 'head.html'))
 html += nav 'music'
-html += '<div class="post"><a href="https://faircamp.webr.ing/prev/pdp8.info/music.html">← prev</a> |
-    <a href="https://faircamp.webr.ing/">faircamp webring</a> |
-    <a href="https://faircamp.webr.ing/rand">random</a> |
-    <a href="https://faircamp.webr.ing/next/pdp8.info/music.html">next →</a></div>'
+html += '<div class="webring">
+<b><a href="https://faircamp.webr.ing/">faircamp webring:</a></b>&nbsp;&nbsp;
+<a href="https://faircamp.webr.ing/prev/pdp8.info/music.html">←&nbsp;prev</a>&nbsp;|&nbsp;<a href="https://faircamp.webr.ing/rand">random</a>&nbsp;|&nbsp;<a href="https://faircamp.webr.ing/next/pdp8.info/music.html">next&nbsp;→</a></div>'
 music.each do |dir|
   date = File.basename(dir).split('_')[0]
   html += "<div class='post' id='#{date}'>"
@@ -22,7 +21,7 @@ music.each do |dir|
   html += '<table>'
   copyrights_file = File.join(dir, 'copyrights')
   copyrights = File.readlines(copyrights_file).collect { |l| l.chomp } if File.exist? copyrights_file
-  Dir[File.join(dir, '*mp3')].each_with_index do |mp3, _i|
+  Dir[File.join(dir, '*mp3')].each do |mp3|
     mp3 = File.join(MEDIA_URL, mp3.sub(MEDIA_DIR, ''))
     name = File.basename(mp3, '.mp3')[3..-1].gsub('_', ' ')
     html += '<tr>'
@@ -46,6 +45,5 @@ music.each do |dir|
   html += "<p>Bandcamp: <a href='#{bc}'>#{bc}</a>"
   html += '</div>'
 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
diff --git a/pictures.rb b/pictures.rb
index 33c7ec6..246b0c5 100755
--- a/pictures.rb
+++ b/pictures.rb
@@ -1,37 +1,82 @@
 #!/usr/bin/env ruby
-require 'json'
 require_relative 'lib'
+require 'fileutils'
 
 PICTURE_PATH = '/srv/media/pictures'
 WEBP_PATH = File.join PICTURE_PATH, 'webp'
 TXT_PATH = File.join PICTURE_PATH, 'txt'
 
-COLLECTION_PATH = File.join PICTURE_PATH, 'collections'
+ALBUM_PATH = File.join PICTURE_PATH, 'albums'
 
-PICTURE_URL = 'https://media.pdp8.info/pictures'
+PICTURE_URL = File.join MEDIA_URL, 'pictures'
 WEBP_URL = File.join PICTURE_URL, 'webp'
+THUMB_URL = File.join PICTURE_URL, 'thumb'
 JPEG_URL = File.join PICTURE_URL, 'jpeg'
 
+def meta(img, album)
+  basename = File.basename(img, File.extname(img))
+  path = File.join(WEBP_PATH, basename + '.webp')
+  {
+    basename: basename,
+    webp: File.join(WEBP_URL, basename + '.webp'),
+    txt: File.join(TXT_PATH, basename + '.txt'),
+    src: File.join(JPEG_URL, basename + File.extname(img)),
+    thumb: File.join(THUMB_URL, basename + '.webp'),
+    href: File.join('/pictures', File.basename(album),
+                    File.basename(img, File.extname(img)) + '.html')
+  }
+end
+
+albums = Dir[File.join ALBUM_PATH, '*'].sort_by { |a| File.mtime a }.reverse
+
+albums.each do |album|
+  www_dir = File.join('/srv/www/pdp8-test/pictures', File.basename(album))
+  FileUtils.mkdir_p www_dir
+  images = File.readlines(album, chomp: true)
+  n = images.size
+  images.each_with_index do |img, i|
+    before = meta(images[(i - 1) % n], album)[:href]
+    after = meta(images[(i + 1) % n], album)[:href]
+    meta = meta img, album
+
+    html = File.read(File.join(SNIPPETS, 'head.html'))
+    html += nav 'pictures'
+    html += "<div class='slide'>"
+    html += '<img '
+    html += "alt='#{File.read(meta[:txt])}' " if File.exist?(meta[:txt])
+    html += "src='#{meta[:webp]}'>"
+    html += "<div class='slidenav'>"
+    html += "<a href='#{before}' class='navarrow'>&lt;</a>"
+    html += "<a href='/pictures.html##{File.basename(album)}'>#{File.basename(album).gsub('_', ' ')}</a>"
+    html += "<a href='#{after}' class='navarrow'>&gt;</a>"
+    html += '</div>'
+    html += '</div>'
+    html += File.read(File.join(SNIPPETS, 'tail.html'))
+    html_file = File.join(www_dir, File.basename(img, File.extname(img)) + '.html')
+    File.open(html_file, 'w+') { |f| f.puts html }
+    puts `tidy -iqm -w 0 #{html_file} 2>&1`
+  end
+end
+
 html = File.read(File.join(SNIPPETS, 'head.html'))
 html += nav 'pictures'
-
-Dir[File.join COLLECTION_PATH, '*']
-  .sort_by { |c| File.mtime c }
-  .reverse.each do |collection|
-  html += "<div class='post'>"
-  html += "<h1>#{collection.gsub('_', ' ')}</h1>\n"
-  File.readlines(collection, chomp: true).each do |line|
-    basename = File.basename(line, File.extname(line))
-    path = File.join(WEBP_PATH, basename + '.webp')
-    url = File.join(WEBP_URL, basename + '.webp')
-    alt = File.read(File.join(TXT_PATH, basename, '.txt'))
-    src = File.join(JPEG_URL, basename + File.extname(url))
-    w, h = `/etc/profiles/per-user/ch/bin/identify -format "%w %h" #{path}`.chomp.split(' ')
-    html += "<a href='#{src}'><img loading='lazy' width='#{w}' height='#{h}' "
-    html += "alt='#{alt}' src='#{url}'></a>"
+albums.each do |album|
+  www_dir = File.join('/srv/www/pdp8-test/pictures', File.basename(album))
+  FileUtils.mkdir_p www_dir
+  images = File.readlines(album, chomp: true)
+  n = images.size
+  html += "<div class='post' id='#{File.basename album}'>"
+  html += "<h1><a href='#{meta(images.first,
+                               album)[:href]}'>#{File.basename(album).gsub('_', ' ')}</a></h1>\n"
+  html += "<div class='gallery'>"
+  images.each_with_index do |img, _i|
+    meta = meta img, album
+    html += "<a href='#{meta[:href]}'><img class='thumb' loading='lazy' width='150' height='100' "
+    html += "alt='#{File.read(meta[:txt])}' " if File.exist?(meta[:txt])
+    html += "src='#{meta[:thumb]}'></a>"
   end
   html += '</div>'
+  html += '</div>'
 end
-
 html += File.read(File.join(SNIPPETS, 'tail.html'))
 print_html 'pictures', html
diff --git a/videos.rb b/videos.rb
index d4f68a7..2dd37d7 100755
--- a/videos.rb
+++ b/videos.rb
@@ -18,9 +18,7 @@ videos.each_with_index do |dir, _i|
   mp4 =   File.join(MEDIA_URL, 'videos', File.basename(dir), title.gsub(' ', '_') + '.mp4')
   webm = File.join(MEDIA_URL, 'videos', File.basename(dir), title.gsub(' ', '_') + '.webm')
   poster = File.join(MEDIA_URL, 'videos', File.basename(dir), title.gsub(' ', '_') + '.webp')
-  w, h = `ffprobe -v error -select_streams v:0 -show_entries stream=width,height -of csv=p=0 #{webm}`.chomp.split(',')
-
-  html += "<video controls preload='none'  width='#{w}' height='#{h}' poster='#{poster}'>
+  html += "<video controls preload='none' poster='#{poster}'>
           <source src='#{webm}' type='video/webm'>
           <source src='#{mp4}' type='video/mp4'>
           <a href=#{mp4}>#{mp4}</a>
@@ -29,6 +27,5 @@ videos.each_with_index do |dir, _i|
   html += lines.join('<br>')
   html += '</div>'
 end
-html += '<p>&nbsp;&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 'videos', html