From b84647c749dabdc011f62d8e8213743fd03f565b Mon Sep 17 00:00:00 2001 From: Paul Buetow Date: Mon, 22 Jun 2026 10:15:42 +0300 Subject: Add large 2x2 feature tiles and a CSS-grid overview Allow a single photo to be blown up into a large "feature" tile that spans a 2x2 block of the album overview, controlled by a new THUMB_FEATURE_PERCENT (0-100, default 10; 0 disables). Each tile rolls for a feature first, then for a subdivision, otherwise stays a normal square. To pack mixed-size tiles (normal 1x1, subdivided 1x1, feature 2x2) without gaps, the overview is now a real CSS grid with grid-auto-flow: dense, so smaller tiles backfill the holes a 2x2 feature would leave. Tile spacing moved from per-image padding to the grid gap. Feature tiles reuse the img.thumb class and its dramatic hover. THUMB_FEATURE_PERCENT is wired through the same layers as THUMB_SUBDIVIDE_PERCENT: config defaults, 0..100 validation, --print-config, the --feature CLI flag, the usage text, and the shuriken.json / --dry-run metadata, with docs and tests updated. Generated HTML and CSS pass the W3C Nu HTML checker and CSS validator. Setting both percentages to 0 reproduces the previous all-1x1 grid. Co-Authored-By: Claude Opus 4.8 --- src/lib/album-render.source.sh | 50 +++++++++++++++++++++++++++++------------- 1 file changed, 35 insertions(+), 15 deletions(-) (limited to 'src/lib/album-render.source.sh') diff --git a/src/lib/album-render.source.sh b/src/lib/album-render.source.sh index 63c0c57..d97d05f 100644 --- a/src/lib/album-render.source.sh +++ b/src/lib/album-render.source.sh @@ -220,11 +220,13 @@ append_preview_grid() { done } -# Decide the layout for the next tile, printing " ". A tile -# is subdivided with THUMB_SUBDIVIDE_PERCENT probability, but only into a layout -# that fits the photos still remaining on the page; otherwise it is a single -# square thumbnail. Randomness reuses the seeded random_index, so builds are -# reproducible when RANDOM_SEED is set (and varied otherwise). +# Decide the layout for the next tile, printing " ". Each +# tile rolls first for a "feature" (one photo blown up to a 2x2 hero tile) with +# THUMB_FEATURE_PERCENT probability, then for a subdivision with +# THUMB_SUBDIVIDE_PERCENT probability (only into a layout that fits the photos +# still remaining on the page); otherwise it is a single square thumbnail. The +# feature and subdivide rolls use independent seeded random_index namespaces, so +# builds stay reproducible when RANDOM_SEED is set (and varied otherwise). tile_layout_for() { local -ri remaining="$1"; shift local -r context="$1"; shift @@ -232,6 +234,14 @@ tile_layout_for() { local -a counts=(2) local -i roll choice + # A feature tile always fits (it consumes a single photo), so roll for it + # first. THUMB_FEATURE_PERCENT == 0 disables it (the roll can never be < 0). + roll=$(random_index "feature:$context" 100) + if (( roll < THUMB_FEATURE_PERCENT )); then + printf 'feature 1\n' + return + fi + # A single tile when subdivision is disabled, too few photos remain to fill # even the smallest subdivided layout (two_wide needs 2), or the roll misses. if (( remaining < 2 || THUMB_SUBDIVIDE_PERCENT == 0 )); then @@ -259,9 +269,11 @@ tile_layout_for() { } # Render one tile's markup (no trailing newline). A "single" tile is the plain -# square thumbnail, byte-identical to the previous per-thumbnail output; any -# other layout is a subdivided tile. The tile's photos are the trailing args and -# their preview numbers run from start_preview upward. +# square thumbnail, byte-identical to the previous per-thumbnail output. A +# "feature" tile is the same single thumbnail but with the 'feature' anchor class +# that makes CSS span it across a 2x2 block. Any other layout is a subdivided +# tile. The tile's photos are the trailing args and their preview numbers run +# from start_preview upward. build_tile_block() { local -r thumbs_dir="$1"; shift local -r backhref="$1"; shift @@ -271,13 +283,21 @@ build_tile_block() { local -a photos=("$@") local animation_class - if [ "$layout" = single ]; then - animation_class=$(random_animation_css_class slow "${photos[0]}") - build_preview_thumbnail \ - "$thumbs_dir" "$backhref" "$page_num" "$start_preview" \ - "${photos[0]}" "$animation_class" - return - fi + case "$layout" in + single|feature) + animation_class=$(random_animation_css_class slow "${photos[0]}") + # 'single' -> no anchor class (legacy output); 'feature' -> the + # 'feature' anchor class CSS spans across a 2x2 grid block. + local anchor_class='' + if [ "$layout" = feature ]; then + anchor_class='feature' + fi + build_preview_thumbnail \ + "$thumbs_dir" "$backhref" "$page_num" "$start_preview" \ + "${photos[0]}" "$animation_class" thumb "$anchor_class" + return + ;; + esac build_subdivided_tile \ "$thumbs_dir" "$backhref" "$page_num" "$layout" "$start_preview" \ "${photos[@]}" -- cgit v1.2.3