SPIP-Contrib

SPIP-Contrib

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

288 Plugins, 197 contribs sur SPIP-Zone, 198 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?
  • [Connettersi]

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) cimobile : plugin « détection et aiguillage des téléphones mobiles »

    20 septembre 2011 – 113 commentaires

    Le plugin « cimobile » détecte les téléphones mobiles et les aiguille vers le jeu de squelettes correspondant. Pour détecter un mobile, il prend en compte le « User-Agent », un cookie, un paramètre d’URL, une URL spécifique pour mobile. Il n’utilise pas (...)

  • (fr) ScolaSPIP 4

    19 janvier 2016 – 276 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 (...)

  • (fr) SPIP 3, Agenda et FullCalendar

    6 août 2012 – 317 commentaires

    Depuis SPIP 3, l’affichage d’un agenda sous forme de calendrier par jour/semaine/mois à changé. Les filtres |agenda_memo et apparentés sont désormais obsolètes. Il en est de même pour les filtres agendafull_memo et apparentés du plugin Agenda. (...)

  • (fr) Couleur de Rubrique

    9 juin 2012 – 58 commentaires

    Le plugin Couleur de rubrique est maintenant adapté à SPIP3. Il permet d’attribuer une couleur par rubrique de façon très simple : un bloc est ajouté sur la page rubrique de l’administration de votre site, qui vous permet de déterminer une couleur, de (...)

  • (fr) Passer un site SPIP sous https://

    23 février – 15 commentaires

    Comment migrer simplement votre site SPIP de http:// vers https:// Le protocole https:// devient de plus en plus courant : C’est mieux pour la vie privée de tous La plupart des grands sites l’a déjà adopté Certains navigateurs commencent à afficher (...)