Image Enlarge

Automatically adds a fullscreen-expand button to images that are wider than their rendered column.

When an image’s intrinsic width is greater than its rendered width (accounting for device pixel ratio), a small expand button appears in the corner and the image gets a subtle border to signal interactivity. Clicking anywhere on the image — not just the corner button — opens it in a fullscreen dialog.

Wide Image — Button Appears

The image below is 2400 px wide, so it is larger than the typical content column. The expand button becomes visible once the browser measures the rendered size.

Small Image — No Button

This image is only 300 px wide, which fits inside the column. The expand button stays hidden because the image is not larger than its container.

Opt-Out

Add "no-enlarge" as the Markdown title attribute to disable the expand button for a specific image, even if it is wide enough to qualify. The title attribute is also stripped from the rendered <img> so it never shows as a browser tooltip.

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

How It Works

The feature has two parts:

• Build-time — a rehype plugin wraps each lone <img> inside a paragraph in a <figure class="zd-enlargeable"> and injects a hidden <button class="zd-enlarge-btn">. Images mixed with surrounding inline text are not wrapped.
• Runtime — a Preact island (ImageEnlarge) uses ResizeObserver to compare naturalWidth against clientWidth × devicePixelRatio and toggles the button’s hidden attribute accordingly. While that attribute is unset, the entire image becomes the click target and shows a hover affordance, so any click on the image opens it in a <dialog>. Press ESC, click the close button at the top-right of the viewport, or click outside the image to close it.

Settings

Image enlarge is enabled in src/config/settings.ts:

export const settings = {
  imageEnlarge: true,
};

Set imageEnlarge: false to disable the feature entirely.

Customizing overlay colors

The enlarge button and the dialog’s close button share a single token pair that controls their appearance:

• image-overlay-bg — bg layer color, rendered at 80% opacity behind the icon.
• image-overlay-fg — icon color, rendered at 100% opacity on top of the bg.

The right overlay color depends on the content photos, which vary between sites. The default values work for most cases, but any color scheme can override them per the three-tier color strategy (see Color):

// src/config/color-schemes.ts
"My Scheme": {
  // ...palette, background, foreground, ...
  semantic: {
    imageOverlayBg: 0,    // palette index — deep surface
    imageOverlayFg: 11,   // palette index — light text
    // or a direct color string: imageOverlayBg: "#222"
  },
},

The Color Tweak Panel (when enabled) exposes these tokens for live tweaking without editing code.