PmWiki | PmWikiIt / Immagini

<< Collegamenti | Documentation Index | Regole per la formattazione >>

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.

http://pmichaud.com/img/misc/pc.jpg"Graffette"
È sempre un piacere lavorare con le
graffette.

È sempre un piacere lavorare con le graffette.

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

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

(vedere anche Uploads e Notes ? per i file che contengono immagini ma sono privi di estensione.)

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 | Attach:image.jpg"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 WikiStyle %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 wikistyle ?:

%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').

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

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

Altre informazioni

Cookbook:BackgroundImages - immagini di sfondo per riquadri, tabelle e celle.

Credits

Le immagini su questa pagina sono ottenute da http://flickr.com e sono rese disponibili sotto licenza Creative Commons.

<< Collegamenti | Documentation Index | Regole per la formattazione >>

È possibile collegare un'immagine senza specificare un'intera URL?

Sì. Per le immagini che sono state caricate come allegati, il formato da seguire è: Attach:NomeGruppo/image.gif. Per collegare un'immagine che si trova sullo stesso server, usare Path:/path/to/image.gif.

Perché pct non si può usare con lfloat e rfloat?

%rfloat width=10pct% http://pmichaud.com/img/misc/bubble.jpg"rfloat width
10%" 
%width=10pct% http://pmichaud.com/img/misc/bubble.jpg"width 10%"
[[<<]]
%lfloat height=20pct% http://pmichaud.com/img/misc/bubble.jpg"lfloat
height 20%" 
%height=20pct% http://pmichaud.com/img/misc/bubble.jpg"height 20%"
[[<<]]
%width=10pct rfloat% http://pmichaud.com/img/misc/bubble.jpg"width 10%
rfloat" 
%height=20pct lfloat% http://pmichaud.com/img/misc/bubble.jpg"height 20%
lfloat"

Posso allegare un file immagine che si trova nel mio computer?

Sì, vedi Caricare file.

Come faccio per includere una pagina di un altro gruppo che contiene un'immagine allegata?

La pagina va inclusa normalmente, ad es. (:include NomeGruppo.NomePagina:). In essa, l'immagine va inserita in questo modo Attach:{$Group}/filename.ext.

Come mai, se metto un'immagine con rframe o rfloat e subito dopo apro una nuova sezione con !, allora il titolo si trova sotto l'immagine anziché a lato?

Perché lo stile CSS per i titoli come ! contiene l'elemento clear:both che ha questo effetto. È possibile ridefinire il CSS localmente per evitare questo comportamento, ma penso che il bordo in basso (che sottolinea il titolo) andrebbe anche esso ridefinito. Io uso il grassetto per il titolo, e 4 trattini sotto ---- per separare due sezioni, così mi risparmio la modifica delle definizioni di base di PmWiki.

cframe non rispetta esattamente la larghezza richiesta, cosa che invece fanno lframe e rframe. La cornice, infatti, si ridimensiona come richiesto, ma l'immagine mantiene la sua larghezza originale. L'effetto è lo stesso in IE e Firefox. Ho aggiunto un esempio qui sopra.

Come faccio a inserire una tabella di immagini, ciascuna con la sua didascalia, in una lista numerata? Non posso 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).

Non è granché

# 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

Traduzione di PmWiki.Images - Pagina originale: PmWikiIt.Images - Backlinks
Ultime modifiche:
PmWikiIt.Images: 29/10/2007 ore 16:59 CDT
PmWiki.Images: 30/07/2008 ore 17:08 CDT