Creare una galleria di immagini con una dimensione prefissata

Creare una galleria di immagini non è complicatissimo grazie alle funzionalità grafiche e redazionali di SPIP.

1. SPIP consente di inviare dalla redazione più immagini in un colpo solo, mediante l’utilizzo di archivi zip. Basta zippare tutte le immagini, inviarle al server e richiedere di aggiungere il suo contenuto al portfolio.
2. SPIP è in grado di generare automaticamente delle miniature per le immagini inviate

Quindi, dopo aver preparato il ciclo per mostrare le nostre immagini nel modello dell’articolo, il gioco è fatto.

Tuttavia anche l’occhio vuole la sua parte e, se le immagini sono tutte di dimensioni diverse, la resa finale non è sempre convincente. Si potrebbe quindi pensare di creare una galleria in cui le miniature siano tutte di eguali dimensioni, ma ciò comporta un bel po’ di lavoro aggiuntivo.

Infatti, ritagliare le immagini a mano per ottenere delle dimensioni uniformi è un lavoro lungo e noioso per l’amministratore o l’autore della galleria. Inoltre, tagliando le immagini si potrebbero perdere dettagli importanti, cosa non sempre accettabile.

E se SPIP potesse presentare ai navigatori delle miniature tutte delle stesse dimensioni consentendo allo stesso tempo di visualizzare l’immagine completa ? Avremmo risolto ogni problema e senza perdere un secondo per preparare le immagini prima di inviarle in redazione, fantastico !

Certo, ma come si fa ? Utilizzando le fantastiche funzioni di manipolazione delle immagini di SPIP ed un po’ di ingegno.

L’idea è quella di ridimensionare le immagini quel tanto che basta per farle entrare nel box della taglia desiderata, in modo che la loro altezza o larghezza occupi totalmente l’altezza o la larghezza del box stesso. Quindi, tagliare la parte di immagine che fuoriesce dal box, avendo l’accortezza di mostrare la parte centrale, di solito la più interessante.

Per comprendere meglio il procedimento, si tratta di tagliare due bande di eguali dimensioni dall’immagine, situate in alto ed in basso o a sinistra ed a destra, in base alle proporzioni dell’immagine stessa ed a quelle della miniatura desiderata.

La prima cosa da fare è valutare il rapporto tra altezza dell’immagine ed altezza della miniatura desiderata, poi fare lo stesso riguardo alla larghezza. I rapporti così ottenuti ci indicheranno su quale dei due assi andremo ad effettuare il taglio (in altezza, quindi taglieremo 2 bande in alto ed in basso, o in larghezza, quindi le bande a destra ed a sinistra).

Supponiamo di voler ottenere delle miniature 115x115 :

  <BOUCLE_img(DOCUMENTS){id_article}{mode=document}{extension IN 'jpg,png,gif'}>
          #SET{ratio_x,#LARGEUR|div{115}}
          #SET{ratio_y,#HAUTEUR|div{115}}
  </BOUCLE_img>

Abbiamo creato un ciclo sulle immagini in portfolio per un articolo ed abbiamo calcolato i rapporti tra larghezza dell’immagine e della miniatura (ratio_x), poi lo stesso per l’altezza (ratio_y), andandoli a memorizzare in 2 variabili, appunto ratio_x e ratio_y con il segnaposto #SET.

Ora andiamo a ridimensionare quel tanto che basta la nostra immagine, affinché la miniatura mostri la più ampia porzione possibile dell’immagine originale. Aggiungiamo qualche riga al nostro ciclo :

  <BOUCLE_img(DOCUMENTS){id_article}{mode=document}{extension IN 'jpg,png,gif'}>
          #SET{ratio_x,#LARGEUR|div{115}}
          #SET{ratio_y,#HAUTEUR|div{115}}
          #SET{ratio,#GET{ratio_x}|<={#GET{ratio_y}}|?{#GET{ratio_x},#GET{ratio_y}}}
          [(#FICHIER|image_reduire_par{#GET{ratio}})]
  </BOUCLE_img>

Abbiamo calcolato il minore tra i rapporti ratio_x e ratio_y e lo abbiamo memorizzato nella variabile ratio, quindi abbiamo ridimensionato l’immagine originale proprio del valore ratio, andando ad ottenere una miniatura con altezza o larghezza pari a 115, in base alle sue proporzioni originali.

Non ci resta che tagliare le bande superflue dalla miniatura e mostrare l’immagine.

  <BOUCLE_img(DOCUMENTS){id_article}{mode=document}{extension IN 'jpg,png,gif'}>
          #SET{ratio_x,#LARGEUR|div{115}}
          #SET{ratio_y,#HAUTEUR|div{115}}
          #SET{ratio,#GET{ratio_x}|<={#GET{ratio_y}}|?{#GET{ratio_x},#GET{ratio_y}}}
          [(#FICHIER|image_reduire_par{#GET{ratio}}|image_recadre{115,115,center})]
  </BOUCLE_img>

Il filtro grafico image_recadre fa proprio questo, ritaglia l’immagine portandola alle dimensioni volute (115x115), mostrandone la parte centrale (center).

In ultimo, creiamo un link all’immagine completa :

  <BOUCLE_img(DOCUMENTS){id_article}{mode=document}{extension IN 'jpg,png,gif'}>
          #SET{ratio_x,#LARGEUR|div{115}}
          #SET{ratio_y,#HAUTEUR|div{115}}
          #SET{ratio,#GET{ratio_x}|<={#GET{ratio_y}}|?{#GET{ratio_x},#GET{ratio_y}}}
          [<a href="#FICHIER">(#FICHIER|image_reduire_par{#GET{ratio}}|image_recadre{115,115,center})</a>]
  </BOUCLE_img>

Abbiamo finito :)

Ora non dobbiamo preoccuparci di nulla se non di aggiungere le immagini in portfolio, al resto ci penserà SPIP !

Ma sarà tutto vero ? Certo, provare per credere