Obrazki

Aby edytować należy się zalogować
Logowanie | Nowy Edytor

Historia zmian strony PmWikiPl.Images

Ukryj drobne zmiany - Wyświetl zmiany wyglądu

10-01-2008, godz. 16:01 wprowadził Ubique -
Dodano linię 1:
(:title Obrazki:)
10-01-2008, godz. 16:00 wprowadził Ubique -
Zmieniono linie 3-4 z:
Aby umiescić obrazek na stronie wpisz adres (url) obrazka w markup text. ''Tekst alternatywny'' (tekst "chmurki" urzywany w przeglądarkach niewyświetlających obrazków) wprowadza się pomiędzy podwójny apostrof zaraz za adresem url.
na:
Aby umiescić obrazek na stronie wpisz adres (url) obrazka. ''Tekst alternatywny'' (tekst "chmurki" używany w przeglądarkach niewyświetlających obrazków) wprowadza się pomiędzy cudzysłów zaraz za adresem url.
Zmieniono linie 10-11 z:
Images can also be specified as [[upload(s)]]ed files (i.e., [@Attach:image.jpg@]) and using [[InterMap]] links. Any file that ends in .gif, .jpg, .jpeg, or .png will be automatically treated as an image. %note% (See [[#notes|Notes]] below for image files that lack extensions.)
na:
Obrazki can also be specified as [[upload(s)]]ed files (i.e., [@Attach:image.jpg@]) and using [[InterMap]] links. Any file that ends in .gif, .jpg, .jpeg, or .png will be automatically treated as an image. %note% (See [[#notes|Notes]] below for image files that lack extensions.)
10-01-2008, godz. 15:57 wprowadził Ubique -
Dodano linie 1-92:
!!Publikowanie obrazków

Aby umiescić obrazek na stronie wpisz adres (url) obrazka w markup text. ''Tekst alternatywny'' (tekst "chmurki" urzywany w przeglądarkach niewyświetlających obrazków) wprowadza się pomiędzy podwójny apostrof zaraz za adresem url.

(:markup:) [=
http://www.pmichaud.com/img/misc/pc.jpg"Paper clips"
Paper clips are fun to work with.
=]

Images can also be specified as [[upload(s)]]ed files (i.e., [@Attach:image.jpg@]) and using [[InterMap]] links. Any file that ends in .gif, .jpg, .jpeg, or .png will be automatically treated as an image. %note% (See [[#notes|Notes]] below for image files that lack extensions.)

To create a [[link(s)]] to an image (like [[http://www.pmichaud.com/img/misc/pc.jpg]] as opposed to displaying the image itself), use double brackets to mark the link, as in [@[[http://www.pmichaud.com/img/misc/pc.jpg]]@] or [@[[Attach:image.jpg]]@].

To have an image link to another location, use the image as the link text as 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.

(:markup:) [=
http://www.pmichaud.com/img/misc/pc.jpg"Paper clips" | '''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]].

(:markup:) [=
%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.
=]

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

(:markup:) [=
%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.
=]

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

(:markup:) [=
%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
=]

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

(:markup:) [=
%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!
=]

!!Resizing images [[#resizing]]

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

(:markup:) [=
%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.

(:markup:) [=
%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-]]]
=]

[[#notes]]
!!!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@].

!!!See also
* [[Cookbook:BackgroundImages]] - adding background images to divisions, tables and table cells.

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

%trail% <<|[[DocumentationIndex]]|>>
(:keywords graphics, pictures, photos:)

Stronę modyfikowano 10-01-2008, godz. 16:01
Stronę utwrzył: Ubique.
Ostatnie zmiany: Ubique.