fields-notes-from-business-design — archive thumbnail rebuild · 2026-05-09
Section: fields-notes-from-business-design · List-cards processed: 294 · Thumbnails injected: 190 (65%) · Skipped (no working image): 104 (35%)
TL;DR
- Walked 294 list-cards on
/fields-notes-from-business-design/archive/. 190 got a monochrome rollover thumbnail; 104 stayed plain (no working image). - Hit-rate: 65% of articles in this archive have at least one body
<img>that returns 200. - Per
feedback_featured_card_image_required.md, image-less cards get no rollover affordance — designed empty-state effort lands elsewhere.
Pattern shipped
- Default state: small 36×36 thumbnail at the start of each list-card, rendered grayscale at 95% contrast — visually quiet, present-but-receding.
- Hover state: filter switches to full colour; thumbnail scales 1.04× with a 320ms ease for a subtle lift.
- Affordance scope: only cards with
.has-thumb(image-bearing) get the interactive treatment; image-less cards stay plain. The.has-thumbclass is set during this script’s run, so future migrations or new content need to either re-run the script or include the class manually. - Accessibility:
aria-hidden="true"on the thumb span (decorative); the article title remains the primary affordance.
Sample of injected thumbnails
| # | Article | Thumbnail URL |
|---|---|---|
| 1 | Sci-fi cinema interface | https://images.dare.co.uk/posts/sas-communicator-omega-seamaster-caseback-1024px-2.jpg |
| 2 | Monticello Dam | https://images.dare.co.uk/posts/lake-drain-big.jpg |
| 3 | Hercules on the beach | https://images.dare.co.uk/posts/pembreysands-c130-550px.jpg |
| 4 | Rune Hallum Sørensen | https://images.dare.co.uk/posts/rune-hallum-sorensen-86m.jpg |
| 5 | Cables under the ocean | https://images.dare.co.uk/posts/seacable-data-viz.jpeg |
| 6 | Galicia Coast | https://images.dare.co.uk/posts/galicia-coast-550px.jpg |
| 7 | Users are all different | http://i.imgur.com/lSgF2.gif |
| 8 | City Graphic | https://images.dare.co.uk/posts/nyc.png |
| 9 | Base Jump | https://images.dare.co.uk/posts/felix-baumgartner-on-christ-the-reedemer-base-jump.jpeg |
| 10 | North Idaho | https://images.dare.co.uk/posts/north-idaho.jpeg |
What this tells us
- 65% hit-rate means roughly half the archive earns the rollover. Image-less cards stay plain; the visual texture across the archive is mixed (silent + interactive), which can read as editorial signal or as inconsistency depending on whether the image-less cohort is skewed toward older / lower-quality posts.
Watch items
- CDN dependency: thumbnails point at
images.dare.co.ukURLs that are currently served by the legacy WordPress host (per the 2026-05-09 R2 diagnosis). If/when CDN migrates, the URLs need to migrate in lock-step. - Third-party CDN images: any thumbnail pointing at
farm*.static.flickr.com, Imgur, etc. is a fragility — when those rot, the rollover breaks. Worth a follow-up rehost pass on those specifically (the SEO image-naming convention applies on rehost:feedback_seo_image_naming_convention.md). - Re-run cadence: content additions or article-image fixes won’t surface in the archive until this script re-runs. Wire into
dare_dashboard_refresh.shor run on-demand after batch content updates. - Performance: 36×36 grayscale images with
loading="lazy"— minimal perf cost. CLS should be zero (fixed dimensions). Verify on PSI after deploy.
Recommendations
- Eyeball the rebuilt archive at staging (
https://staging-dare-co-uk.xlabs.workers.dev/fields-notes-from-business-design/archive/) and judge whether the visual texture serves the editorial intent. - If yes: ff-merge to main; roll the same script across other archives (
methods-of-business-design,culture-means-thriving-teams). - If the hit-rate is too low: the upstream fix is restoring broken article images, not changing the rollover rule. Same as the featured-strip principle.
- Save this script + run as a sister to
dare_featured_picker.pywhenever a section’s archive is rebuilt. Portable to dogwood / audrey / clients.
Run: python3 ~/Downloads/dare_archive_thumbnails.py --section fields-notes-from-business-design