IF Italia - Il Wiki della Interactive Fiction Italiana

Come inserire immagini nelle pagine

Per inserire un’immagine all’interno di una pagina, è sufficiente scrivere il suo indirizzo (URL). Si può specificare un testo alternativo mettendolo tra virgolette subito dopo l’indirizzo. Questo testo verrà visualizzato come tooltip dell’immagine, oppure in alternativa a quest’ultima dai browser che non visualizzano immagini, ad es. quelli per i non vedenti. Inserendo una barra verticale (|) si può aggiungere una didascalia, anche formattata.

http://pmichaud.com/img/misc/pc.jpg"Graffette" | È sempre un piacere
lavorare con le [- %newwin% [[ (Wikipedia:Paper_clips | graffette]]. -]

È sempre un piacere lavorare con le graffette.

Le immagini possono essere anche scelte tra i file caricati sul sito (ad es. Attach:Main/Imagesit/immagine.jpeg). Per default PmWiki supporta questi tipi di immagini:

'gif','jpg','jpeg','png','bmp','ico','wbmp','svg','xcf'        # images

Per creare un collegamento a un’immagine (come http://pmichaud.com/img/misc/pc.jpg) anziché visualizzarla, bisogna scrivere il suo indirizzo tra doppie parentesi quadre. Esempio: [[http://pmichaud.com/img/misc/pc.jpg]] oppure [[Attach:image.jpeg]].

Per utilizzare un’immagine come collegamento a un altro indirizzo, bisogna inserirla come testo del link. Esempio:

[[http://pmwiki.org/ |
http://pmichaud.com/img/misc/pc.jpg"PmWiki"]]|Visitate '''PmWiki'''

Visitate PmWiki

oppure [[http://example.com|Attach:Groupname/image.jpeg]].

Didascalie e immagini floating

Allineamento verticale (come valign per le tabelle)
- questa sezione deve essere ancora scritta…

È possibile dare didascalie alle immagini, scrivendole dopo una barra verticale.

http://pmichaud.com/img/misc/pc.jpg"Graffette"
| '''Figura 1'''

Figura 1

Normalmente, le immagini sono allineate con il testo. Per centrarle o allinearle a destra bisogna usare rispettivamente i comandi %center% e %right%.

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. %center%http://pmichaud.com/img/misc/pc.jpg"Graffette"%%

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. Lorem ipsum dolor sit amet, consectetur adipisicing
elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
%right% http://pmichaud.com/img/misc/gem.jpg%%

Per allineare l’immagine a destra o a sinistra, facendo in modo che il testo le scorra attorno, bisogna utilizzare rispettivamente i WikiStyles %lfloat% e %rfloat%

%lfloat text-align=center margin-top=5px margin-right=25px
margin-bottom=5px margin-left=25px% http://pmichaud.com/img/misc/gem.jpg |
'''Rock on!'''
'''L'immagine è allineata a destra, con certi margini; la didascalia è
centrata; il testo scorre a destra dell'immagine.'''

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. 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.

Rock on!

L’immagine è allineata a destra, con certi margini; la didascalia è centrata; il testo scorre a destra dell’immagine.

Il markup [[<<]] interrompe lo scorrimento del testo, e fa sì che riprenda da sotto l’immagine.

%lfloat% http://pmichaud.com/img/misc/gem.jpg
'''L'immagine è allineata a sinistra, e il testo scorre a destra. Dopo il
''[@[[<<]]@]'' siamo sotto l'immagine.'''
[[<<]]
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.

L’immagine è allineata a sinistra, e il testo scorre a destra. Dopo il [[<<]] siamo sotto l’immagine.
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.

Gli stili %lframe% e %rframe% rendono un’immagine flottante e la incorniciano insieme alla sua didascalia. Il formato della cornice può essere modificato da wiki style ?:

%rframe% http://pmichaud.com/img/misc/gem.jpg | '''Rock on!'''
'''L'immagine è allineata a destra, e il testo scorre a sinistra'''

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. Lorem ipsum dolor sit amet, consectetur adipisicing
elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
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. Lorem ipsum dolor sit amet, consectetur adipisicing
elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

%cframe width=100px bgcolor=lightblue border='3px solid red' padding=20px%
http://pmichaud.com/img/misc/gem.jpg

Questo esempio mostra che succede quando non si può avere la larghezza
specificata
%cframe width=50px bgcolor=lightblue border='3px solid red' padding=20px%
http://pmichaud.com/img/misc/gem.jpg

Rock on!

L’immagine è allineata a destra, e il testo scorre a sinistra

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. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. 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. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Questo esempio mostra che succede quando non si può avere la larghezza specificata

Ridimensionare immagini

Per ridimensionare un’immagine si possono usare wikistyle, ad esempio %width=50px% o %height=50px% prima dell’indirizzo dell’immagine. Il wikistyle %thumb% equivale a %width=100px%.

%width=50px% http://pmichaud.com/img/misc/bubble.jpg \
%height=50px% http://pmichaud.com/img/misc/bubble.jpg \
%thumb% http://pmichaud.com/img/misc/bubble.jpg

Nota: Il ridimensionamento di un’immagine attraverso i wikistyle influisce solo sul modo in cui tale immagine è visualizzata; la dimensione del file non viene variata. Di conseguenza, non è una buona idea usare questo sistema per pagine piene di immagini (ad esempio una ‘galleria’).

Per utilizzare un’immagine ridimensionata come un link, bisogna prima specificarne le dimensioni, poi il collegamento, e poi chiudere con %%.

%width=134 height=100%[[http://pmwiki.org/ |
http://pmichaud.com/img/misc/pc.jpg"PmWiki"]]%%

Per aprire il link in una nuova finestra, bisogna inserire %newwin% prima delle dimensioni.

%newwin%%width=134 height=100%[[http://pmwiki.org/ |
http://pmichaud.com/img/misc/pc.jpg"PmWiki"]]%%

Le immagini rimpicciolite con %thumb% possono essere inserite in cornici e rese flottanti, oppure possono essere usate come link.

%lframe thumb% [[http://pmichaud.com/img/misc/bubble.jpg |
http://pmichaud.com/img/misc/bubble.jpg"Son tutte bolle di sapone"]] |
[-Bolla-]
%lframe thumb% http://pmichaud.com/img/misc/pc.jpg"Graffe graffette" |
[-Graffette-]
%lframe thumb% [[DocumentationIndex |
http://pmichaud.com/img/misc/gem.jpg"Visita l'indice della
documentazione"]] | [[DocumentationIndex | [-Rock On-]]]

Bolla

Graffette

?
Rock On ?

Link sotto forma di immagini

Per utilizzare un’immagine come link, bisogna indicarla al posto del testo nel markup del collegamento. Esempio:

[[Links | http://pmichaud.com/img/2003/atc-1.gif"Informazioni sui link"]]

Note

Un file contenente un’immagine, ma senza la corretta estensione può essere visualizzato aggiungendo un’ ”estensione falsa” all’indirizzo. Per esempio, se l’immagine è http://example.com/script/tux, si può aggiungere una query finta che concluda l’indirizzo con l’estensione corretta (per esempio, http://example.com/script/tux?format=.png). Se non è possibile usare query, allora un’alternativa possibile sono i riferimenti, ad esempio http://example.com/script/tux#file.png.
È possibile specificare dimensioni relative in percentuale

%width=10pct% http://pmichaud.com/img/misc/bubble.jpg \
%height=30pct% http://pmichaud.com/img/misc/bubble.jpg

Si può inserire testo, come le didascalie, all’interno di una cornice

>>lframe width=130px<<
%thumb width=130% [[http://pmichaud.com/img/misc/bubble.jpg |
http://pmichaud.com/img/misc/bubble.jpg"Le mille bolle blu"]] | [--Lunga
didascalia per un'immagine come [[http://pmichaud.com/img/misc/bubble.jpg |
la bolla]]. Serve solo per far vedere un po' di testo che riempie la
cornice.--]
>><<

Lunga didascalia per un’immagine come la bolla. Serve solo per far vedere un po’ di testo che riempie la cornice.

Si può inserire una tabella di immagini, ciascuna con la sua didascalia, in una lista numerata

Non si può usare una tabella semplice, perché le immagini, apparentemente, non possono avere una didascalia all’interno di una tabella semplice (Esempio 1). Sembra che io non possa usare le direttive per fare tabelle, dal momento che non posso farle funzionare in una lista senza terminare quest’ultima e quindi alterare la numerazione degli elementi che seguono (Esempio 2).

Le direttive per tabelle devono iniziare dalla prima colonna:

Esempio 1

# Primo elemento
## Sottolivello - primo elemento
   || border=0 align=center
   ||
http://pmichaud.com/img/misc/pc.jpg"Graffette"
| '''Figura 1''' ||
%width=50pct%http://pmichaud.com/img/misc/pc.jpg"Graffette"
| '''Figura 2''' ||
## Sottolivello - secondo elemento
# Secondo elemento

Primo elemento
1. Sottolivello - primo elemento
  | Figura 1 | Figura 2
2. Sottolivello - secondo elemento
Secondo elemento

Nota che la didascalia (indicata dalla barra verticale) non viene riconosciuta, e viene mostrata la barra.

Esempio 2

# Primo elemento
## Sottolivello - primo elemento
(:table border=0 align=center
margin-left:4em :)
(:cellnr:)
http://pmichaud.com/img/misc/pc.jpg"Graffette"
| '''Figura 1'''
(:cell:)
%width=50pct%http://pmichaud.com/img/misc/pc.jpg"Graffette"
| '''Figura 2'''
(:tableend:)
## Sottolivello - secondo elemento
(:table border=0 align=center
padding-left:4em :)
(:cellnr:)
http://pmichaud.com/img/misc/pc.jpg"Graffette"
| '''Figura 1'''
(:cell:)
%width=50pct%http://pmichaud.com/img/misc/pc.jpg"Graffette"
| '''Figura 2'''
(:tableend:)
# Secondo elemento

Primo elemento
1. Sottolivello - primo elemento

Figura 1

Figura 2

Sottolivello - secondo elemento

Figura 1

Figura 2

Secondo elemento

Usa gli stili per indentare, e riprendi a mano la numerazione della lista (vedi Wiki styles).

From IF Italia - Il Wiki della Interactive Fiction Italiana

PmWikiMan: Immagini

Come inserire immagini nelle pagine

Didascalie e immagini floating

Ridimensionare immagini

Link sotto forma di immagini

Note

Esempio 1

Esempio 2