(feat) Img component - #39214
Open
hestonhoffman wants to merge 16 commits into
Open
Conversation
Closed
This comment has been minimized.
This comment has been minimized.
estherk15
approved these changes
Aug 17, 2026
jhgilbert
reviewed
Aug 20, 2026
Pulls the width/height/widthPercent trio, previously duplicated across Img.astro, ImgController, and ImgVideo, into a single SizingProps type in imgTypes.ts. Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
Adds --hugo-img-border-gray and --hugo-lightbox-spinner-track tokens for the Img component's previously hardcoded border and spinner-track colors, and reuses the existing --color-text-inverse token for the lightbox caption text. Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
Lightbox now owns its trigger link and takes plain children, replacing the render-prop API. This lets ImgController build the image once and conditionally wrap it, removing the duplicated PopupImage call sites, the redundant popup prop, and the no-op click handler. Also drops --hugo-lightbox-spinner-active in favor of the existing --color-text-inverse token.
The class had no CSS rule in any module, so cl() emitted a static class with no hashed counterpart. Hugo's img shortcode renders a bare figcaption too.
SizingProps was the only `extends` on a component prop type in the codebase. Every other component (StepperController, CollapseContentController, ApiSchemaTableNav, and the .astro components) declares its own flat prop interface and shares only domain types such as HeadingLevel and SchemaField. The inheritance also under-described the overlap: ImgControllerProps extended SizingProps but hand-declared alt, caption, inline, and popup, which come from ImgTagProps too. Reading the type suggested those fields were unrelated to the tag props when they are forwarded unchanged. ImgController and ImgVideo now declare their props flat, and PictureImage gets a named PictureImageProps instead of an inline intersection. ImgTagProps stays in imgTypes.ts as the one genuine cross-boundary contract, shared with the plaintext twin. Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
The dropped-attribute list restated what the Pick already expresses. Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
hestonhoffman
commented
Aug 21, 2026
| const needsLightbox = !inline && popup; | ||
| --- | ||
|
|
||
| { |
Collaborator
Author
There was a problem hiding this comment.
We're back to a ternary here, but I felt it was necessary because it allowed me to conditionally hydrate the lightbox.
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
3 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.
Adds Img component with support for images and videos.
href,target,wide,img_param,pop_param,figure_class, andfigure_style).styleprop withwidthPercentand added a validation error that prevents writers from using widthPercent with height/width.🟢 All tests pass
🟢 You can preview this using
previewordevnow, since they use the same image URLs.