Colocando imagens na página
para colocar uma imagem ná página, entre com o endereço (url) da figura na parte de edição. Qualquer texto adicional (usado para descrição e para browsers que não mostram imagens) deve ser colocado entre dupla apóstrofe ('') logo após o endereço da figura.
http://www.pmichaud.com/img/misc/pc.jpg"Clipes de Papel" Clipes de papel são divertidos de trabalhar. |
 Clipes de papel são divertidos de trabalhar. |
Imagens podem também ser especificadas como arquivos anexos (ex.: [Attach:image.jpeg Δ] e usando links InterMap?. Alguns arquivos que terminam em .gif, .jpg, .jpeg, ou .png serão tratados como uma imagem automáticamente. (Veja Notas para arquivos que não possuem extensão)
Para criar um link para uma imagem (como em http://www.pmichaud.com/img/misc/pc.jpg ao contrário de mostrar a própria imagem), use o link entre duplo colchete, como em [[http://www.pmichaud.com/img/misc/pc.jpg]] ou [[Attach:image.jpeg]].
Para ter um link de imagem de outra localização, use a imagem como o link, como em
[[http://pmwiki.org | Attach:image.jpg"PmWiki"]] ou [[http://example.com|Attach:Groupname/image.jpeg]].
Subtítulos e imagens flutuantes
Alinhamento Vertical (como em tabelas)
- Preencher detalhes aqui...
Um subtítulo pode ser adicionado a uma imagem usando um barra vertical e o texto do subtítulo.
http://www.pmichaud.com/img/misc/pc.jpg"Clipes de Papel" | '''Figura 1''' |
Figura 1 |
Normalmente, imagens são mostradas "em linha" com o texto acerca. use %center% para centralizar uma umagem. Use %right% para alinhar a direita.
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://www.pmichaud.com/img/misc/pc.jpg"Clipes de papel"%% 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://www.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. |
Para alinhar a esquerda ou a direita com uma margem em volta, use o %float% ou %rfloat% WikiStyles?.
%lfloat text-align=center margin-top=5px margin-right=25px margin-bottom=5px margin-left=25px% http://www.pmichaud.com/img/misc/gem.jpg | '''Agite!!''' '''A imagem está alinhada a esquerda, com margens; o subtítulo está centralizado; os envoltórios do lado direito da imagem.''' 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. |
 Agite!! A imagem está alinhada a esquerda, com margens; o subtítulo está centralizado; os envoltórios do lado direito da imagem. 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. |
O tag [[<<]] quebra a flutuação de texto, e o texto continua em baixo da imagem.
%lfloat% http://www.pmichaud.com/img/misc/gem.jpg '''A imagem é alinhada à esquerda, e o envoltório na direita da imagem. O texto após o tag ''[@[[<<]]@]'' continua abaixo da imagem. [[<<]] 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. |
'A imagem é alinhada à esquerda, e o envoltório na direita da imagem. O texto após o tag |
Use os estilos %lframe% ou %rframe% para flutuar uma imagem e colocar um frame em volta da imagem e subtítulo. O frame pode ser formatado via Wiki Styles?:
%rframe% http://www.pmichaud.com/img/misc/gem.jpg | '''Agite!!''' '''A imagem está alinhada a direita, e o envoltório do texto a esquerda da imagem.''' 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://www.pmichaud.com/img/misc/gem.jpg |
Agite!! A imagem está alinhada a direita, e o envoltório do texto a esquerda da imagem. 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. |
Redimensionando as imagens
To resize an image via wikistyles, 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 |
 |
Note: Resizing an image via wikistyles only affects how it is displayed in a browser; it does not reduce the transfer size of the image itself - hence resizing via wikistyles is not an acceptable method of generating a page-full of images, or 'gallery'.
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 |
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. - Relative width is possible by using percentages.
%width=10pct% http://www.pmichaud.com/img/misc/bubble.jpg \ %height=30pct% http://www.pmichaud.com/img/misc/bubble.jpg |
| |
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.
<< Links | Documentação | Regras de fomatação de texto >>
É possível linkar uma imagem no Pm Wiki sem usar uma URL completa?
Sim. Para imagens que são anexos, o formato da marcação seria Attach:Groupname/image.gif. Para fazer um link para uma imagem no mesmo servidor, use Path:/caminho/até/imagem.gif.
Why doesn't the pct specification work in conjunction with lfloat and rfloat?
Can I attach a client image file on Pm Wiki?
Yes, see Uploads
How can I include a page from another group that contains an attached image?
Include the page in the normal way, ie (:include GroupName.Pagename:). In the page to be included (that contains the image) change Attach:filename.ext to Attach:{$Group}/filename.ext.
Why, if I put an image with rframe or rfloat and immediatly after that I open a new page section with ! the section title row is below the image instead of on the left side?
Category: Images