This Plugin adds the Twentytwenty image comparison slider in Pico CMS. For further reading see also https://github.com/zurb/twentytwenty
Copy the files from Github https://github.com/maloja/pico-twentytwenty into your Pico CMS plugins folder plugins/PicoTwentyTwenty
or clone directly from Github in plugins/PicoTwentyTwenty
cd plugins
git clone https://github.com/maloja/pico-twentytwenty
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>