La salle Bazille

Je viens de mettre en ligne mon #plugin_spip Hotspots (pour #SPIP évidemment) :
▻https://git.spip.net/spip-contrib-extensions/Hotspots

C’est un plugin qui permet d’installer une « grande » image de référence dans une rubrique, et cela fait, chaque article de cette rubrique pourra être positionné dans cette image sous la forme d’un « hotspot » rectangulaire, oval ou ponctuel (un point).

C’est une interface graphique particulièrement originale, et c’est redoutablement efficace à utiliser.

Alors attention : autant c’est facile à utiliser dans l’espace privé, autant pour le site public, vous aurez à sortir l’huile de coude et coder les choses vous-mêmes. J’en ai une utilisation tellement versatile que je n’ai jamais développé d’interface publique « clé-en-main » qu’on pourrait réutiliser telle quelle.

Pour comprendre la logiques des valeurs utilisées pour afficher les hotspots de manière responsive sur l’image de fond, on peut aller regarder le code du fichier :

Sur la page de rubrique, j’installe une grande image de référence (ici apparaissent déjà des hotspots) :

https://pixelfed.zoo-logique.org/storage/m/_v2/493728974881341455/ea59ea880-d2aad0/IDHFR831ltyZ/pYtJ2528c79xHgrLOgx3FBOaPblvKDMEzvuZts7F.jpg

Dans chaque article de la rubrique, dans la colonne annexe, une petite vignette de cette image de référence apparaît : il suffit de cliquer dessus pour définir que cet article sera un hotspot.

À ce moment, dans la page de l’article, on peut définir précisément la forme et les limites du hotspot (ici un rectangle) :

https://pixelfed.zoo-logique.org/storage/m/_v2/493728974881341455/ea59ea880-d2aad0/h5dhJksqy1vv/3F9Vb1xOn8cwYg3yHHY1FPZI5UI27ydeiGIzaNod.jpg

Ensuite en fonction des besoins, je fabrique plein d’interfaces très différentes. Sur cet exemple, je l’ai utilisé pour fabriquer un « jeu » tactile demandant de replacer des bijoux au bon endroit :

https://pixelfed.zoo-logique.org/storage/m/_v2/493728974881341455/ea59ea880-d2aad0/WQqa6siGgQQ6/ZlrkjbnGwK5dhJ6F8A7x5kLc6ztT1O4lwRyigOcA.jpg

Mais mon usage le plus fréquent, c’est de créer les hotspots dans des images panoramiques à 360° (évidemment, là il faut un peu bosser son javascript) :
▻https://musee.info/La-salle-Bazille

https://pixelfed.zoo-logique.org/storage/m/_v2/493728974881341455/ea59ea880-d2aad0/zhPNRPE8kBOC/2soXAjbIqYOWI5bhRh6kojVxEi1K8lBF2BfMugOe.jpg

dans ce cas les hotspots sont positionnés dans l’interface du plugin sur une projection équirectangulaire de l’image panoramique :

https://pixelfed.zoo-logique.org/storage/m/_v2/493728974881341455/ea59ea880-d2aad0/B06DSII81ILc/5gf8NUoStmgfpcBghr35jMCyr1zuwZoDsk9cAer0.jpg

Ou dans une image « zoomable » :

https://pixelfed.zoo-logique.org/storage/m/_v2/493728974881341455/ea59ea880-d2aad0/W1KZI27omF0T/gWdyWAdtQQMRgg0ypSmLTEC2OwzjVv5XzlYjmmnn.jpg

Un usage basique serait, évidemment, de gérer des « image map » (mais c’est quelque chose que je n’utilise rigoureusement jamais).

Un portrait de Renoir par Bazille pour Cleveland
▻https://www.latribunedelart.com/un-portrait-de-renoir-par-bazille-pour-cleveland

Après l’exceptionnelle donation Keithley venue récemment enrichir le Cleveland Museum of Art de nouvelles œuvres d’Armand Guillaumin, de Gustave Caillebotte et de Camille Pissarro - notamment -, l’achat d’une toile de Frédéric Bazille auprès d’un collectionneur privé étoffe son remarquable fonds impressionniste d’une première œuvre de l’artiste

http://3.bp.blogspot.com/-rSyKf73fTYs/U4G2EU9tirI/AAAAAAAG_U0/xh4s8jHV7Xs/s1600/Portrait+de+Renoir+(1867),+Frederic+Bazille.jpg

Évidemment, Bazille, c’est l’une des vedettes du Musée Fabre de Montpellier, avec une très belle salle qui lui est consacrée. Et un chouette mini-site que j’avais monté pour les 150 ans de sa mort :
▻https://musee.info/Hommage-a-Frederic-Bazille

Où l’on trouvera un autre portrait de Renoir, la même année :
▻http://musee.info/La-salle-Bazille#fiche=6203