Add an 'X' button to the rescaled image link for easier navigation

[lSabrinel]

Observation: A rescaled image in a Sphinx project links to the full-size image, which is useful, but returning to the previous page is a bit inconvenient.

Improvement: I suggest adding a small 'X' button to close the image and return to the page.

Workaround: For now, I am working on overriding the CSS to create the button.

Behavior: I apologize that I can't show you the real project I am working on, but this is a sample project. The image behavior is the same. When you click on the image, it directs you to the link shown below.

https://github.com/user-attachments/assets/4248cdf4-6fde-4b4f-bae8-fb6ebb638571

Code: .. image:: ../../source/_static/images/car1.jpg :scale: 80%

[electric-coder]

Can you edit the question to include a minimal reproducible example?

It seems I have lots of images in my project but none of them are by themselves clickable, so I want to know exactly how you include such an image.

[lSabrinel]

Hello @electric-coder, I have edited the question to include a short video showing the image behavior, as well as the Sphinx directive and its rescale option.

[electric-coder]

@lSabrinel I understand the problem you describe now. I haven't searched previous Sphinx issues for a solution, nor SO's python-sphinx tag but there might already be an extension that adds the "back" functionality for the image.

[SilverRainZ]

Have you tried https://sphinxcontrib-images.readthedocs.io/en/latest/?

[lSabrinel]

Hello @electric-coder indeed there is a solution, and the key is to use the sphinxcontrib-images extension and the Thumbnail directive. Thanks to @SilverRainZ , who pointed out the solution. It worked as intended and even offers additional interesting options.