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.

  1. [(#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é. ;)

Sur le Web

Multimedia et traitements graphiques - SPIP

Documentation de référence sur le traitement automatisé des éléments graphiques, particulièrement innovant dans SPIP.

Dernières modifications : 04/08/2009

Paris-beyrouth

Vous trouverez ici des trucs et astuces destinés aux développeurs de sites sous SPIP. La majorité de ces trucs est consacrée aux filtres graphiques introduits dans SPIP 1.9. Il y a là en effet un vaste champ d’expérimentation pour les webmestres et les graphistes.

Des filtres graphiques très puissants, par *ARNO, un des créateurs de SPIP

Dernières modifications : 18/05/2017

Dernière modification de cette page le 28 septembre 2012

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 :

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

      1. [(#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