Skip to content
Starlight Image Zoom

Ignoring Images

By default, all images in your documentation content are zoomable when using the Starlight Image Zoom plugin with a few exceptions.

Exceptions

The following images are ignored by the Starlight Image Zoom plugin:

  • Icons rendered using the Starlight <Icon> component
  • Images embedded in interactive elements such as buttons, links, etc.
  • Images embedded in elements with the not-content CSS class

Ignoring specific images

The Starlight Image Zoom plugin will ignore images with the data-zoom-off attribute. You can add this attribute to any image to prevent it from being zoomable.

src/content/docs/example.mdx
---
title: My page title
---


import { Image } from 'astro:assets'
import algorithm from '../../assets/demo/algorithm.jpg'


<Image src={algorithm} alt="A book with a diagram on it" data-zoom-off />

The code above generates the following image on the page, which is not zoomable:

A book with a diagram on it

Photo by Андрей Сизов on Unsplash