This Plugin adds the TwentyTwenty image comparison slider for Pico CMS

v1.3 2020-02-06 20:51 UTC

This package is auto-updated.

Last update: 2022-05-14 10:14:38 UTC


GitHub release (latest by date)

This Plugin adds the Twentytwenty image comparison slider in Pico CMS. For further reading see also



Copy the files from Github into your Pico CMS plugins folder plugins/PicoTwentyTwenty

or clone directly from Github in plugins/PicoTwentyTwenty

cd plugins
git clone

or, if you installed Pico CMS with composer

composer require maloja/pico-twentytwenty

The installation via composer will automatically install the jQuery (see below).


By default your Pico CMS installation will not permit access to javascript files in your vendor or plugins folders. Make sure yor'll grant access to these files by modifying the Pico CMS .htaccess file

# Permit direct access to jquery scripts
RewriteRule ^vendor/components/jquery.*\.(js)$ - [L,NC]


Add the following expression in your Markdown file:

(% imgcompare ( /path/to/image1.jpg, /path/to/image2.jpg ) %)


This plugin requires jQuery to run correctly. If PicoTwentytwenty is installed via composer, then jquery will be installed automatically. Otherwise, jQuery can also be installed manually and will usually be stored under /yourdomain/vendor/components/jquery. By default, Pico CMS does not allow access to jquery.js. The Pico .htaccess file must be adapted for this.

RewriteRule ^vendor/components/jquery.*\.(js)$ - [L,NC]

Then jQuery can be integrated into the Twig templates.

<script src="vendor/components/jquery/jquery.min.js"></script>