Fiche site - Modes de comparaison de photos

[camillemonchicourt]

• 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

[camillemonchicourt]

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 :

[20cents]

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

[20cents]

Une version fonctionnelle avec les 2 modes de comparaison est disponible en demo :
http://vps587786.ovh.net/site/2

[camillemonchicourt]

OK merci beaucoup pour cette première version et la démo.
A tester et discuter.

[camillemonchicourt]

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.

[20cents]

TOCHECK Le bug de format de date est fixé

[camillemonchicourt]

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

[20cents]

@camillemonchicourt

• 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 Liste des photos d'un site / Filtre ou calendrier ? #77

[camillemonchicourt]

• 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

[20cents]

@camillemonchicourt

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

[camillemonchicourt]

OK super, merci.
En effet bien vu pour le fullscreen.