Immagini

< Collegamenti | Indice documentazione | Regole per la formattazione >

autori (base)

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: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'''

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

links

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

Lunga didascalia per un'immagine come 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

http://www.website.com

e il vostro username è

username

il path all'interno del sistema (non quello http) per il vostro sito potrebbe essere:

/home/users/~username/public_html

Se il vostro wiki è installato in quella che sembra la directory root

/pmwiki

allora il path alla directory che contiene i file caricati sarà

/home/users/~username/public_html/pmwiki/uploads

anziché solamente

/pmwiki/uploads

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

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

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 ?

< Collegamenti | Documentation index | Regole per la formattazione >

Traduzione di PmWiki.Images - Pagina originale: PmWikiIt.Images - Backlinks
Ultime modifiche:
PmWikiIt.Images: September 10, 2011
PmWiki.Images: November 27, 2022