Give article body images a srcset from the CMS's renditions - #133
Merged
Merged
Conversation
An article's lead photo is almost always inline in the body, not the featured image, so article pages still loaded the full-size original. All 8 of the latest articles do this, for 9.8MB of body images between them. triangle-cms now returns content_image_variants, keyed by each inline image's wp-content path. After stripDimensions removes the srcsets WordPress wrote, the page adds one back to each body <img> the CMS has renditions for, sized to the article column. Images without renditions are unchanged. Measured on the 8 latest articles through a local stand-in for the CMS response: body image bytes go from 9.8MB to 0.9MB on a 1440px desktop and 2.2MB on a 3x phone. Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_019EcFyy8aqNnUd75CDPY6Bx
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Why
#130 covers cards and the featured-image figure, but on article pages the lead photo is almost always inline in the body. That's true of all 8 of the latest articles, so article pages still load the full-size original.
stripDimensionsdeliberately removes every bodysrcset, because WordPress's ones listed its own derivatives.Change
Article.content_image_variants?: Record<string, ImageVariant[]>, new in Return renditions for the images inside an article body triangle-cms#240. It's keyed by each inline image's wp-content path, as the body references it.addBodySrcsetsruns afterstripDimensions. For each body<img>the CMS has renditions for, it adds asrcset(viaimageSrcsetfrom Serve resized featured images through srcset #130) andsizesmatching the article column. It skips anything that already has asrcsetand leaves other images untouched.srcis absolute or already/proxy/-rewritten, and decodes&and percent-escapes the way the CMS does.Verified
I ran
astro devagainst a local stand-in for the #240 response: the public API, withcontent_image_variantsadded from renditions that actually exist on Delta.srcset.eslintis clean.astro checkshows 0 errors and the same 8 hints asmain.Not exercised end to end: an inline WordPress resized copy (
-1024x683.jpg). None of the articles I checked had one. The resolution happens in the CMS (aspect-checked, unit-tested in #240), and this page only uses the referenced path as the key.Merge order
Replaces #131, which GitHub closed when its base branch (#130) was deleted on merge. Same commits, now against
main. It is harmless before the matching triangle-cms change deploys.🤖 Generated with Claude Code
https://claude.ai/code/session_019EcFyy8aqNnUd75CDPY6Bx