Plugin TwentyTwenty 0.2 pour Dotclear

Une nouvelle version de ce plugin, qui permet de fournir un effet avant/après pour deux photos, suite aux retours constructifs fournis ce matin par mirovinben. Ce plugin utilise le plugin TwentyTwenty (distribué sous licence MIT).

Exemple d'utilisation du plugin

Activation et utilisation

Une fois installé il s’active dans les paramètres du blog :

Réglages du plugin TwentyTwenty

La première option permet de l’activer.

La seconde permet de faire charger Jquery (et l’extension jquery.cookie) si votre thème ou aucun de vos autres plugins actifs sur ce blog ne le fait. J’ai également remarqué que la version jQuery livrée avec le thème par défaut était trop ancienne pour pouvoir utiliser le présent plugin[1]. Dans ce cas il faut également cocher cette case.

Pour l’utiliser, une fois que vous avez préparé les deux photos, avant et après — ça marche aussi pour d’autres types d’images, rassurez-vous ! — il faut utiliser la syntaxe suivante :

<div class="twentytwenty-container">
	<img src="/public/avant.jpg" title="Image avant" alt="Image avant traitement" />
	<img src="/public/apres.jpg" title="Image après" alt="Image après traitement" />
</div>

Vous pouvez également l’utiliser en mode wiki Dotclear en encadrant vos deux images insérées normalement par des blocs HTML[2] contenant <div class="twentytwenty-container"> et </div>. Ça fonctionne très bien aussi.

Si vous souhaitez modifier l’alignement de l’ensemble vous pouvez, à la <div class="twentytwenty-container"> ajouter une seconde classe :

  • twentytwenty-left : pour cadrer à gauche
  • twentytwenty-center : pour centrer
  • twentytwenty-right : pour aligner à droite

Notez que si pour une raison ou une autre l’effet n’était pas activable (Javascript désactivé, …), les deux images apparaitront alors l’une derrière l’autre, tout simplement (ce qui sera le cas dans les flux RSS par exemple).

Ce billet servira de support pour cette version du plugin.

Notes

[1] Le mécanisme d’héritage des thèmes de Dotclear peut conduire au chargement de cette vieille version, dans le cas, par exemple, où votre thème ne proposerait pas ses propres fichiers templates, spécialement pour la partie <head>…</head>.

[2] Voir la syntaxe ici.

Ajouter un commentaire

Les champs suivis d'un * sont obligatoires

Les commentaires peuvent être formatés en utilisant la syntaxe Markdown Extra.

Ajouter un rétrolien

URL de rétrolien : https://open-time.net/trackback/10060

Haut de page