Image Enlarge
Wraps block-level images in a figure that expands to a fullscreen view on click.
The Image Enlarge feature wraps standalone block-level images in a <figure> with a hidden expand button. When an image is larger than its rendered column, the button becomes visible and clicking the image opens it in a fullscreen lightbox.
Note
Enable it with the imageEnlarge field in zfb.config.ts:
export default defineConfig(
zudoDoc({
imageEnlarge: true,
}),
);Note
Unlike the other opt-in markdown features, Image Enlarge is not configured under markdown.features in zfb.config.ts. zfb hard-removed the built-in markdown.features.imageEnlarge feature at 0.1.0-next.18 — setting it now produces an unknown key that fails the Rust config loader. zudo-doc re-implements the behavior in userland as an MDX paragraph (p) component override baked into the package's @takazudo/ factory, which emits the <figure class="zd-enlargeable"> markup for qualifying block images. That override reads the resolved imageEnlarge setting, which is why this is the only image feature toggled via a top-level config field rather than the markdown pipeline config.
Syntax
No special syntax is needed — write a normal markdown image on its own line (a paragraph that contains only that single image):
Live demo
The image below is wider than the content column, so the expand button appears and the image becomes clickable. Click it to open the fullscreen view:
Opt-out
Add "no-enlarge" as the markdown title attribute to skip wrapping a specific image. The sentinel attribute is stripped before rendering, so it never reaches the final DOM:
Emitted markup
Images that qualify are wrapped as:
<figure class="zd-enlargeable">
<img src="photo.png" alt="..." />
<button type="button" class="zd-enlarge-btn" aria-label="Enlarge image" hidden>
<!-- expand SVG icon -->
</button>
</figure>Notes
Only paragraphs containing a single image are wrapped. Images nested inside links or
<picture>elements, or sharing a paragraph with text, are skipped.A client island measures the rendered size against the image's intrinsic width (accounting for device pixel ratio) and only reveals the button when the image is genuinely larger than its column.
See also
Image Enlarge component — the visual/interaction showcase for the enlarge button and fullscreen dialog