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

Ce plugin permet de superposer des images avec un effet de type “avant/après”. Il utilise les librairies JavaScript TwentyTwenty et Cropper.

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:

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

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

Et voici le resultat:

Liste des options supportées:

Option Valeurs Explications
default_offset_pct Decimale (0->1) Position du slider
orientation vertical/horizontal Orientation du slider
no_overlay true/false Afficher/cacher les labels
before_label Texte Texte du label de la première image
after_label Texte Texte du label de la seconde image
move_slider_on_hover true/false Déplacement du slider en survolant les images avec la souris
move_with_handle_only true/false Seul un clic sur le slider peut le déplacer
click_to_move true/false Un clic sur les images déplace le slider à cet endroit

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”.

Portfolio

updated on 2 October 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