Contactez-nous

1

Timbre en portrait ou en paysage

15 mars 2006
par ARNO*

[SPIP 1.8] La technique du timbre, telle que nous l’avons exposée précédemment, fonctionne très bien à la condition que toutes les images ainsi manipulées soient en format « paysage », c’est-à-dire plus larges que hautes. En effet, notre « timbre-masque » étant lui-même plus large que haut, si on découpe une image ayant des proportions très différentes, on risque des découpes désastreuses.

Par exemple, sur une image verticale, on obtient ceci :

La technique suivante consiste à déterminer, directement avec une boucle SPIP (c’est-à-dire sans ajouter de code PHP), si une image est verticale ou horizontale (portait ou paysage).

Commençons par une boucle qui affichera des informations sur les images jointes à un article :

Cela affiche, dans notre cas :

  • IMG/jpg/DSC02185_1.jpg - largeur : 600 - hauteur : 900
  • IMG/jpg/DSC00399.jpg - largeur : 900 - hauteur : 676
  • IMG/jpg/DSC02139_1.jpg - largeur : 900 - hauteur : 675

Nous avons donc des valeurs SPIP, #LARGEUR et #HAUTEUR, qui affichent les dimensions d’une image.

Avec le nouveau moteur de la version 1.8, il est possible d’utiliser ces balises SPIP comme critères de sélection des boucles.

Nous allons donc, à l’intérieur de notre BOUCLE_doc, ajouter une boucle de contrôle, c’est-à-dire une boucle qui affiche l’élément déjà sélectionné, en ajoutant un critère supplémentaire.

La premier argument de cette nouvelle boucle, {id_document}, sélectionne le document qui est déjà sélectionné. Le second argument, {largeur>#HAUTEUR}, permet de dire :
— nous voulons le document actuel,
— nous voulons ce document s’il a une largeur supérieure à la #HAUTEUR de la boucle précédente ; or, la #HAUTEUR de la boucle dans laquelle nous nous trouvons, c’est déjà celle du document !

La partie alternative de la boucle signifie que, si la largeur n’est pas supérieure à la #HAUTEUR, alors nous affichons un autre texte.

  • IMG/jpg/DSC02185_1.jpg - largeur : 600 - hauteur : 900 Plus haut que large
  • IMG/jpg/DSC00399.jpg - largeur : 900 - hauteur : 676 Plus large que haut
  • IMG/jpg/DSC02139_1.jpg - largeur : 900 - hauteur : 675 Plus large que haut

Cette technique peut se révéler utile pour gérer des différences subtiles d’habillage selon les dimensions de logos ou d’images de portfolio.

Dans notre cas, nous allons simplement l’appliquer à notre technique du timbre. À partir d’ici, il faut SPIP 1.9 et GD2.

En plus de notre masque timbre-horizontal.png, nous ajoutons un autre masque, vertical (portrait), timbre-vertical.png.

timbre-horizontal.png
(Si vous utilisez ce fichier, pensez à le renommer.)
timbre-vertical.png

Et réunissons les deux techniques :

Le résultat est alors :

  • Jnelk
    Septembre 2006

    Bonjour, bravo pour ce site d’une grande richesse et doté, chose rare, d’une immense pédagogie. Dans mon cas, le timbre horizontal fonctionne parfaitement mais le timbre vertical est moins réussi : j’ai l’impression que mon image (qui est bien un portrait) vient se caler complètement en bas à droite du masque (image_masque timbre-vertical.png - sans rotation ni réduction) et cache alors les nervures du bas et de droite...

  • luapmada
    Décembre 2008

    Bonjour, Vos tutos sont effectivement wow, super utiles, ils ouvrent sur tout plein de potentialites peut etre un poil trop compliquée pour moi pauvre newbie ;(

    Si je comprends bien, avec votre methode de "pre tri", il est possible de n’afficher que les paysages ou les portraits... j’ai beau chercher, bidouiller ma boucle dans ts les sens, j’y arrivepo ;(( Comment pourrais je par exemple afficher le portfolio de seulement les paysages dans un article donné ? Merci d’avance pour ce coup de main.

  • Boyquotes
    Juin 2010

    Bonjour,

    Merci pour toutes les astuces, juste pour dire qu’avec SPIP 2.1 , il faut remplacer le filtre reduire_image par image_reduire (mais c’est marqué dans le changelog...)

    Bonne journée Nicolas.

Qui êtes-vous ?
Votre message

Ce formulaire accepte les raccourcis SPIP [->url] {{gras}} {italique} <quote> <code> et le code HTML <q> <del> <ins>. Pour créer des paragraphes, laissez simplement des lignes vides.