SPIP-Contrib

SPIP-Contrib

عربي | Deutsch | English | Español | français | italiano | Nederlands

289 Plugins, 197 contribs sur SPIP-Zone, 101 visiteurs en ce moment

Accueil > Affichage multimédia > Images > Traitement d’images > utilisations des filtres pour créer des vignettes sur mesure

utilisations des filtres pour créer des vignettes sur mesure

28 septembre 2012 – par trufo – commentaires

5 votes

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é. ;)

Dernière modification de cette page le 28 septembre 2012

Retour en haut de la page

Vos commentaires

Répondre à cet article

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 Les choses à faire avant de poser une question (Prolégomènes aux rapports de bugs. )
Ajouter un document

Retour en haut de la page

Ça discute par ici

  • Grappes 1.0

    23 novembre 2012 – 33 commentaires

    Présentation et nouveautés Cette version 1.0 du plugin Grappes est un portage pour SPIP 3.x. Le plugin permet de grouper des objets de SPIP dans des grappes. Les objets du core (articles, rubriques, auteurs, etc.) sont pris en charge, ainsi que (...)

  • Cycle2

    7 août 2014 – 117 commentaires

    La seconde version de la librairie Javascript « jQuery Cycle », qui permet de produire des diaporamas, se nomme « Cycle2 » : http://jquery.malsup.com/cycle2/. Voici cette nouvelle librairie mise en plugin pour SPIP. Si vous utilisez déjà « jQuery (...)

  • LinkCheck : vérificateur de liens

    13 février 2015 – 128 commentaires

    Ce plugin permet de chercher et tester l’ensemble des liens présents dans les objets. Vous pourrez donc en quelques clics connaître les liens brisés ou défectueux qui se sont immiscés dans le contenu de votre site SPIP. La vérification s’effectue en (...)

  • Mon site affiche une page blanche ou je ne peux plus accèder à l’espace privé

    7 février 2008 – 34 commentaires

    Au secours ! « Tout à coup » votre site devient inutilisable ou inaccessible ! Comment faire ? Pourquoi ? Par où commencer ? Sans pouvoir couvrir tous les cas, cet article va essayer de vous guider rapidement vers la (...)

  • Japibas, squelette responsive

    11 octobre 2013 – 113 commentaires

    Japibas est un squelette responsive, multilingue (français, anglais et espagnol), dont l’habillage conviendrait à un site de type blog ou webzine. Le graphisme est inspiré du template Wordpress Japibas réalisé par Jesper Johansen et distribué sous (...)