docs: document image zoom feature with :zoom: directive option

[CybotTM]

Summary

Documents the new image zoom/lightbox feature available in the TYPO3 documentation theme.

Related

• Implementation PR: feat(figure): add image zoom functionality with multiple modes render-guides#1139
• Live Demo: https://cybottm.github.io/typo3-docs-theme/

Directive Options Documented

• :zoom: - The zoom mode (lightbox, gallery, inline, lens)
• :gallery: - Group name for gallery navigation
• :zoom-indicator: - Show/hide the zoom indicator icon
• :zoom-factor: - Magnification factor for lens mode (default: 2)

Zoom Modes

Mode	Description
lightbox	Click to open in full-screen overlay dialog
gallery	Gallery viewer with navigation between grouped images
inline	Scroll wheel zoom directly on image with pan
lens	Magnifier lens follows cursor on hover

Example Usage

..  figure:: /Images/screenshot.png
    :alt: Example screenshot
    :zoom: lightbox
    :class: with-border with-shadow

    Click to open in lightbox.

..  figure:: /Images/step1.png
    :alt: Step 1
    :zoom: gallery
    :gallery: tutorial

    First step of the tutorial.

Sections Added

1. Available Zoom Modes - Detailed descriptions and use cases
2. Directive Options - :zoom:, :gallery:, :zoom-indicator:, :zoom-factor:
3. Usage Examples - Practical RST code examples for each mode
4. Accessibility Considerations - Keyboard navigation, screen reader support, reduced motion
5. Best Practices - Guidance on when to use each mode

Updates

• Added :zoom: lightbox to standard image examples per review feedback
• Corrected render-guides version to 0.36.0

[sarahmccarthy123]

When I render this locally and click on the image for Example 3: Lightbox zoom (Documentation/Reference/ReStructuredText/Graphics/Images.rst) it doesn't seem to open in a lightbox.

[CybotTM]

Hi @sarahmccarthy123,

When I render this locally and click on the image for Example 3: Lightbox zoom (Documentation/Reference/ReStructuredText/Graphics/Images.rst) it doesn't seem to open in a lightbox.

This requires Implementation PR: TYPO3-Documentation/render-guides#1139

[linawolf]

I think it might be a good idea to add :zoom: lightbox as standart to all situations where screenshots are displayed. As ppl tend to just copy the easy examples

[CybotTM]

Hi @linawolf ,

I think it might be a good idea to add :zoom: lightbox as standart to all situations where screenshots are displayed. As ppl tend to just copy the easy examples

Yes, but someone needs to decide on this. And this is not related to this PR, is it?
This needs to be applied in TYPO3-Documentation/render-guides - or did I miss something?

[CybotTM]

Added :zoom: lightbox to the standard image examples (Example 1 and Example 2) per your suggestion. This way users copying these examples will have zoom enabled by default.

[CybotTM]

Hey @linawolf ,

https://docs.typo3.org/m/typo3/docs-how-to-document/main/en-us/Reference/ReStructuredText/Graphics/Images.html#example-1-scaled-image-with-shadow-and-link-target

..  figure:: /_Images/a4.jpg
    :alt: some image
    :target: https://typo3.org
    :class: with-shadow
    :scale: 50
    :zoom: lightbox

target and zoom collide here, in general zoom seems do not make much sense here with scale.

What do you think?

[linawolf]

then we should maybe remove the zoom there?

[linawolf]

Woould you like to make a follow up