Skip to content

Add thumbnail images to every remaining story card#53

Merged
chellej merged 1 commit into
masterfrom
feat/story-card-thumbnail-images
Jul 16, 2026
Merged

Add thumbnail images to every remaining story card#53
chellej merged 1 commit into
masterfrom
feat/story-card-thumbnail-images

Conversation

@chellej

@chellej chellej commented Jul 16, 2026

Copy link
Copy Markdown
Contributor

Summary

  • The insights grid already had real thumbnails; four other story-card groups still rendered with a blank colour-variant background and no image: the case-studies grid (and every "related cases" widget on the run-service pages, which reuses the same data), newsroom releases, partners, and the three sustainability pillars - 24 cards across 9 pages.
  • Sourced a distinct, topically relevant free-license photo per card from Pexels (images.pexels.com CDN - no API key needed for direct image fetch), cropped server-side to 560x320 to match the existing insights-thumbs convention. Avoided images with visible third-party brand names/logos or identifiable close-up faces.
  • Wired each set into its generator function the same way insights_main() was fixed previously: an image/image_alt field on the data list, rendered into an <img> inside the existing .story-card__media div. No CSS changes needed - object-fit: cover already handles populated vs. empty media.
  • Case-study images are addressed by slug via a small case_thumb_path() helper, so the one asset set covers both the main case-studies.html grid and every service-detail page's related-cases section with no duplication.
  • Removed the top-level assets/case-thumbs/ directory: it held 7 images under names that didn't match any of the 9 case-study slugs and was never referenced by the generator or the Makefile - dead weight from an earlier, incomplete pass at this same problem. The real case-study thumbnails now live under site/assets/case-thumbs/, matching where every other served asset directory already lives.

Test plan

  • python3 -m py_compile scripts/generate-site.py
  • python3 scripts/generate-site.py - clean run
  • Ran the build a second time - zero additional diff (idempotent)
  • CI link-checker's internal-link scan against the regenerated site/ - 0 missing links/images
  • Visually confirmed all four affected pages (case studies, newsroom, partners, sustainability) via headless Chrome screenshots - every card shows a fitting, distinct thumbnail

The insights grid got real thumbnails in a prior change, but four
other story-card groups still rendered with a blank colour-variant
background and no image: the case studies grid (and every "related
cases" widget on the run-service pages that reuses the same data),
newsroom releases, partners, and the three sustainability pillars -
24 cards across 9 pages.

Sourced a distinct, topically relevant free-license photo per card
from Pexels (images.pexels.com CDN, no API key required for direct
fetch), cropped server-side to 560x320 to match the existing
insights-thumbs convention, and avoided images with visible
third-party brand names/logos or identifiable faces. Wired each set
into its generator function the same way insights was: an
image + alt field on the data list, rendered into an <img> inside
the existing .story-card__media div (the CSS already handles empty
vs populated media via object-fit: cover, so no style changes were
needed).

Case-study images are addressed by slug (case_thumb_path()) so the
one asset set covers both the main case-studies.html grid and every
service-detail page's related-cases section without duplication.

Also removed the top-level assets/case-thumbs/ directory: it held
7 images under names that didn't match any of the 9 case-study
slugs and was never referenced by the generator or the Makefile -
dead weight left over from an earlier, incomplete pass at this same
problem. The real case-study thumbnails now live under
site/assets/case-thumbs/, matching where every other served asset
directory already lives.

Verified: build runs clean and is idempotent, the CI link-checker's
internal-link scan passes with zero missing links/images, and I
visually confirmed all four affected pages (case studies, newsroom,
partners, sustainability) via headless Chrome screenshots.

Signed-off-by: chellej <197998703+chellej@users.noreply.github.com>
@chellej
chellej merged commit d46063f into master Jul 16, 2026
3 checks passed
@chellej
chellej deleted the feat/story-card-thumbnail-images branch July 16, 2026 16:43
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants