SPIP-Contrib

SPIP-Contrib

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

288 Plugins, 197 contribs sur SPIP-Zone, 212 visiteurs en ce moment

Home > Affichage multimédia > Gallerie, Diapositive > galerie d’images dimension préétablie > Creare una galleria di immagini con una dimensione prefissata

Creare una galleria di immagini con una dimensione prefissata

29 febbraio 2008 – di Cap

Tutte le versioni di questo articolo: [français] [italiano]

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

Dernière modification de cette page le 29 febbraio 2008

Retour en haut de la page

Rispondere all’articolo

Chi sei?

Per mostrare qui il tuo avatar, registralo prima su gravatar.com (gratis e indolore). Non dimenticare di fornire il tuo indirizzo email.

Inserisci qui il tuo commento Les choses à faire avant de poser une question (Prolégomènes aux rapports de bugs. )
Aggiungi un documento

Retour en haut de la page

Ça discute par ici

  • (fr) Enluminures typographiques V3

    25 juillet 2009 – 191 commentaires

    Les Enluminures typographiques V3 permettent d’ajouter au Porte plume les raccourcis typographiques présents dans le Plugin Barre Typographique Enluminée. C’est une extension du PortePlume. Pour la documentation d’usage, se reporter à celle du (...)

  • (fr) CookieChoices

    26 septembre 2014 – 22 commentaires

    Affiche un avertissement à l’usage des cookies en utilisant le script cookiechoices fourni par google Introduction Par défaut, SPIP est respectueux de la vie privée de ses visiteurs et ne pose pas de cookies de traçages ou publicitaires. Ce (...)

  • (fr) CKeditor 3.0

    4 octobre 2009 – 1224 commentaires

    CKeditor est l’évolution de l’éditeur WYSIWYG : FCKeditor, avec ce plugin vous pourrez utiliser cet éditeur à la place de l’éditeur de spip tout en laissant le choix à vos auteurs de l’éditeur qu’ils préfèrent utiliser. Attention : cet éditeur WYSIWYG (...)

  • (fr) spiPDF : générer des contenus sur mesure en PDF

    16 février 2011 – 222 commentaires

    Le plugin spiPDF génère des fichiers au format PDF d’article ou de tout autre élément SPIP, simplement à partir d’un squelette construit au format HTML 4 et facile à modifier. Avertissement de sécurité Ce plugin a fait l’objet d’une faille de (...)

  • (fr) Emplois

    5 septembre – commentaires

    Ce plugin propose deux objets éditoriaux : Offres d’emploi CVs Il est possible d’activer l’un et/ou l’autre selon vos besoins. Présentation générale Dépôt des offres d’emploi et/ou CVs depuis l’espace public Essentiellement, ce plugin permet (...)