Aiuto:Markup immagini
.svg){kind=spacer}
Questa pagina di aiuto spiega il linguaggio di markup delle immagini, cioè l'insieme di "marcatori" (regole o convenzioni, espressioni codificate) per aggiungere immagini, illustrazioni e grafici alle pagine di Wikipedia.
Inserimento di un'immagine
Dopo aver caricato (o trovato) un'immagine su Wikimedia Commons o su it.wiki (l'edizione in lingua italiana di Wikipedia), per inserirla in una pagina basta scriverne il nome preceduto e seguito dalle doppie parentesi quadre, come un collegamento interno (wikilink). In pratica, di solito si scrive:
- [[File:Esempio.png | thumb | didascalia ]]
Dove Esempio.png è il nome dell'immagine (es. Torre di Pisa 2008.jpg), thumb è un parametro per la formattazione predefinita dell'immagine (vedi anche più sotto), e didascalia è il breve testo che descrive il suo contenuto (es. "La Torre di Pisa").
Si tenga presente che, quando sia Commons sia it.wiki contengono un'immagine con lo stesso nome, la precedenza andrà all'immagine di it.wiki, che sarà quindi quella mostrata nella pagina.
Quella appena descritta è la sintassi tipica, cioè quella da usare nel 90% dei casi, e provvede automaticamente a creare una miniatura dell'immagine di dimensioni ottimali, allineata a destra. Di solito non serve altro. In casi particolari può tuttavia essere utile modificare alcuni parametri (allineamento, dimensione ecc.), come descritto di seguito.
Suggerimenti
- Inserire sempre una linea vuota dopo l'immagine per evitare disallineamenti del testo con il browser Internet Explorer.
- Non c'è alcuna differenza tra le immagini che si trovano su Commons e quelle che sono su it.wiki; in tutti gli esempi di questa pagina in cui è usato il prefisso File: davanti al nome del file, si può usare anche Immagine: o Image: in modo del tutto indifferente, dovunque sia ospitata l'immagine.
- [[Immagine:Esempio.png]] oppure [[Image:Esempio.png]] o, più correttamente, [[File:Esempio.png]]
Posizione rispetto al testo
Per cambiare la posizione dell'immagine rispetto al testo della pagina si possono indicare dei parametri opzionali dopo il nome del file, separandoli con una barra verticale, |.
| Immersa nel corpo del testo: Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. [[File:Esempio.png]] Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. |
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. |
| Senza scorrimento del testo: Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. [[File:Esempio.png|none]] Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. |
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
 Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. |
