zudo-doc
GitHub repository

Type to search...

to open search from anywhere

Image Enlarge

Created May 28, 2026Updated Jun 7, 2026Takeshi Takatsudo

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 key in src/config/settings.ts:

// src/config/settings.ts export const settings = { 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 in pages/_mdx-components.ts, which emits the <figure class="zd-enlargeable"> markup for qualifying block images. That override reads settings.imageEnlarge, which is why this is the only image feature toggled via src/config/settings.ts 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):

![A wide placeholder image](/img/image-enlarge/image-wide.webp)

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:

A wide placeholder image

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:

![alt text](./image.png "no-enlarge")

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.

Revision History

Takeshi TakatsudoCreated: 2026-05-29T01:46:14+09:00Updated: 2026-06-07T17:11:47+09:00

AI Assistant

Ask a question about the documentation.