Reserve image space site-wide; - #884
Draft
richarddushime wants to merge 1 commit into
Draft
Conversation
The alt half of #869 landed in #882 — no image on any of the 7,283 built pages is missing an alt attribute. The intrinsic-dimension half had not: only 25.7% of the site's 22,248 images carried both width and height, so the browser could not reserve their boxes before the files loaded. - Markdown images get width/height from the page bundle's resource, or from static/, via a new render-image hook. `img { height: auto; max-width: 100% }` in the stylesheet means the attributes fix the aspect ratio without freezing the rendered size. - The navbar logo carries its dimensions on every page. Hugo cannot measure an SVG, so functions/logo_dims reads the root viewBox; the stylesheet sizes the logo by height with `width: auto`, which previously left the brand's width unknown until the file arrived and shifted the menu sideways. - The chatbot launcher and the FORWARD SDG badges carry theirs too. - The UNESCO recognition image, floated at width 200 in two content files, gets the matching height. - `teamwork.webp` on the homepage described a megaphone, copy-pasted from the feature above it. - check_seo_html.py gains hard check 5 (every homepage image sized) and reports site-wide coverage; it fails on the pre-fix build and passes on this one. Coverage goes from 25.7% to 98.8%; the remainder are remote SVGs and avatars already sized in CSS. A tag-by-tag diff of all 22,248 images across both builds shows no change to any src or attribute other than the added dimensions and the one intended alt. Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
Contributor
|
👍 All image files/references (if any) are in webp format, in line with our policy. |
Contributor
✅ Spell Check PassedNo spelling issues found when checking 9 changed file(s)! 🎉 |
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.
Description
The alt half of #869 landed in #882 — no image on any of the 7,283 built pages is missing an alt attribute. The dimension half had not: only 25.7% of the site's 22,248 images carried both width and height, so the browser could not reserve their boxes before the files loaded.
img { height: auto; max-width: 100% }in the stylesheet means the attributes fix the aspect ratio without freezing the rendered size.width: auto, which previously left the brand's width unknown until the file arrived and shifted the menu sideways.teamwork.webpon the homepage described a megaphone, copy-pasted from the feature above it.Fixes # (issue)
Type of Change
Testing
Checklist
Notes