Cantieri : Images browse

Inserire immagini nelle pagine

Per mettere una immagine in una pagina, inserisci l'indirizzo (url) dell'immagine nel markup testo. Qualsiasi alternate text (usato per i tooltips e per i browsers che non fanno visualizzare le immagini ) è posto nelle doppie parentesi quadre immediatamente dopo l'url dell'immagine .

http://www.pmichaud.com/img/misc/pc.jpg"Paper clips"
Paper clips are fun to work with.

Paper clips are fun to work with.

Le immagini possono essere anche specificate come files upload (i.e., Attach:image.jpg) e usati collegamenti InterMap . Qualsiasi file con estensione .gif, .jpg, .jpeg, or .png sarà trattato automaticamente come un'immagine. (Vedi Notes per file immagini che mancano di estensione .)

Per creare un collegamento link ad una immagine(come http://www.pmichaud.com/img/misc/pc.jpg che non visualizza l'immagine stessa ), usa le doppie parentesi quadre per segnare il collegamento, come in [[http://www.pmichaud.com/img/misc/pc.jpg]] o [[Attach:image.jpg]].

Per avere il collegamento immagine ad un'altra locazione, usa l'immagine come testo di collegamento come in [[http://www.pmwiki.org | Attach:image.jpg"PmWiki"]].

Captions and floating images

A caption can be added to an image using a vertical brace and the caption text.

http://www.pmichaud.com/img/misc/pc.jpg"Paper clips" | '''Figure 1'''

Figure 1

Normally, images are displayed "in line" with the surrounding text. To left or right-align an image with text wrapping around it, use the %lfloat% or %rfloat% WikiStyles.

%lfloat% http://www.pmichaud.com/img/misc/gem.jpg | '''Rock on!'''
The image is left-aligned, and the text wraps on the right side of the
image.

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!

The image is left-aligned, and the text wraps on the right side of the image.

The [[<<]] markup breaks floating text, and the text continues at the bottom of the image.

%lfloat% http://www.pmichaud.com/img/misc/gem.jpg
The image is left-aligned, and the text wraps on the right side of the
image. The text after the ''[@[[<<]]@]'' markup continues below the
image.
[[<<]]
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.

The image is left-aligned, and the text wraps on the right side of the image. The text after the [[<<]] markup continues below the image.
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.

Use the %lframe% or %rframe% styles to float an image and place a frame around the image and its caption:

%rframe% http://www.pmichaud.com/img/misc/gem.jpg | '''Rock on!'''
The image is right-aligned, and the text wraps on the left side of the
image.

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%
http://www.pmichaud.com/img/misc/gem.jpg

Rock on!

The image is right-aligned, and the text wraps on the left side of the image.

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.

Use %center% to center an image. Use %right% to right align an image, without floating it.

%center%http://www.pmichaud.com/img/misc/pc.jpg"Paper clips" | Paper clips
are fun to work with 

%right% http://www.pmichaud.com/img/misc/gem.jpg | Rock on!

Paper clips are fun to work with

Rock on!

Resizing images

To resize an image, use %width=50px% or %height=50px% in front of an image. The %thumb% wikistyle is a helpful shortcut for %width=100px%.

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

Resizing an image only affects how it is displayed in a browser; it does not reduce the transfer size of the image itself.

Resized images using %thumb% can also be floated with frames, as well as made into links.

%lframe thumb% [[http://www.pmichaud.com/img/misc/bubble.jpg |
http://www.pmichaud.com/img/misc/bubble.jpg"Burst the bubble"]] |
[-Bubble-]
%lframe thumb% http://www.pmichaud.com/img/misc/pc.jpg"Clip the ticket" |
[-Paper Clips-]
%lframe thumb% [[DocumentationIndex |
http://www.pmichaud.com/img/misc/gem.jpg"Visit the Documentation Index"]] |
[[DocumentationIndex | [-Rock On-]]]

Bubble

Paper Clips

Rock On

Notes

An image file that lacks a correct extension can be displayed by addition of a "false" extension to the URL. For example, if the url is http://www.example.com/script/tux, add a fake query string on the end with the desired extension (e.g., http://www.example.com/script/tux?format=.png). If query strings are unsuitable, a fragment identifier should work, e.g. http://www.example.com/script/tux#file.png.

Credits

The images on this page were obtained from http://www.flickr.com and are redistributed under a Creative Commons License.

<< Links | DocumentationIndex | Text formatting rules >>

This page may have a more recent version on pmwiki.org: PmWiki:Images, and a talk page: PmWiki:Images-Talk.

Images

Home

Navigazione

I Moduli

Inserire immagini nelle pagine

Captions and floating images

Resizing images

Notes

See also

Credits