SPIP-Contrib

SPIP-Contrib

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

286 Plugins, 197 contribs sur SPIP-Zone, 271 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) Metas +

    3 décembre – 10 commentaires

    Améliorez l’indexation de vos articles dans les moteurs et leur affichage sur les réseaux sociaux grâce aux métadonnées Dublin Core, Open Graph et Twitter Card. Installation Activer le plugin dans le menu dédié. Dans le panel de configuration, (...)

  • (fr) Newsletters

    16 janvier 2013 – 378 commentaires

    Ce plugin permet de composer des Info-lettres. Par info-lettre, on désigne ici le contenu éditorial qui va être composé et envoyé par courriel à une liste d’inscrits. Le plugin permet de composer une info-lettre à partir d’un modèle pré-composé, (...)

  • (fr) Mode portail Communiquant pour SoyezCréateurs

    29 septembre 2010 – 20 commentaires

    5e mode d’affichage de la page d’accueil, ce mode se distingue des autres par une animation proposant un fondu/enchaîné des logos des articles à la une. Zonage Configuration Zone d’entête Nom du site Slogan si plugin bandeau présent (...)

  • (fr) Configurer Sparkpost

    25 avril – 14 commentaires

    N’hésitez pas à relire le préambule de cette rubrique avant de créer un compte sur une plateforme tierce . Présentation Sparkpost est une société d’envoi de mailing https://www.sparkpost.com/ Sur les petits volumes ( <100.000 emails / mois), (...)

  • (fr) Plugin Logo SVG : pouvoir utiliser des logos SVG

    17 octobre – commentaires

    Le SVG est un format vectoriel donc très léger et redimensionnable sans pertes, mais SPIP ne l’acceptait pas sur les logos. Ce plugin comble ce manque. Comment ça fonctionne ? Vous installez ce plugin, vous l’activez, et c’est tout. Crédits Une (...)