Image Split

1. Utiliser le modèle « split »

La superposition est assurée par le plugin Jquery TwentyTwenty. L’utilisation est très simple. Il suffit d’inclure dans vos articles le modèle « split », en lui passant comme paramètres les id_document des deux images que vous souhaitez superposer :

<split|ids=81,93>

Et voici le résultat pour deux images d’un même modèle de moto avec deux styles différents :

2. Configurer les options de TwentyTwenty

Les options par défaut se trouvent dans la page de configuration du plugin :

Si vous souhaitez mieux comprendre ce que chaque option apporte, je vous recommende de vous rendre sur la documentation officielle du plugin.

Il est de plus possible de surcharger chacune de ces options, en les spécifiant lorsque l’on utilise le modèle « split », comme ceci :

<split|ids=94,93|orientation=vertical||no_overlay=false|before_label=Black|after_label=Green>

Et voici le resultat :

Liste des options supportées :

3. Utiliser l’outil « Cropper »

Afin d’avoir une superposition idéale, il est important d’utiliser deux images de mêmes proportions, et avec un contenu parfaitement aligné. Afin de garantir cet effet, ce plugin offre un outil qui permet de redimensioner et recentrer les images que l’on souhaite superposer. Vous trouverez un lien vers cet outil à coté du bouton « ajouter un document » :

Ce bouton ouvrira un petit formulaire où l’on vous demandera les id_document des deux images a superposer :

En cliquant sur « Ajuster ! », vous serez redirigés vers la page qui utilise le « cropper ». Suivez les instructions en haut de la page. Une fois les deux images correctement superposées, il vous faudra cliquer sur « Recadrer », et vous serez renvoyés vers la page de l’article. Vous y trouverez deux nouveaux documents dans le portfolio qui sont vos deux images correctement proportionées et centrées (les images originales sont conservées) :

Ces deux nouveaux documents seront de bons candidats pour l’utilisation du modèle « split ».