fix(site): don't caption badges, center image captions - #331
Merged
Conversation
Two fixes to the alt-text image caption feature (renderImageCaptions):
- Skip link-wrapped images. Linked images in the tutorials are badges
(e.g. the REUSE status badge `[](…)`), not preview screenshots,
so they must not get a caption. Previously the badge's alt ("REUSE
status") rendered as a stray caption on the root README.
- Center the image and its caption together. The figure now shrink-wraps
to the image (`display: table; margin: 16px auto`) and is centered on
the page, with the caption centered beneath it. Before, the figure was
full-width and only the caption was centered, so it floated to page
center while a left-aligned image did not.
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
2 participants
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.
Two follow-up fixes to the alt-text image caption feature added in #329 (
renderImageCaptionsinassets/js/custom.js).1. Badges no longer get a caption
The REUSE status badge on the root README (
[](…)) was rendering its alt text ("REUSE status") as a stray caption. Linked images in the tutorials are always badges/icons, never preview screenshots (content images are plain), so the runtime now skips any image wrapped in an<a>.2. Image and caption are centered together
Before, the
<figure>was full-width and only the caption text was centered — so on a left-aligned image the caption floated to the middle of the page, disconnected from the image. Now the figure shrink-wraps to the image (display: table; margin: 16px auto) and is centered on the page, with the caption centered directly beneath the image.Verification
Checked in the browser via the local dev server: