Image Split

ATTENTION, this contribution is overloading one ore more SPIP’s admin area templates !

SPIP’s features - that would be modified, posterior to this contribution’s version - might actually not work properly anymore...

This plugin lets you stack two images with a before/after effect. It uses the TwentyTwenty and Cropper JavaScript libraries.

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:

  1. <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:

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

Here is the result:

Supported options:

Option Values Explanations
default_offset_pct Float (0->1) Slider position
orientation vertical/horizontal Slider orientation
no_overlay true/false Hide/shows labels
before_label String First image label’s text
after_label String Second image label’s text
move_slider_on_hover true/false Move the slider when hovering the images with the mouse
move_with_handle_only true/false Only move slider when clicking on it
click_to_move true/false Clicking on the images move the slider to that position

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.

updated on 1 March 2019

Discussion

Aucune discussion

Comment on this article

Who are you?
  • [Log in]

To show your avatar with your message, register it first on gravatar.com (free et painless) and don’t forget to indicate your Email addresse here.

Enter your comment here

This form accepts SPIP shortcuts {{bold}} {italic} -*list [text->url] <quote> <code> and HTML code <q> <del> <ins>. To create paragraphs, just leave empty lines.

Add a document

Follow the comments: RSS 2.0 | Atom