Image Split

Attention, cette contribution opère une surcharge d’un ou plusieurs squelettes de l’espace privé standard de SPIP !

Il est possible que certaines fonctionnalités de SPIP -modifiées postérieurement à cette version du plugin- ne fonctionnent plus...

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

Dernière modification de cette page le 14 mars 2019

Discussion

Aucune discussion

Ajouter un commentaire

Qui êtes-vous ?

Pour afficher votre trombine avec votre message, enregistrez-la d’abord sur gravatar.com (gratuit et indolore) et n’oubliez pas d’indiquer votre adresse e-mail ici.

Ajoutez votre commentaire ici

Ce champ accepte les raccourcis SPIP {{gras}} {italique} -*liste [texte->url] <quote> <code> et le code HTML <q> <del> <ins>. Pour créer des paragraphes, laissez simplement des lignes vides.

Ajouter un document

Suivre les commentaires : RSS 2.0 | Atom