Metadata-Version: 2.4
Name: collective.click_to_zoom
Version: 1.2.0
Summary: An add-on for Plone to make images inserted through the TinyMCE editor clickable and viable in a bigger resolution
Project-URL: Homepage, https://github.com/collective/collective.click_to_zoom
Project-URL: PyPI, https://pypi.org/project/collective.click_to_zoom
Project-URL: Source, https://github.com/collective/collective.click_to_zoom
Project-URL: Tracker, https://github.com/collective/collective.click_to_zoom/issues
Author-email: CodeSyntax <plone@codesyntax.com>
License-Expression: GPL-2.0-only
License-File: LICENSE.GPL
License-File: LICENSE.md
Keywords: CMS,Plone,Python
Classifier: Development Status :: 3 - Alpha
Classifier: Environment :: Web Environment
Classifier: Framework :: Plone
Classifier: Framework :: Plone :: 6.0
Classifier: Framework :: Plone :: 6.1
Classifier: Framework :: Plone :: 6.2
Classifier: Framework :: Plone :: Addon
Classifier: Operating System :: OS Independent
Classifier: Programming Language :: Python
Classifier: Programming Language :: Python :: 3.10
Classifier: Programming Language :: Python :: 3.11
Classifier: Programming Language :: Python :: 3.12
Classifier: Programming Language :: Python :: 3.13
Requires-Python: >=3.10
Requires-Dist: beautifulsoup4
Requires-Dist: plone-api
Requires-Dist: products-cmfplone
Requires-Dist: z3c-jbot
Provides-Extra: release
Requires-Dist: zest-pocompile; extra == 'release'
Requires-Dist: zest-releaser[recommended]; extra == 'release'
Requires-Dist: zestreleaser-towncrier; extra == 'release'
Provides-Extra: test
Requires-Dist: plone-app-testing; extra == 'test'
Requires-Dist: plone-classicui; extra == 'test'
Requires-Dist: plone-restapi[test]; extra == 'test'
Requires-Dist: pytest; extra == 'test'
Requires-Dist: pytest-cov; extra == 'test'
Requires-Dist: pytest-plone>=1.0.0a2; extra == 'test'
Description-Content-Type: text/markdown

# collective.click_to_zoom

