Vous avez sûrement déjà rencontré des avant/après sur le web ! Montrer une pièce avant et après les travaux, un visage avant et après maquillage, une photo avant et après retouche, son corps avant et après une transformation physique… Mais comment faire un avant/après facilement sur son blog ?
Dans ce tutoriel, je vais vous montrer comment utiliser JuxtaposeJS, un outil en ligne très facile à prendre en main pour créer un avant/après sur un site.
Dans cet article
Préparer ses photos avant/après
La réussite d'un bon avant/après dépend en partie du choix des photos !
Prendre la bonne photo
Les avant/après qui ont le plus d'impact sont souvent ceux où les photos sont prises sous le même angle.
Par exemple, si vous voulez montrer un visage avant et après maquillage, il est préférable de faire la photo en adoptant la même expression, avec la même luminosité et le même angle. Ainsi, les différences entre les deux photos ressortiront d'autant plus.
Même chose pour un lieu, vous pouvez tout à fait utiliser un trépied pour prendre la photo au même endroit à deux moments différents.
Une fois que vous avez retenu deux photos similaires, nous allons les mettre en ligne.
Mettre en ligne ses photos
JuxtaposeJS, l'outil que nous allons utiliser, a besoin de récupérer le lien de vos photos. Il peut le faire soit à partir de Dropbox si vous possédez un compte et que votre photo est stockée sur Dropbox, soit à partir d'un site web.
Sur WordPress, allez dans le menu Médias > Ajouter et envoyez vos deux photos.
Je vous conseille de cliquer ensuite sur le lien "Modifier" de chaque photo et de renseigner son titre et le champ "Texte alternatif" avec une description de l'image.
Dans la colonne de droite, vous trouverez le lien de la photo. Copiez le lien des deux photos et gardez-le de côté (sur le Bloc-Notes par exemple).
Si vous avez un blog sur Blogger, allez dans la rubrique "Articles", appuyez sur le bouton "+" pour créer un nouvel article puis cliquez sur "Insérer une image". Choisissez ensuite "importer à partir de l'ordinateur" et mettez en ligne vos deux images.
Elles vont automatiquement s'insérer dans l'article. Cliquez sur chaque image, choisissez "modifier" puis réglez la taille de l'image sur "Taille d'origine". Allez ensuite dans l'éditeur HTML en cliquant sur le bouton "Affichage HTML" en haut à droite de l'écran.
Copiez le lien des deux images :
- Il est situé juste après une partie intitulée "src="
- Il commence par https et se termine par .jpg si vos images sont au format JPG
Nous sommes maintenant prêts à passer à la création du avant/après proprement dit !
JuxtaposeJS, un outil gratuit pour faire un avant/après
Le fonctionnement de JuxtaposeJS est très simple. Sur le site, vous commencez par copier à gauche le lien de l'image représentant la situation "Avant" et, à droite, le lien de l'image correspondant à "Après", comme ceci :
Vous pouvez ensuite, pour chaque image, indiquer une légende, comme une date par exemple ("Label"), ainsi qu'un crédit.
Puis vous pouvez personnaliser votre avant/après avec plusieurs options :
- Slider start position - C'est la répartition en pourcentage entre les deux photos. Si vous laissez à 50%, on verra la moitié de la photo Avant et la moitié de la photo Après.
- Show Labels & Show Credits - Ces options permettent d'afficher ou non votre légende et le crédit des deux photos.
- Animate - Cette option permet d'animer automatiquement l'avant-après.
- Make Responsive - Je vous conseille de cocher cette case qui permet à votre avant/après de s'adapter aux smartphones et tablettes.
- Vertical - Si votre photo exige un avant/après vertical, vous pouvez cocher cette case pour l'obtenir.
Vous pouvez prévisualiser en temps réel le rendu de votre slider avant/après.
Une fois que vous êtes prêt, cliquez sur "Publish" pour récupérer le code du slider.
Publier votre avant/après sur votre blog
Pour publier votre avant/après sur votre blog, il faut simplement copier le code figurant dans la zone "Embed" de JuxtaposeJS :
Quand vous rédigez votre article, basculez dans l'éditeur HTML. Sur Blogger, je vous ai montré un peu plus haut comme faire.
Sur WordPress, ça se passe au niveau de ce bouton si vous utilisez l'éditeur classique :
Et si vous utilisez l'éditeur Gutenberg de WordPress, il faudra cliquer sur les trois points en haut à droite de l'écran puis choisir "Éditeur de code" dans le menu.
A l'endroit où vous souhaitez que votre avant-après apparaisse, copiez le code issu de JuxtaposeJS.
Précision utile pour les utilisateurs de Blogger : si vous faites un "Aperçu" de votre article, l'avant-après ne fonctionnera pas dans l'aperçu… mais une fois qu'on publie, il marche sans problème sur le blog.
Voici le rendu, j'ai utilisé pour tester l'outil une photo de Winchester en Angleterre… avant et après retouche :
Les avant/après ont donné lieu à des projets très créatifs, à l'instar du Back To The Future d'Irina Werning, qui poussait des adultes à recréer leurs photos d'enfance. A vous d'imaginer votre vision des choses !
Bonjour,
Moi j’ai un problème d’affichage sur le site. Lorsque je modifie dans le html la taille ou le %, cela ne fonctionne pas en ligne. Mais si je ne fais pas ces modifications la dimension est trop grande sur le site.
The Real Person!
The Real Person!
Bonjour Amandine, tu modifies bien la largeur au niveau du code
class="juxtapose" width="100%"(en modifiant la valeur de « width ») ? Si ça ne fonctionne pas, c’est probablement lié à la manière plus générale donc le site est codé donc difficile de répondre avec les seules informations de ton commentaire. Parfois, ajouter une instructionmax-width=avec la largeur maximale que l’iframe ne doit pas dépasser suffit… mais encore une fois, s’il y a un problème sur mobile et sur desktop, la résolution implique parfois une solution différente.Bonjour Marlene,
Etrangement, cela fonctionne en preview mais pas sur le blog !!!
As tu une idée ?
Merc à toi
The Real Person!
The Real Person!
Bonjour Mathieu, je suis allée sur le site et le problème semble réglé :) Parfois, c’est juste une histoire de cache (un petit Ctrl+F5 sur la page et le vidage du cache créé par un plugin peut régler la situation)… ou alors, c’est un élément du thème qui bloque le chargement de JavaScript.
Bonjour ! Comment le rendre visible sur mobile comme votre exemple ? Je l’ai fait pour le site d’un client, pc nickel mais tablette et mobile illisible !! Une astuce ? Merci ! Anne-Lise.
The Real Person!
The Real Person!
Hello Anne-Lise, de manière générale sur un petit écran on manque pas mal d’espace pour que ça rende « bien »… mais pour que ce soit compatible mobile, ça passe par le code CSS (faire en sorte que l’iframe occupe 100% de la largeur de l’écran), cf ces explications techniques.
Bonjour, j’ai une question, si on fait « Publier » sur Juxtapose, est-ce que ça veut dire que mes deux photos vont traîner sur leur site quelque-part ? Je veux montrer un avant-après de son bébé à une cliente, mais je veux que ça reste privé.
The Real Person!
The Real Person!
Hello Christèle, concrètement, le lien des images n’est pas hébergé sur JuxtaposeJS mais bien sur le site WordPress (ou l’endroit que vous choisissez). Si vous voulez être totalement certaine que ça ne risque pas d’être référencé quelque part, je vous conseille de les contacter pour poser la question, au moins vous serez rassurée :)
Merci pour ce fantastique article.
J’ai fait un avant-après sur JuxtaposeJS, et maintenant je souhaite que mon client puisse le voir. Donc si j’ai bien compris, il faut que je le publie sur mon site wordpress, par exemple dans un nouvel article qui n’apparaît pas sur mes pages mais dont je pourrai envoyer le lien à mon client c’est bien ça ?
Bonjour Marlène,
Merci pour votre article, c’est exactement ce que je cherchais, mais j’ai beau copié mes lien URL de ma bibiothèque Worpress, rien ne s’affiche. Y a t’il une autre manip à faire ? Ou peut-être que cela ne fonctionne plus ? Si vous avez une piste je suis preneuse, merci bien
The Real Person!
The Real Person!
Hello Delphine, « rien ne s’affiche » à quel niveau ? L’outil fonctionne toujours.
Ah ça peut me servir ça pour des dessins !
Merci pour l’astuce !
The Real Person!
The Real Person!
Oui, ça peut être top pour montrer par exemple un dessin avant/après colorisation, la progression entre croquis initial et dessin final… Il y a plein d’idées à explorer !