SPIP-Contrib

SPIP-Contrib

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

288 Plugins, 197 contribs sur SPIP-Zone, 184 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

  • Crayons : Contrôleurs et Vues

    1er mai 2007 – 22 commentaires

    Cet article est en cours de rédaction (donc incomplet), merci si vous avez : des corrections, des compléments, des exemples (simples si possible), des captures d’écran ou videos de démo, une traduction à proposer, n’hésitez (...)

  • Le Couteau Suisse

    4 mai 2007 – 1794 commentaires

    Ce plugin propose d’introduire facilement de simples fonctionnalités supplémentaires à SPIP et qui s’avèrent rapidement indispensables ! Par exemple : le contrôle de nombreuses variables « cachées » de SPIP, des améliorations ou facilités typographiques, (...)

  • Incarner

    11 juillet 2016 – 14 commentaires

    Permet aux webmestres de se connecter en tant qu’un autre auteur très facilement. Pendant la phase de développement, c’est très pratique pour diagnostiquer des problèmes d’autorisations sans avoir à se reloguer tout le temps. Ce plugin permet de se (...)

  • LangOnet - Présentation générale

    20 août 2010 – 17 commentaires

    Un outil destiné aux développeurs pour vérifier, générer, éditier ou afficher les items de langue d’un plugin, d’un squelette ou des fichiers originaux de SPIP. Objectif La mise au point des fichiers de langue d’un plugin ou d’un squelette est (...)

  • Plugin Domlang : Domaines par secteur de langue

    4 septembre – commentaire

    Domlang est un plugin qui permet d’associer un nom de domaine ou un sous-domaine à un secteur de langue. Ce plugin convient pour un site qui utilise des secteurs de langues. En configuration, pour chaque secteur, vous pourrez définir une URL (...)