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 Opt-in feature

Enable it with the `imageEnlarge` field in `zfb.config.ts`:

```ts title="zfb.config.ts"
export default defineConfig(
  zudoDoc({
    imageEnlarge: true,
  }),
);
```

:::

:::note Why it's a config knob and not a `markdown.features.*` key

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/zudo-doc/mdx-components` 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):

```md
![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](/img/image-enlarge/image-wide.webp)

## 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:

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

## Emitted markup

Images that qualify are wrapped as:

```html
<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](https://zudo-doc.takazudomodular.com/docs/components/image-enlarge) — the visual/interaction showcase for the enlarge button and fullscreen dialog