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:

pip install collective.click_to_zoom

And to create the Plone site:

make create-site

Contribute

• Issue tracker
• Source code

Prerequisites ✅

• An operating system that runs all the requirements mentioned.
• uv
• Make
• Git
• Docker (optional)

Installation 🔧

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

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

2. Install this code base.

   make install
   

Add features using plonecli or bobtemplates.plone

This package provides markers as strings (<!-- extra stuff goes here -->) that are compatible with plonecli and 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.

make add <template_name>

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

make add content_type

You can add a behavior with the following command.

make add behavior

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) and cookieplone-templates (f72da68) on 2026-03-30 09:05:27.109597. A special thanks to all contributors and supporters!

---

Changelog

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

1.1.0 (2026-03-30)

New features:

• eu and es translations @erral

1.0.0 (2026-03-30)

Internal:

• Initial release @erral