[![PyPI](https://img.shields.io/pypi/v/collective.click_to_zoom)](https://pypi.org/project/collective.click_to_zoom/)
[![PyPI - Python Version](https://img.shields.io/pypi/pyversions/collective.click_to_zoom)](https://pypi.org/project/collective.click_to_zoom/)
[![PyPI - Wheel](https://img.shields.io/pypi/wheel/collective.click_to_zoom)](https://pypi.org/project/collective.click_to_zoom/)
[![PyPI - License](https://img.shields.io/pypi/l/collective.click_to_zoom)](https://pypi.org/project/collective.click_to_zoom/)
[![PyPI - Status](https://img.shields.io/pypi/status/collective.click_to_zoom)](https://pypi.org/project/collective.click_to_zoom/)
[![PyPI - Plone Versions](https://img.shields.io/pypi/frameworkversions/plone/collective.click_to_zoom)](https://pypi.org/project/collective.click_to_zoom/)
[![CI](https://github.com/collective/collective.click_to_zoom/actions/workflows/main.yml/badge.svg)](https://github.com/collective/collective.click_to_zoom/actions/workflows/main.yml)
![Code Style](https://img.shields.io/badge/Code%20Style-Black-000000)
[![GitHub contributors](https://img.shields.io/github/contributors/collective/collective.click_to_zoom)](https://github.com/collective/collective.click_to_zoom)
[![GitHub Repo stars](https://img.shields.io/github/stars/collective/collective.click_to_zoom?style=social)](https://github.com/collective/collective.click_to_zoom)

An add-on for Plone to make images inserted through the TinyMCE editor clickable and viewable in a bigger resolution

## Features

`collective.click_to_zoom` provides a seamless, click-to-zoom (lightbox) effect for images embedded in Plone RichText fields.

When a user clicks on an inline image within the page content, the image smoothly expands to the center of the screen with a semi-transparent dark background, mimicking the popular "Medium-style" image zoom functionality.

Key features:
- **Zero Javascript dependencies:** Uses lightweight Vanilla JS to handle the zoom effect without relying on heavy libraries (no jQuery, no NPM dependencies required).
- **Non-destructive Output Filter:** Uses a backend Python output filter (`ClickToZoomFilter`) that safely wraps the `<img>` tags in an `<a>` tag pointing to a larger cacheable image scale, ensuring it doesn't break Plone's built-in image `srcset` functionalities.
- **Configurable:** Includes a Plone Control Panel where administrators can:
  - Toggle the click-to-zoom effect globally (Enable/Disable).
  - Select the specific image scale to be used when zooming (e.g., `large`, `great`, `huge`), dynamically populated from Plone's existing image scales vocabulary.
  - **Show original image:** Option to link to the original image directly. When enabled, the JavaScript lightbox is bypassed and the browser handles the link (e.g. opens the image in the current tab).
- **Interactive Zoom & Pan:** When the lightbox is active (standard scales), it supports advanced interactions:
  - **Click-to-Zoom:** Toggle between "Fit to Screen" and zoomed view.
  - **Smooth Wheel Zoom:** Use the mouse wheel to zoom in and out at the cursor position.
  - **Drag-to-Pan:** Click and drag to explore every detail of the image when zoomed in.
  - **Resolution Aware:** Automatically limits the maximum zoom level to the image's original resolution to prevent pixelation. If an image is smaller than the screen, zooming is automatically disabled.
  - **Mobile Friendly:** Supports touch gestures via modern Pointer Events.
- **ZCA compliant:** The backend HTML parser is conditionally applied through an `IBrowserLayer`, ensuring zero overhead on sites where the add-on is not installed.
- **Graceful degradation:** If an image is already manually wrapped in a hyperlink (e.g., the editor linked the image to a different page), the zoom filter will safely ignore it to preserve the author's intent.

## Installation

Install collective.click_to_zoom with `pip`:

```shell
pip install collective.click_to_zoom
```

And to create the Plone site:

```shell
make create-site
```

## Contribute

- [Issue tracker](https://github.com/collective/collective.click_to_zoom/issues)
- [Source code](https://github.com/collective/collective.click_to_zoom/)

### Prerequisites ✅

-   An [operating system](https://6.docs.plone.org/install/create-project-cookieplone.html#prerequisites-for-installation) that runs all the requirements mentioned.
-   [uv](https://6.docs.plone.org/install/create-project-cookieplone.html#uv)
-   [Make](https://6.docs.plone.org/install/create-project-cookieplone.html#make)
-   [Git](https://6.docs.plone.org/install/create-project-cookieplone.html#git)
-   [Docker](https://docs.docker.com/get-started/get-docker/) (optional)

### Installation 🔧

1.  Clone this repository, then change your working directory.

    ```shell
    git clone git@github.com:collective/collective.click_to_zoom.git
    cd collective.click_to_zoom
    ```

2.  Install this code base.

    ```shell
    make install
    ```


### Add features using `plonecli` or `bobtemplates.plone`

This package provides markers as strings (`<!-- extra stuff goes here -->`) that are compatible with [`plonecli`](https://github.com/plone/plonecli) and [`bobtemplates.plone`](https://github.com/plone/bobtemplates.plone).
These markers act as hooks to add all kinds of subtemplates, including behaviors, control panels, upgrade steps, or other subtemplates from `plonecli`.

To run `plonecli` with configuration to target this package, run the following command.

```shell
make add <template_name>
```

For example, you can add a content type to your package with the following command.

```shell
make add content_type
```

You can add a behavior with the following command.

```shell
make add behavior
```

```{seealso}
You can check the list of available subtemplates in the [`bobtemplates.plone` `README.md` file](https://github.com/plone/bobtemplates.plone/?tab=readme-ov-file#provided-subtemplates).
See also the documentation of [Mockup and Patternslib](https://6.docs.plone.org/classic-ui/mockup.html) for how to build the UI toolkit for Classic UI.
```

## Built with AI 🤖

This package was developed in collaboration with Google Gemini. The AI assisted in scaffolding the Plone output filters, writing the Vanilla JS lightbox, and configuring the Zope Component Architecture, which was then reviewed and curated by human developers.

## License

The project is licensed under GPLv2.

## Credits and acknowledgements 🙏

Generated using [Cookieplone (1.0.0)](https://github.com/plone/cookieplone) and [cookieplone-templates (f72da68)](https://github.com/plone/cookieplone-templates/commit/f72da68871a68e8e2c5c655524c998724927daba) on 2026-03-30 09:05:27.109597. A special thanks to all contributors and supporters!


---

# Changelog

<!--
   You should *NOT* be adding new change log entries to this file.
   You should create a file in the news directory instead.
   For helpful instructions, please see:
   https://github.com/plone/plone.releaser/blob/master/ADD-A-NEWS-ITEM.rst
-->

<!-- towncrier release notes start -->

## 1.2.0 (2026-07-30)


### New features:

- - Added interactive pan and zoom to the lightbox.
  - Added "Show original image" option to the control panel. When enabled, the lightbox is bypassed and the browser handles the image link directly.
  - Added automatic zoom limit based on the original image resolution.
  - Added upgrade step to update the registry for existing installations. [#zoom-and-pan](https://github.com/collective/collective.click_to_zoom/issues/zoom-and-pan)

## 1.1.0 (2026-03-30)


### New features:

- eu and es translations @erral 

## 1.0.0 (2026-03-30)


### Internal:

- Initial release @erral
