SPIP-Contrib

SPIP-Contrib

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

290 Plugins, 198 contribs sur SPIP-Zone, 83 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]

0 vote

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) Cycle2

    7 août 2014 – 119 commentaires

    La seconde version de la librairie Javascript « jQuery Cycle », qui permet de produire des diaporamas, se nomme « Cycle2 » : http://jquery.malsup.com/cycle2/. Voici cette nouvelle librairie mise en plugin pour SPIP. Si vous utilisez déjà « jQuery (...)

  • (fr) Galleria (fr)

    16 novembre 2011 – 193 commentaires

    Une galerie d’image qui utilise la librairie javascript Galleria. Description Ce plugin vous permet d’ajouter des galeries d’images à vos articles. La galerie créée utilise la librairie javascript Galleria. Le plugin propose un modèle nommé (...)

  • (fr) Une licence pour un article

    18 avril 2007 – 51 commentaires

    Sur une idée originale de erational, voici un plugin permettant de lier une licence à un article.

  • (fr) PHANTOM (HTML5UP)

    18 juillet – commentaires

    Squelette SPIP pour intégrer le modèle Phantom de HTML5UP. https://html5up.net/phantom Installation A l’activation, le plugin installe aussi les plugins suivants : crayons, favicon, metasplus+, Couleur d’objet, champs extras, SPIP reset centre (...)

  • (fr) ScolaSPIP 4

    19 janvier 2016 – 371 commentaires

    ScolaSPIP est plugin-squelette responsive personnalisable pour sites Web d’établissements scolaires basé sur SPIPr Présentation de ScolaSPIP Ce plugin pour SPIP 3 est développé par la Dane de l’académie de Versailles pour les webmestres de cette (...)