Image Split

1. Using the « split » model

The stack process is taken care of by the Jquery plugin TwentyTwenty. It is easy to use. All you have to do is using the <split> model/template, transmitting the two images’ id_document as parameters :

<split|ids=83,91>

Here is the result for two images showing two different variants of a motorcycle model :

2. TwentyTwenty settings

The default parameters can be found in the plugin’s configuration page :

If you want to know more about those options, I suggest you take a look at the official plugin documentation.

It is also possible to overwrite each option every time we use the « split » model, such as :

<split|ids=83,91|orientation=vertical|no_overlay=false|before_label=Black|after_label=Green>

Here is the result :

Supported options :

3. Using the « Cropper » tool

In order to optimize stacking process, it is important to use two images with the same proportions and, with a perfectly aligned content. To help with this, the plugin provides with a tool that crops and centers images you wish to stack. You will find a link to this tool near the button « add a document » :

This button will show a small form where you will be asked to provide the two images’ id_document you wish to use.

Clicking « Adjust ! », you will be redirected to the « cropper » page. Follow the instructions on the top of the page. Once your two images are well stacked, you can click « Crop it », which will redirect you to the article’s editing page. You will find two new documents in the portfolio which are your two stacked images with proper dimensions and well centered (the original images are still there too) :

Those two new documents are ready, to provide the <split> model with.