Immagini
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''' |
[[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%% |
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. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. |
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. 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. |
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 |
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-]]] |
Graffette |
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 esempiohttp://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 |
|
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 |
|