methods-of-business-design — archive thumbnail rebuild · 2026-05-10

Section: methods-of-business-design · List-cards processed: 72 · Thumbnails injected: 47 (65%) · Skipped (no working image): 25 (35%)

TL;DR

Walked 72 list-cards on /methods-of-business-design/archive/. 47 got a monochrome rollover thumbnail; 25 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-thumb class 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	Describing Problem Spaces	`https://images.dare.co.uk/posts/better-together.jpeg`
2	Nature	`https://images.dare.co.uk/posts/nature.jpg`
3	Google TV	`https://images.dare.co.uk/posts/preview-of-google-tv-now-available-on-android-sdk-1.jpg`
4	Braun	`https://images.dare.co.uk/posts/braun.jpeg`
5	Tread	`https://images.dare.co.uk/posts/bad-ass-bike.jpeg`
6	Spectrum of User Experience	`https://images.dare.co.uk/posts/spectrum-of-user-interface-design.gif`
7	Blackbox	`https://images.dare.co.uk/posts/blackbox.jpeg`
8	Aston Martin DBR2	`https://images.dare.co.uk/posts/aston-martin-dbr2-550pix.jpg`
9	Indicators	`https://images.dare.co.uk/posts/refill-coffee.jpeg`
10	Muhammad Ali v George Foreman	`https://images.dare.co.uk/posts/2200.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.uk URLs 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.sh or 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/methods-of-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.py whenever a section’s archive is rebuilt. Portable to dogwood / audrey / clients.

Run: python3 ~/Downloads/dare_archive_thumbnails.py --section methods-of-business-design

Source: methods-of-business-design_archive_thumbnails_2026-05-10.md · Rendered 2026-05-10 09:33