Fiche site - Modes de comparaison de photos
camillemonchicourt opened this issue · 11 comments
- Améliorer l'affichage et la comparaison de 2 photos en utilisant les outils développés pour
http://observatoire-causses-et-cevennes.fr/opp/ (code source : http://observatoire-causses-et-cevennes.fr/opp/opp.js?101) - Pour le mode actuel permettant d'afficher 2 photos côte à côte, on reprendrait aussi le mode SPLIT de cet exemple, mais en affichant les 2 photos à côté et pas en dessous l'un de l'autre. Il permet de bouger les 2 photos en même temps et de zoomer. On n'aurait alors plus besoin de la modale affichant une photo en plus grand
- On ajouterait le mode SLIDER permettant de superposer 2 photos.
- On simplifierait le mode de sélection des photos
- On ajouterait un paramètre permettant de proposer à l'utilisateur un mode ou l'autre ou les 2
A maquetter
Voici les premières propositions de maquette avec les 2 modes d'affichage et de comparaison des images :
Mode slider :
Mode côte à côte :
Autre mise en page avec changement de mode d'affichage et zoom sur la droite au lieu d'au-dessus :
Une version alpha de la comparaison côte à côte est dispo sur la branche dev
Ajouter la ligne ci-dessous dans /backend/config.py
COMPARATOR_VERSION = 2
J'ai renommé certains template (cf #8)
Du coup il faut lancer ces commandes depuis la racine du projet :
pybabel extract -F ./backend/babel.cfg -o ./backend/i18n/messages.pot ./backend
pybabel update -i ./backend/i18n/messages.pot -d ./backend/i18n
pybabel compile -d ./backend/i18n
Une version fonctionnelle avec les 2 modes de comparaison est disponible en demo :
http://vps587786.ovh.net/site/2
OK merci beaucoup pour cette première version et la démo.
A tester et discuter.
Le responsive a été amélioré.
Le nombre de dates affichées dans le sélecteur a été modifié à 15 par page.
Voir démo sur http://vps587786.ovh.net/sites/3
- A voir si on peut calculer dynamiquement le zoom par défaut au chargement initial de la page pour s'adapter au mieux à la taille de l'image.
- Homogénéiser l'affichage des dates en utilisant la date précise, si la date approximative n'est pas renseignée.
- A voir si il faut pouvoir stocker et afficher l'heure, en plus de la date.
TOCHECK Le bug de format de date est fixé
OK pour le format des dates.
J'ai fait testé à un utilisateur peu à l'aide avec une souris, et il a pas du tout réussi ni compris comment zoomer dans l'image.
Peut-etre ajouter la possibilité (désactivable ?) d'afficher les bouton Zoom + / - ?
En passant, @xavyeah39 a trouvé le dépôt du super travail fait pour l'oOPP Causses et Cévennes, et qui a servi d'inspiration pour le nouveau mode de comparaison : https://github.com/CaussesCevennes/VOPP
- Ajout des boutons de zoom, et ajustement du niveau initiale pour mieux voir la photo
- Redimensionnement des photos pour que les 2 photos aient la même largeur. Donc si elles n'ont pas la même résolution mais le même ratio la correction est efficiente (comme le disait le dev de VOPP)
- Ajout des boutons prev, next, plus un sélecteur de pas. cf #77
- Zoom In / Zoom Out : Ajouter un paramètre pour l'afficher ou non ?
- Ajouter un outil "Fullscreen" sur l'affichage des photos. Utiliser le même outil que celui existant sur la page /sites/ de recherche de site
- Zoom In / Zoom Out paramétrable, Je te laisse le soin de le documenter !
Nom du param en base :comparator_zoom_control
Valeur par défaut : true - Le control Fullscreen n'est pas compatible avec le mode "côte à côte" donc je ne l'ai pas mis.
OK super, merci.
En effet bien vu pour le fullscreen.