utilisations des filtres pour créer des vignettes sur mesure

Cet assemblage de filtres permet de :

  1. Déterminer le bord le plus court d’une image (horizontal ou vertical).
  2. Redimensionner l’image proportionellement en indiquant une valeur pour le bord déterminé en 1.
  3. Recadrer l’image résultante en indiquant les valeurs largeur et hauteur.
  4. Obtenir uniquement le chemin complet de la vignette en cache.

J’ai confectionné cet assemblage de filtres car je devais intégrer des vignettes carrées dans la gallerie « Gallery View 3 » (gratuite) qui est en javascript et jQuery. Pour ce faire il fallait produire un chemin vers une image carrée qui représente un maximum de l’image originale.

Ce code se place dans une boucle document. Pour adapter la grandeur des vignettes il suffit de changer quatre fois la valeur 80 en la valeur désirée.

[(#FICHIER|image_passe_partout{80,80}|image_recadre{80,80,center}|extraire_attribut{src})]

 

  1. |image_passe_partout{80,80} : On prend le bord le plus court de l’image originale et on lui assigne la valeur 80px. Le bord le plus long sera changé pour que le rapport hauteur/largeur de l’image ainsi obtenue reste le même. Par exemple avec une image originale de 330 x 240 on obtiendra 110 x 80. Avec 280 x 350 on obtiendra 80 x 100.
  2. |image_recadre{80,80,center} : On recadre l’image ainsi obtenue par 80px x 80px.
  3. |extraire_attribut{src} : On obtient le « nom de chemin » de cette image.

vous pouvez voir un exemple d’une galerie faite avec ce code à :
http://aimevenel.reportages.ch

ps : merci à Teddy Payet pour m’avoir pointé dans la bonne direction avec le filtre « image_passe_partout » que je ne connaissais pas. J’avais originellement utilisé pour le même effet :

  1. |image_reduire_par[(#LARGEUR|<#HAUTEUR| ?[(#HAUTEUR|div80)’,’(#HAUTEUR|modulo80)],[(#LARGEUR|div80)’,’(#LARGEUR|modulo80)])]
    -  qui est un peu compliqué. ;)

Discussion

2 discussions

  • 4

    C’est exactement ce que je cherche à faire… mais sous SPIP 3.0, l’agrandissement passe_partout ne se fais plus je crois ? Une idée ??

    • du moins sur :

      [(#LOGO_AUTEUR|passe_partout{548,548}|image_recadre{400,548,top left})]
    • et même sur :

      [(#LOGO_AUTEUR|image_passe_partout{548,548}|image_recadre{400,548,top left})]
    • Personne n’as essayé de faire ceci sur le spip 3.0 ? Pour moi ça n’as pas marché… :/ C’est pourtant une fonction importante…

    • En réalité ça ne marche pas chez moi car je demande un retaillage forcé supérieur de l’image si l’image est plus petite… Mais à priori cette fonction ne permet pas à ça, donc pour moi elle n’est pas 100% utile… ça serait une bonne idée d’évolution je pense… Mais je ne sauras coder ceci en php…

      Si vous avez des idées alternatives je suis preneur ;)

    Répondre à ce message

  • 1

    Bonjour,

    Est-ce que les filtres |image_passe_partout{80,80}|image_recadre{80,80,center} ne suffiraient pas à l’opération ?

    |image_passe_partout{XX,YY} : prend le côté le plus petit pour l’inscrire dans une forme carrée (ou rectangulaire selon les valeurs transmises en XX et YY).
    Un exemple : |image_passe_partout{120,80} appliqué à une image (logo, etc.) créera une image de 120 de largeur et 80 px de hauteur. Il n’y aura pas de « bord » blanc. L’image s’inscrit entièrement dans la taille définie. Bien entendu, pour cela, l’image doit faire plus de 120 x 80 px.
    Pour avoir le carré désiré, on lui passe le filtre |image_recadre{XX,XX,position}.

    Répondre à ce message

Ajouter un commentaire

Qui êtes-vous ?

Pour afficher votre trombine avec votre message, enregistrez-la d’abord sur gravatar.com (gratuit et indolore) et n’oubliez pas d’indiquer votre adresse e-mail ici.

Ajoutez votre commentaire ici

Ce champ accepte les raccourcis SPIP {{gras}} {italique} -*liste [texte->url] <quote> <code> et le code HTML <q> <del> <ins>. Pour créer des paragraphes, laissez simplement des lignes vides.

Ajouter un document

Suivre les commentaires : RSS 2.0 | Atom

Dernière modification de cette page le 28 septembre 2012