| Allineata a sinistra, con scorrimento: Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. [[File:Esempio.png|left]] Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. |
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. |
| Centrata nella pagina: Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. [[File:Esempio.png|center]] Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. |
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. |
| Allineata a destra, con scorrimento: Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. [[File:Esempio.png|right]] Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. |
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. |
Nota: Per terminare lo scorrimento del testo a lato dell'immagine, andando a capo e ritornando alla massima larghezza della pagina, è necessario inserire i seguenti tag:
- A capo su entrambi i margini: {{clear|both}}.
- A capo sul margine sinistro: {{clear|left}}.
- A capo sul margine destro: {{clear|right}}.
Didascalie, bordi e testo alternativo
È raccomandato aggiungere all'immagine una didascalia, un bordo o un testo alternativo, che viene automaticamente visualizzato al posto di quest'ultima dai browser testuali. Il testo alternativo rappresenta un elemento importante per l'accessibilità delle pagine, in particolare agli utenti disabili e non vedenti.
Testo alternativo
In genere è utile (anzi è caldamente consigliato) corredare l'immagine con un breve testo descrittivo, che costituirà la legenda dell'immagine laddove non potesse essere vista dal lettore. Questo funge anche da testo alternativo (in HTML ALT TEXT).
La didascalia va inserita dopo il nome dell'immagine e dopo gli eventuali parametri opzionali, separandola con una barra verticale, |. Il testo alternativo dev'essere l'ultima informazione prima delle parentesi quadre di chiusura.
Immagine con testo alternativo:
[[File:Esempio.png|Testo alternativo]]
Bordo (o cornice)
Per ottenere un piccolo bordo (o cornice), è necessario specificare il parametro opzionale border che fa sì che l'immagine venga visualizzata con un piccolo bordo grigio intorno a essa.
Immagine con bordo (o cornice):
[[File:Esempio.png|border]]
Didascalia
Per ottenere una didascalia è necessario specificare il parametro opzionale thumb che fa sì che l'immagine venga visualizzata sulla destra, racchiusa in una cornice e con la didascalia in basso; la didascalia, che va separata dalle opzioni con una seconda barra verticale, |, sostituisce il testo alternativo dell'immagine. Per indicare anche un testo alternativo bisogna usare il parametro alt.
Immagine incorniciata con didascalia:
[[File:Esempio.png|thumb|Didascalia]]
Immagine incorniciata con didascalia e testo alternativo:
[[File:Esempio.png|thumb|alt=Un globo terrestre|Didascalia]]
Il testo della didascalia può contenere dei collegamenti ad altre voci di Wikipedia (wikilink) oppure a siti esterni.
Didascalia con collegamenti:
[[File:Esempio.png|thumb|[[Aiuto:Wikilink|Link]] interni e [http://en.wikipedia.org siti] esterni]]
Nota: Assicurarsi sempre che il numero di parentesi quadre aperte e chiuse sia corretto: una parentesi in più o in meno significa il mancato funzionamento dell'intero comando [[File: ]]. Inoltre, se il testo della didascalia è costituito da una sola frase o da un semplice nome non inserire un punto finale; se, viceversa, il testo che accompagna e descrive l'immagine è composito e composto da più frasi, osservare la normale punteggiatura adottata abitualmente per i testi.
Dimensioni dell'immagine
| Nell'inserire immagini e tabelle, tieni conto sia della resa grafica (pensa ai tanti utenti che usano basse risoluzioni video), sia del peso complessivo della pagina (molti utenti hanno infatti sistemi non recentissimi e possono usare connessioni lente). Prova a vedere come appare la pagina anche a bassa risoluzione (ad esempio 800x600 o 1024x768) e non eccedere col peso delle immagini; non impostare le dimensioni delle immagini di tipo thumb se non è strettamente necessario: lascia che abbiano la larghezza di default scelta dall'utente. Verifica poi che la pagina non debba essere scorsa orizzontalmente o che parti di essa non si sovrappongano. Inoltre, assicurati che il contenuto sia sempre accessibile anche quando le immagini non possono essere visualizzate. |
|
Miniature
Se non viene specificata, la dimensione con cui viene presentata l'immagine è quella con cui è stata caricata; per garantire a tutti una migliore accessibilità è preferibile utilizzare le miniature (opzione thumb), affinché la dimensione visualizzata sia opportunamente ridimensionata. È possibile personalizzare tale dimensione dalle proprie preferenze utente. Ogni utente è libero di cambiare le proprie preferenze in base alle necessità (es. velocità di connessione veloce e dimensione dello schermo).
Talvolta può essere necessario ridimensionare manualmente l'immagine, magari perché nel testo sono presenti molte immagini e di formato diverso: il parametro thumb le imposta infatti automaticamente a una lunghezza di base di 220px (220 pixel) di larghezza (fino al 10 giugno 2010 è stata 180), indipendentemente dal loro sviluppo in altezza. Per ridimensionare manualmente un'immagine si deve indicare il numero di pixel seguito, senza spazi, dai caratteri minuscoli px, ad esempio 250px; l'altezza verrà calcolata automaticamente. Per impostare anche l'altezza si deve scrivere (numero)x(numero)px, es. 250x300px. In tale caso l'immagine non viene distorta, ma la miniatura, una volta raggiunto il massimo in una delle due misure, ridimensionerà l'altra in proporzione (Vedi paragrafo #Dimensionamento dell'altezza).
Esempio:
Se non necessario è preferibile non forzare una dimensione fissa per la singola immagine, perché annulla le impostazioni personalizzate nelle preferenze del singolo utente. Per questo un valido compromesso per le immagini più lunghe che larghe potrebbe essere l'uso dell'opzione "upright", tra due barrette verticali ("|upright|").
Se non sono specificati altri parametri, la miniatura apparirà allineata a destra, con la didascalia sotto (se fornita) e con un simbolo di zoom (ingrandisci) che indica la possibilità di vedere l'immagine nelle sue dimensioni reali.
Esempio:
- Note
- L'opzione thumb si può usare insieme a left, center e right per modificare la posizione della miniatura sulla pagina. Per l'uso all'interno delle tabelle è consigliata invece l'opzione none.
- Se la dimensione originale dell'immagine è inferiore a quella della miniatura, quest'ultima non viene ridimensionata. Se l'immagine originale è molto grande (sopra i 12,5 Mpixel circa) l'anteprima non viene creata.
- L'opzione thumb fa apparire uno spazio bianco in basso in cui può comparire una didascalia. Per inserire la didascalia basta aggiungere un trattino verticale ("|") seguito dal testo che si vuol fare apparire. Nelle didascalie è attivo il normale markup testuale: vi si possono inserire wikilink, corsivi, ecc. Per didascalie brevi, non è necessario aggiungere il punto al termine della frase.
- Esempi di miniature in varie dimensioni
| |
|
 |
Dimensionamento dell'altezza
È possibile anche definire l'altezza dell'immagine usando il formato "AAAxBBBpx", che permette di mostrare l'immagine con una dimensione massima di AAA pixel di larghezza o BBB di altezza, sempre mantenendo le proporzioni.
Ad esempio usando la sintassi
si ottiene l'immagine a destra, con un'altezza di 100 px.
Immagini grandi
L'opzione frame permette di inserire un'immagine nelle sue dimensioni originali. Il frame è compatibile con le didascalie e l'allineamento.
Ogni tipo di ridimensionamento verrà ignorato.
È inoltre possibile inserire immagini "grandi" che possono scorrere orizzontalmente, utilizzando il template {{Immagine grande}}. Può essere usato ad esempio con i panorami a 360 gradi. Ad esempio, il comando {{immagine grande|Skyline-New-York-City.jpg|2000px}} produce l'immagine
Gallerie di immagini
È possibile, in alcuni casi tassativi, impaginare più immagini sotto forma di galleria. La sintassi da usare è la seguente:
<gallery>
File:Nomefile.estensione|Didascalia
File:Nomefile.estensione|Didascalia
...
</gallery>
E il risultato che viene visualizzato è simile a questo:
-
Lago di Bolsena - tramonto -
Lago di Bolsena - bianco e nero
Il tag gallery accetta quattro parametri (vedi il Manuale di MediaWiki):
caption={caption}: imposta il titolo della gallery.widths={width}px: imposta la larghezza delle immagini.heights={heights}px: imposta l'altezza massima delle immagini.perrow={integer}: imposta il numero di immagini per ogni riga.
Ad esempio la sintassi <gallery perrow="2" > imposta due immagini per riga.
Si raccomanda di utilizzare la sintassi standard; i parametri aggiuntivi possono essere utilizzati solo in casi particolari e ben motivati.
Richiamo della pagina di descrizione
Per richiamare all'interno di una voce la pagina di descrizione dell'immagine, aggiungere il carattere "due punti" (:) all'inizio del collegamento; in tal modo il software lo interpreta come un link interno. Il nome del file può essere seguito da una barra verticale, |, ed eventualmente da un testo. Se è presente solo la barra verticale, viene eliminato il prefisso 'File:' e visualizzato solo il nome del file; se presente, il testo che segue la barra verticale viene visualizzato al posto del nome dell'immagine.
| Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. [[:File:Esempio.png]] Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. [[:File:Esempio.png|]] Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. [[:File:Esempio.png|Excepteur]] Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. | Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. File:Esempio.png Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Esempio.png Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. |
Richiamo dell'immagine
Per richiamare all'interno di una voce l'immagine in formato scaricabile, sostituire il prefisso Media: a 'Immagine:' o 'Image:'; anche in questo caso il software lo interpreta come un link interno. Il nome del file può essere seguito da una barra verticale, |, ed eventualmente da un testo. Se è presente solo la barra verticale, viene eliminato il prefisso 'Media:' e visualizzato solo il nome del file; se presente, il testo che segue la barra verticale viene visualizzato al posto del nome dell'immagine.
| Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. [[Media:Esempio.png]] Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. [[Media:Esempio.png|]] Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. [[Media:Esempio.png|Excepteur]] Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. | Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Media:Esempio.png Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Esempio.png Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. |
Link
Normalmente un'immagine rimanda alla pagina contenente la sua descrizione. Tuttavia usando il parametro link si può fare in modo che l'immagine rimandi ad un'altra pagina. Ad esempio, il codice
[[File:Flag of Italy.svg|20px|link=Italia|Italia]]
genera l'immagine 
che rimanda alla voce Italia.
Se la pagina a cui si vuole fare puntare l'immagine è un sito esterno, bisogna specificare l'intero URL della pagina. Ad esempio,
[[File:Presidential flag of Italy.svg|20px|link=http://www.quirinale.it/|Sito ufficiale della Presidenza della Repubblica Italiana]]
genera l'immagine 
che rimanda al sito ufficiale della Presidenza della repubblica italiana.
Se invece si vuole rendere l'immagine "inerte", cioè fare in modo che il cliccarla non abbia alcun effetto, è sufficiente aggiungere il parametro link= senza alcun valore, cioè vuoto. Così, ad esempio:
[[File:Gnome-globe.svg|20px|link=]]
produce 
su cui, come è facile constatare, il clic non produce effetto.
È importante sottolineare che l'utilizzo di questo parametro è previsto solo in casi molto determinati e in particolare va evitato nelle comuni immagini presenti nel namespace principale.