Ici & Là

01 Société 02 Histoire 03 Science 04 Science fiction 05 SPIP 06 NTIC 07 Sondages 08 Divers
La meilleure façon de réaliser ses rêves est de se réveiller (Paul Valéry)

Accueil > SPIP > Programmation SPIP, Développements > Réduire la dimension des images avec le filtre |image_reduirelargeur,hauteur

Réduire la dimension des images avec le filtre |image_reduire{largeur,hauteur}

vendredi 27 janvier 2017, par François Daniel Giezendanner

Notez cet article
0 vote

 Introduction

En standard dans le squelette de SPIP 3.1 la largeur maximale des images est fixée à 672 pixel, en particulier dans le fichier article.html, lorsque cette largeur est plus grande elle est réduite à 672 pixels avec l’utilisation du filtre |image_reduire.

Nous donnons ici des informations détaillées sur ce filtre |image_reduire.


 Article |image_reduire

Considérons l’article |image_reduire d’Avril 2016 :

Le filtre |image_reduire{largeur,hauteur} permet de redimensionner une image à une taille donnée en conservant la proportion de l’image.

Il est possible d’avoir un paramètre largeur ou hauteur égal à 0. Dans ce cas, c’est l’autre paramètre qui est pris en compte uniquement.

Si l’image fournie est plus petite que les paramètres, l’image n’est pas agrandie.

Prenons une image 300x400 pixels

Exemple 1 : Réduire une image avec un maximum de 80 pixels en largeur et 200 pixels en hauteur

[(#FICHIER|image_reduire{80,200})]

L’image obtenue fait 80x107 pixels

Exemple 2 : Réduire une image à 200 pixels de hauteur

{{[(#FICHIER|image_reduire{0,200})]}}

L’image obtenue fait 150x200 pixels

Exemple 3 : Indiquer une dimension supérieure à l’image

[(#FICHIER|image_reduire{500,0})]

Calcule une vignette mais n’agrandit pas l’image. L’image obtenue est 300x400 pixels

Voir aussi : |image_reduire_par, |image_recadre, |image_passe_partout


 Article : Les filtres de SPIP

Considérons l’article Les filtres de SPIP de Mai 2001 — mis à jour en Juillet 2016.

- |image_reduire{largeur,hauteur} permet de forcer une taille maximale d’affichage des images et des logos.

Ce filtre s’utilise par exemple sur un logo d’article de la façon suivante :
[(#LOGO_ARTICLE|right||image_reduire{130})]

Dans cet exemple, le logo de l’article apparaît aligné à droite, à une taille maximale de 130 pixels.

Depuis [SPIP 1.8.2], ce filtre peut prendre deux arguments : largeur et hauteur. Si l’un de ces deux arguments est égal à 0, SPIP ne tient compte que de l’autre et calcule cette dimension en conservant les proportions de l’image. De plus, ce filtre s’applique aussi à la balise #TEXTE et ce sont alors toutes les images que le rédacteur introduit dans le texte grâce aux raccourcis SPIP qui sont alors réduites.

Ainsi, par exemple,
[(#TEXTE|image_reduire{600,0})]

affiche toutes les images insérées dans le fil du texte à une largeur maximale de 600 pixels. Cela permet de préserver la mise en page même sans que le rédacteur ait à se soucier de la taille des images qu’il télécharge sur le site.

NB. Si l’option « création de vignettes » est activée dans la configuration du site, ces logos réduits seront des fichiers d’images spécifiques calculés automatiquement par le serveur (idéalement, avec l’extension GD2 installée sur le serveur), pour les formats acceptés par le serveur (avec GD2, habituellement, les formats JPG et PNG). Sinon, c’est une version complète de l’image qui est affichée, mais avec une taille d’affichage fixée directement en HTML.

Historique : SPIP 1.7.1 introduit le filtre |reduire_image. Avec SPIP 1.9, celui-ci devient |image_reduire (les filtres de traitement d’image commencent ainsi tous par |image_).


 Article : Traitement automatisé des images

Considérons l’article Traitement automatisé des images de Mars 2006 — mis à jour en Mars 2015 :

Réduire les dimensions d’une image

La fonction reduire_image devient image_reduire, pour adopter la même logique de noms que les nouvelles fonctions graphiques. L’ancienne dénomination est toujours fonctionnelle.

Elle est désormais complétée par une image_reduire_par, qui permet de réduire une image selon une certaine échelle. Là où image_reduire réduit une image à des dimensions fixées à l’avance, image_reduire_par réduit l’image proportionnellement.

Par exemple :
[(#TITRE|image_typo{taille=24}|image_reduire_par{2})]

réduit l’image typographique d’un facteur 2 (l’image devient deux fois plus petite).


 Sources et documentation