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.
• 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!