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]]. -] |
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, svg, svgz, xcf, webp # image files
See Images for the files PmWiki automatically displays as images. (vedere anche Uploads e Note 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/ | 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''' |
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 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. |
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 |
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-]]] |
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 didascalien, 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.--] >><< |
Difficoltà nel caricamento delle immagini? Se ricevete messaggi di errore, che dicono che il caricamento non è riuscito, questo consiglio può esservi utile. Se il vostro servizio di hosting vi ospita sull'indirizzo
e il vostro username è
il path all'interno del sistema (non quello http) per il vostro sito potrebbe essere:
Se il vostro wiki è installato in quella che sembra la directory root
allora il path alla directory che contiene i file caricati sarà
anziché solamente
Così questa persona è riuscita a risolvere i suoi problemi.
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.
È 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 |
|
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 |
|
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 |
|
Posso fare in modo che, quando inserisco un'immagine, il testo stia in un <p> (paragrafo) anziché in un <div> (divisione)?
Se questo deve accadere solo per un'immagine (e non per tutte), allora prova inserendo [==]
all'inizio della linea. Esempio:
[==] http://www.pmwiki.org/pub/pmwiki/pmwiki-32.gif
Infatti [==]
all'inizio di una linea impone che ciò che segue sia parte di un paragrafo.
Si possono usare path relativi per le immagini?
Vedi Cookbook:RelativeLinks .
Si può allegare un BMP e mostrarne il contenuto, non sotto forma di link?
PmWiki supporta i file .bmp
. Il problema potrebbe essere l'estensione scritta in maiuscolo. Vedi: Cookbook:AddImageType.
È possibile inserire una tabella a destra o a sinistra di un'immagine?
Sì, vedi TableAndImage?
Traduzione di PmWiki.Images -
Pagina originale: PmWikiIt.Images -
Backlinks
Ultime modifiche:
PmWikiIt.Images: September 10, 2011, at 09:52 AM
PmWiki.Images: March 03, 2022, at 12:48 AM