SPIP-Contrib

SPIP-Contrib

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

286 Plugins, 197 contribs sur SPIP-Zone, 251 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 ?
  • [Se connecter]

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

  • Adaptive Images

    15 novembre 2013 – 66 commentaires

    Un plugin pour permettre aux sites responsive d’adapter automatiquement les images de la page à l’écran de consultation. Adaptive Images, que l’on pourrait traduire par Images adaptatives, désigne la pratique qui vise à adapter les taille, (...)

  • Métas

    8 août 2009 – 50 commentaires

    Ce petit plugin permet l’ajout, depuis l’espace privé, de metatags aux articles et rubriques de SPIP, ainsi que la mise en exergue de mots importants.

  • Brownie

    6 juillet 2012 – 43 commentaires

    Brownie est une adaptation pour Zpip du thème du même nom initialement développé par Egrappler.com. Présentation Brownie est un thème Responsive à deux colonnes. La démonstration ci-dessous utilise la version 2.0.0 de Brownie, la dist de SPIP3 (...)

  • Métas +

    3 décembre – 13 commentaires

    Améliorez l’indexation de vos articles dans les moteurs et leur affichage sur les réseaux sociaux grâce aux métadonnées Dublin Core, Open Graph et Twitter Card. Installation Activer le plugin dans le menu dédié. Dans le panel de configuration, (...)

  • Acces Restreint 3.0

    11 décembre 2008 – 785 commentaires

    Le plugin accès restreint permet de définir et de gérer des zones de l’espace public en accès restreint. Cette version du plugin a été redévelopée et optimisée tout spécialement pour SPIP 2.0. Il en découle une amélioration des performances sur les gros (...)

Ça spipe par là