# Mode d'emploi de l'application Avant / Après

Adresse de l'application :

https://scripts.zeler.fr/vs/

## Principe

L'application ne demande pas de saisir les comparatifs dans une base de données. Elle lit automatiquement les sous-dossiers présents dans le dossier `images`.

Un comparatif apparaît dans le menu de gauche uniquement lorsqu'un sous-dossier contient exactement deux fichiers image valides.

## Ajouter un comparatif

1. Ouvrir le serveur IONOS avec l'accès SFTP habituel.
2. Aller dans le dossier suivant :

   `/homepages/31/d463108797/htdocs/zeler.fr/scripts/vs/images/`

3. Dans `images`, créer un nouveau sous-dossier portant un nom unique. Ce nom devient le titre affiché dans le menu. Utiliser un slug simple, sans espace ni accent, par exemple :

   `appareil-genital-feminin-naissance`

4. Déposer exactement deux images directement dans ce sous-dossier. Ne pas les mettre dans un sous-dossier supplémentaire.
5. Nommer de préférence les fichiers :

   - `avant.png`
   - `apres.png`

6. Ouvrir ou recharger https://scripts.zeler.fr/vs/. On peut aussi cliquer sur l'icône Actualiser située à droite du nombre de comparatifs.
7. Le nouveau slug apparaît automatiquement dans le menu de gauche.

Exemple complet :

```text
vs/
└── images/
    └── appareil-genital-feminin-naissance/
        ├── avant.png
        └── apres.png
```

Important : il faut créer un sous-dossier par comparatif. Il ne faut pas déposer les images directement à la racine du dossier `images`.

## Formats acceptés

Les extensions acceptées sont :

- JPG et JPEG ;
- PNG ;
- WEBP ;
- GIF ;
- AVIF.

Les fichiers doivent être de véritables images lisibles. Une extension renommée artificiellement ne suffit pas.

## Ordre Avant / Après

L'application reconnaît maintenant automatiquement les mots courants dans les noms de fichiers.

Pour l'image Avant, elle reconnaît notamment : `avant`, `before`, `original`, `source` et `ancien`.

Pour l'image Après, elle reconnaît notamment : `apres`, `after`, `final`, `retouche` et `nouveau`.

Le couple `avant.png` et `apres.png` est donc recommandé. Si aucun mot n'est reconnu, l'application utilise l'ordre alphabétique naturel des deux fichiers. Le bouton Inverser permet aussi de retourner temporairement les deux images à l'écran.

## Utiliser le comparateur

1. Choisir un slug dans le menu de gauche.
2. Faire glisser la poignée centrale vers la gauche ou vers la droite.
3. Sur téléphone ou tablette, faire glisser directement avec le doigt.
4. Au clavier, sélectionner le curseur puis utiliser les flèches gauche et droite.
5. Le bouton Centrer remet la séparation à 50 %.
6. Le bouton Inverser échange temporairement Avant et Après.
7. Le bouton Ajuster affiche les images entières ; le bouton Remplir utilise toute la surface disponible.
8. Le bouton Plein écran agrandit le comparateur. En plein écran, les flèches Précédent et Suivant permettent de faire défiler les comparatifs sans quitter ce mode.

## Supprimer un comparatif

1. Dans le menu de gauche, cliquer sur la corbeille du slug concerné.
2. Cliquer sur `Oui` pour supprimer ou sur `Non` pour annuler.

Attention : cette suppression efface définitivement le sous-dossier et ses images sur le serveur IONOS. Elle ne passe pas par une Corbeille et ne peut généralement pas être annulée.

## Supprimer tous les comparatifs

1. Dans le bas du menu de gauche, cliquer sur `Tout supprimer`.
2. Cliquer sur `Oui` pour supprimer toutes les images Avant / Après ou sur `Non` pour annuler.

Cette action vide le contenu du dossier `images`, mais conserve le dossier `images` lui-même afin que l'application continue de fonctionner. La suppression est définitive sur le serveur IONOS.

## Si le comparatif n'apparaît pas

Vérifier les points suivants :

1. Les deux images sont dans `vs/images/un-slug-unique/` et non directement dans `vs/images/`.
2. Le dossier contient exactement deux images valides, ni une seule ni trois.
3. Les images sont directement dans le dossier du slug, sans niveau supplémentaire.
4. Le nom du dossier commence par une lettre ou un chiffre et ne dépasse pas 128 caractères.
5. Les extensions font partie de la liste acceptée.
6. La page a été rechargée après le transfert complet des fichiers.
7. Le transfert SFTP est terminé : une image encore en cours de copie peut être temporairement ignorée.

Si le problème persiste, vérifier la présence des fichiers dans le dossier distant exact et tester l'ouverture directe de chaque image dans le navigateur.