Home: photo strip picks up new album photos automatically

Every album photo that is not in the hand-written `ticker:` list of index.html is now
added to the strip (captioned "<album>, <city>"), in front of the curated ones. Image
sizes for width/height are read from the file headers (JPEG/PNG/WebP) in
_plugins/lab_pictures.rb, so the strip does not shift while photos load.

Author: oguzhan-baser

README.md

@@ -306,7 +306,7 @@ Albums are listed at `/lab_pictures/` (linked from the footer and the People pag
    - The front matter is `title`, `name`, `location`, `folder` (the image folder) and `avatar` (the cover, relative to `images/lab_pictures/`).
    - The body lists captioned figures; each shows the `web/...webp` file and links to the original. Give every `<img>` its real `width` and `height` and a short `alt`.
    - Photos in the folder that the body does not list are still shown after them, without captions.
-3. Optional, for the Home photo strip: add a line to the `ticker:` list in the front matter of `index.html` (`src` is relative to `images/lab_pictures/`, e.g. `web/corl2022/DSC03166.webp`, plus `w`, `h`, `alt`, `cap`). Sponsor logos are the `sponsors:` list in the same place (files in `images/logo/`).
+3. **Home photo strip:** every album photo appears there automatically, captioned "<album>, <city>". To give a photo its own caption (or a fixed place in the strip), add a line to the `ticker:` list in the front matter of `index.html` (`src` is relative to `images/lab_pictures/`, e.g. `web/corl2022/DSC03166.webp`, plus `w`, `h`, `alt`, `cap`). Sponsor logos are the `sponsors:` list in the same place (files in `images/logo/`).
 
 ## Design system
 

_plugins/lab_pictures.rb

@@ -17,6 +17,10 @@
 # A folder without a _lab_pictures/*.md album gets a generated page at /lab_pictures/<folder>/
 # (layout "albums", title = the folder name in words, data 'auto_album' = true). _layouts/albums.html lists, after an
 # album's hand-written content, every photo of its folder that the content does not mention yet.
+#
+# Home photo strip: site.data['lab_ticker'] = every album photo that is not in the hand-written `ticker:`
+# list of index.html (new uploads first, captioned "<album>, <city>"), followed by that list. Each item has
+# 'src' (relative to images/lab_pictures/), 'w', 'h', 'alt', 'cap'. Image sizes are read from the files.
 
 require 'jekyll'
 
@@ -43,20 +47,23 @@ def generate(site)
 
           src = "#{ROOT}/#{folder}/#{file}"
           webp = "#{ROOT}/web/#{folder}/#{stem}.webp"
-          { 'file' => file, 'stem' => stem, 'src' => src,
-            'web' => File.exist?(File.join(site.source, webp)) ? webp : src }
+          web = File.exist?(File.join(site.source, webp)) ? webp : src
+          w, h = image_size(File.join(site.source, web))
+          { 'file' => file, 'stem' => stem, 'src' => src, 'web' => web, 'w' => w, 'h' => h }
         end
         photos[folder] = list unless list.empty?
       end
       site.data['lab_photos'] = photos
 
       albums = site.collections['lab_pictures']&.docs || []
       covered = []
+      names = {}
       albums.each do |doc|
         folder = doc.data['folder'] || doc.data['avatar'].to_s.split('/').first
         doc.data['folder'] = folder
         covered << folder
         doc.data['avatar_src'] = cover(site, folder, doc.data['avatar'], photos)
+        names[folder] = [doc.data['title'] || doc.data['name'], doc.data['location']]
       end
 
       (photos.keys - covered).each do |folder|
@@ -65,11 +72,75 @@ def generate(site)
         page.data.merge!('layout' => 'albums', 'title' => folder.tr('_-', '  ').split.map(&:capitalize).join(' '), 'folder' => folder,
                          'auto_album' => true, 'avatar_src' => cover(site, folder, nil, photos))
         site.pages << page
+        names[folder] = [page.data['title'], nil]
       end
+
+      site.data['lab_ticker'] = ticker(site, photos, names)
     end
 
     private
 
+    # The hand-written strip from index.html's front matter, preceded by every other album photo.
+    def ticker(site, photos, names)
+      home = site.pages.find { |pg| pg.url == '/' }
+      curated = (home&.data&.fetch('ticker', nil) || []).map { |t| t.transform_keys(&:to_s) }
+      listed = curated.map { |t| t['src'] }
+      extra = photos.flat_map do |folder, list|
+        album, location = names[folder]
+        cap = [album, location.to_s.split(',').first].compact.reject(&:empty?).join(', ')
+        list.filter_map do |ph|
+          rel = ph['web'].delete_prefix("#{ROOT}/")
+          next if listed.include?(rel) || ph['w'].nil?
+
+          { 'src' => rel, 'w' => ph['w'], 'h' => ph['h'], 'alt' => "Photo from #{album}", 'cap' => cap }
+        end
+      end
+      extra + curated
+    end
+
+    # [width, height] from a JPEG, PNG or WebP header, or nil.
+    def image_size(path)
+      File.open(path, 'rb') do |f|
+        head = f.read(30).to_s
+        if head.start_with?("\x89PNG".b)
+          head[16, 8].unpack('NN')
+        elsif head[0, 4] == 'RIFF' && head[8, 4] == 'WEBP'
+          case head[12, 4]
+          when 'VP8 ' then head[26, 4].unpack('vv').map { |v| v & 0x3fff }
+          when 'VP8L'
+            b = head[21, 4].unpack1('V')
+            [(b & 0x3fff) + 1, ((b >> 14) & 0x3fff) + 1]
+          when 'VP8X' then [head[24, 3], head[27, 3]].map { |v| "#{v}\0".unpack1('V') + 1 }
+          end
+        elsif head.start_with?("\xFF\xD8".b)
+          jpeg_size(f)
+        end
+      end
+    rescue StandardError
+      nil
+    end
+
+    def jpeg_size(f)
+      f.seek(2)
+      while (b = f.read(1))
+        next unless b.ord == 0xFF
+
+        m = f.read(1)&.ord
+        m = f.read(1)&.ord while m == 0xFF
+        return nil unless m
+        next if m == 0x01 || (0xD0..0xD8).cover?(m)
+
+        len = f.read(2)&.unpack1('n') or return nil
+        if (0xC0..0xCF).cover?(m) && ![0xC4, 0xC8, 0xCC].include?(m)
+          f.read(1)
+          h, w = f.read(4).unpack('nn')
+          return [w, h]
+        end
+        f.seek(len - 2, IO::SEEK_CUR)
+      end
+      nil
+    end
+
     # Web path of an album cover: the avatar's WebP copy if it exists, else the avatar, else the first photo.
     def cover(site, folder, avatar, photos)
       if avatar && !avatar.to_s.empty?

index.html

@@ -1,7 +1,8 @@
 ---
 layout: default
 body_class: home
-# Lab-life ticker. src is under images/lab_pictures/ (WebP copies from scripts/optimize_images.py); w/h = pixel size (prevents layout shift).
+# Lab-life ticker: hand-picked photos with captions. Album photos not listed here are added automatically in front of them
+# (_plugins/lab_pictures.rb). src is under images/lab_pictures/ (WebP copies from scripts/optimize_images.py); w/h = pixel size.
 ticker:
   - { src: web/corl2022/DSC03166.webp, w: 1600, h: 1067, alt: "Sandeep, Shubhankar and Po-han in Devonport, Auckland", cap: "CoRL 2022, Auckland" }
   - { src: web/rss2022/IMG_0909.webp, w: 1600, h: 1200, alt: "Sai, Oguzhan and Philip attending RSS", cap: "RSS 2022, New York" }
@@ -140,7 +141,7 @@ <h2 id="life-title">Out in the field</h2>
   <div class="ticker" id="ticker" role="group" aria-label="Photos from conferences and field trips">
     <ul class="ticker__track">
       {%- for round in (1..2) %}
-      {%- for p in page.ticker %}
+      {%- for p in site.data.lab_ticker %}{% comment %} = new album photos, then the ticker: list above (_plugins/lab_pictures.rb) {% endcomment %}
       <li class="ticker__item"{% if round == 2 %} aria-hidden="true"{% endif %}>
         <figure>
           <img src="/images/lab_pictures/{{ p.src }}" alt="{% if round == 2 %}{% else %}{{ p.alt }}{% endif %}" width="{{ p.w }}" height="{{ p.h }}" loading="lazy" decoding="async">