ARNO*

Geek dilettante habitant une belle et grande propriété sur la Côte d’améthyste

  • Évolutions de mon #plugin #SPIP image_responsive
    http://zone.spip.org/trac/spip-zone/browser/_plugins_/image_responsive

    – v5.1 : transparent pour l’utilisateur (sauf bug…), lorsqu’on utilise les fonctionnalités avancées qui fabriquent un srcset ou des <picture><source>, ce n’est plus mon javascript perso qui va gérer les remplacements d’images, mais le polyfill picturefill.js, plus puissant. (C’est en préparation à l’automatisation de l’ajout de la « direction artistique », qui demandera à utiliser les <source> au lieu d’un simple remplacement d’image proportionnelle ;

    – v5.2 : ça devient carrément marrant : ajout d’une quatrième variable à image_proportions, qui indique un niveau de zoom. Par exemple :

    [(#FICHIER|image_proportions{200,200,focus,2})]

    si cette valeur (ici : 2) est supérieure à 1 (en pratique : 1.2, 1.5…), alors le recadrage se fera en zoomant à l’intérieur de l’image. Si on a indiqué comme ici « focus », alors on zoome vers le centre d’intérêt de l’image
    (on n’est pas obligé de faire ça sur « focus », ça fonctionne aussi avec les autres types de recadrage).

    • Pour tester :

      <html>
      <body>

      <BOUCLE_documents(DOCUMENTS){0,10}{par hasard}{inverse}{extension=jpg}>
      <div>
              <div style="position: relative; display: inline-block;">
              [(#FICHIER|image_reduire{200})]
             
                      <div style="position: absolute; margin-left: -7px; margin-top: -7px; left: [(#FICHIER|centre_image_x|mult{100})]%; top: [(#FICHIER|centre_image_y|mult{100})]%">
                      <img src="[(#CHEMIN{imgs/croix.png})]">
                      </div>
             
              </div>
              [(#FICHIER|image_proportions{0,0,focus,2}|image_reduire{200})]
              [(#FICHIER|image_proportions{200,200,focus,2}|image_reduire{200})]
              [(#FICHIER|image_proportions{200,200,center, 2}|image_reduire{200})]
      </div>
      </BOUCLE_documents>

      </body>
      </html>
    • (Il faut donc maintenant que j’intègre tout ça directement dans la fonction |image_responsive. Ensuite il faudra bien qu’on ait une fonction pour corriger les centres d’intérêt des images, parce qu’avec le zoom, les erreurs deviennent bien plus pénibles.)