Support for Expanding/Zooming Images and Diagrams

[hichemfantar]

Have you read the Contributing Guidelines on issues?

• I have read the Contributing Guidelines on issues.

Description

I would like to request a feature that allows users to expand or zoom in on images and diagrams within Docusaurus documentation. This would improve the readability of detailed diagrams, code snippets in screenshots, and other important visual elements.

Has this been requested on Canny?

https://docusaurus.io/feature-requests/p/support-for-expanding-zooming-images-and-diagrams

Motivation

Many documentation sites use images to convey complex information. However, without a built-in zoom/expand functionality, users often struggle to view intricate details, especially on smaller screens.

API design

Proposed Solution:

• Lightbox Integration: Implement a lightbox-style viewer that allows users to click on an image to expand it in an overlay.
• Zoom on Hover/Click: Provide an option to enable zooming functionality when hovering over or clicking on an image.
• Configurable via Markdown or Frontmatter: Allow users to specify whether an image should be expandable within MDX files or frontmatter settings.
• Mobile-Friendly Implementation: Ensure touch-friendly support for mobile users (e.g., pinch-to-zoom, double-tap zooming).

Potential Implementations:

• Utilize a lightweight JavaScript library like medium-zoom or a native React component.
• Add a built-in component with zoom functionality that users can opt into.
• Provide a global setting in docusaurus.config.js to enable/disable this feature.
• https://nextra.site/docs/guide/image#image-zoom

Alternatives Considered:

• Manually linking images to open in a new tab (not user-friendly and disrupts navigation).

Have you tried building it?

no

Self-service

• I'd be willing to contribute this feature to Docusaurus myself.

[slorber]

We try to keep the core relatively small due to limited maintenance capacity. In particular for things that can be implemented as plugins by the community.

Here's an example: https://github.com/gabrielcsapo/docusaurus-plugin-image-zoom

On our own website, we even use a component directly in MDX:

import Zoom from 'react-medium-image-zoom';

<Zoom>

![Architecture overview](/img/architecture.png)

</Zoom>

See it in action here: https://docusaurus.io/docs/next/advanced/architecture

---

If it's already possible to implement in the community, moving it to the core would only put the burden on me to become the maintainer of a new plugin.

Is there a good reason to do so apart from making if the "officially approved way" to zoom images and diagrams? There are a ton of things we could add in core Docusaurus if "making it official" is the only motivation, but we can't add and then maintain everything. Similar to React Native, for maintenance reason it's good to have a "lean core" (they moved AsyncStorage out of RN core for example, and here you somehow want to add it back to core 😄 ).