diff options
author | release <release@524c5546-5005-0410-9a3e-e25e191bd360> | 2009-02-14 21:26:38 +0000 |
---|---|---|
committer | release <release@524c5546-5005-0410-9a3e-e25e191bd360> | 2009-02-14 21:26:38 +0000 |
commit | f3caf953a8839c088e331867b171c54131588ce1 (patch) | |
tree | 187a81885c36322eef0ddfd5f5f034bf74e67fd9 /wikilib.d/PmWiki.Images | |
parent | 3e33335df1dc2a1a5d22b87367910a7c37bd9df7 (diff) | |
download | pmwiki.svn-f3caf953a8839c088e331867b171c54131588ce1.tar.bz2 |
git-svn-id: svn://pmwiki.org/pmwiki/trunk@2277 524c5546-5005-0410-9a3e-e25e191bd360
Diffstat (limited to 'wikilib.d/PmWiki.Images')
-rw-r--r-- | wikilib.d/PmWiki.Images | 19 |
1 files changed, 10 insertions, 9 deletions
diff --git a/wikilib.d/PmWiki.Images b/wikilib.d/PmWiki.Images index de981bae..0c2ac2cf 100644 --- a/wikilib.d/PmWiki.Images +++ b/wikilib.d/PmWiki.Images @@ -1,11 +1,12 @@ -version=pmwiki-2.1.1 ordered=1 urlencoded=1 -agent=Mozilla/4.0 (compatible; MSIE 6.0; Windows NT 5.0; .NET CLR 1.1.4322) -author= -csum= -host=80.129.137.105 +version=pmwiki-2.2.0 ordered=1 urlencoded=1 +agent=Mozilla/5.0 (X11; U; Linux i686; en-US; rv:1.8.1.19) Gecko/20081216 Ubuntu/8.04 (hardy) Firefox/2.0.0.19 +author=Petko +charset=ISO-8859-1 +csum=+$EnableLinkPageRelative +host=81.65.14.164 keywords=graphics, pictures, photos name=PmWiki.Images -rev=56 -targets=PmWiki.DocumentationIndex,PmWiki.Uploads,PmWiki.InterMap,PmWiki.Links,PmWiki.WikiStyles -text=!!Placing images in pages%0a%0aTo place an image into a page, enter the address (url) of the image into the markup text. Any ''alternate text'' (used for tooltips and for browsers that do not display images) is placed in double quotes immediately following the image url.%0a%0a(:markup:) [=%0ahttp://www.pmichaud.com/img/misc/pc.jpg"Paper clips"%0aPaper clips are fun to work with.%0a=]%0a%0aImages 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. %25note%25 (See [[#notes|Notes]] below for image files that lack extensions.)%0a%0aTo 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]]@].%0a%0aTo have an image link to another location, use the image as the link text as in [@[[http://www.pmwiki.org | Attach:image.jpg"PmWiki"]]@].%0a%0a!! Captions and floating images%0a%0aA caption can be added to an image using a vertical brace and the caption text.%0a%0a(:markup:) [=%0ahttp://www.pmichaud.com/img/misc/pc.jpg"Paper clips" | '''Figure 1'''%0a=]%0a%0aNormally, images are displayed "in line" with the surrounding text. To left or right-align an image with text wrapping around it, use the [@%25lfloat%25@] or [@%25rfloat%25@] [[WikiStyles]].%0a%0a(:markup:) [=%0a%25lfloat%25 http://www.pmichaud.com/img/misc/gem.jpg | '''Rock on!'''%0aThe image is left-aligned, and the text wraps on the right side of the image.%0a%0aLorem 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. %0a=]%0a%0aThe [@[[%3c%3c]]@] markup breaks floating text, and the text continues at the bottom of the image.%0a%0a(:markup:) [=%0a%25lfloat%25 http://www.pmichaud.com/img/misc/gem.jpg%0aThe image is left-aligned, and the text wraps on the right side of the image. The text after the ''[@[[%3c%3c]]@]'' markup continues below the image.%0a[[%3c%3c]]%0aLorem 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. %0a=]%0a%0aUse the [@%25lframe%25@] or [@%25rframe%25@] styles to float an image and place a frame around the image and its caption:%0a%0a(:markup:) [=%0a%25rframe%25 http://www.pmichaud.com/img/misc/gem.jpg | '''Rock on!'''%0aThe image is right-aligned, and the text wraps on the left side of the image.%0a%0aLorem 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.%0a%0a%25cframe width=100px bgcolor=lightblue%25 http://www.pmichaud.com/img/misc/gem.jpg%0a=]%0a%0aUse [@%25center%25@] to center an image. Use [@%25right%25@] to right align an image, without floating it.%0a%0a(:markup:) [=%0a%25center%25http://www.pmichaud.com/img/misc/pc.jpg"Paper clips" | Paper clips are fun to work with %0a%0a%25right%25 http://www.pmichaud.com/img/misc/gem.jpg | Rock on!%0a=]%0a%0a!!Resizing images [[#resizing]]%0a%0aTo resize an image, use [@%25width=50px%25@] or [@%25height=50px%25@] in front of an image. The [@%25thumb%25@] wikistyle is a helpful shortcut for [@%25width=100px%25@].%0a%0a(:markup:) [=%0a%25width=50px%25 http://www.pmichaud.com/img/misc/bubble.jpg \%0a%25height=50px%25 http://www.pmichaud.com/img/misc/bubble.jpg \%0a%25thumb%25 http://www.pmichaud.com/img/misc/bubble.jpg%0a=]%0a%0aResizing an image only affects how it is displayed in a browser; it does not reduce the transfer size of the image itself.%0a%0aResized images using [@%25thumb%25@] can also be floated with frames, as well as made into links.%0a%0a(:markup:) [=%0a%25lframe thumb%25 [[http://www.pmichaud.com/img/misc/bubble.jpg | http://www.pmichaud.com/img/misc/bubble.jpg"Burst the bubble"]] | [-Bubble-]%0a%25lframe thumb%25 http://www.pmichaud.com/img/misc/pc.jpg"Clip the ticket" | [-Paper Clips-]%0a%25lframe thumb%25 [[DocumentationIndex | http://www.pmichaud.com/img/misc/gem.jpg"Visit the Documentation Index"]] | [[DocumentationIndex | [-Rock On-]]]%0a=]%0a%0a[[#notes]]%0a!!!Notes%0a* '''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@].%0a%0a!!!See also%0a* [[Cookbook:BackgroundImages]] - adding background images to divisions, tables and table cells. %0a%0a!!!Credits%0aThe images on this page were obtained from http://www.flickr.com and are redistributed under a Creative Commons License.%0a%0a%25trail%25 %3c%3c|[[DocumentationIndex]]|>>%0a(:keywords graphics, pictures, photos:) -time=1142416738 +rev=163 +targets=PmWiki.DocumentationIndex,PmWiki.Links,PmWiki.Uploads,PmWiki.InterMap,PmWiki.WikiStyles +text=(:Summary:Placing images in pages:)%0aTo place an image into a page, enter the address (url) of the image into the markup text. %0aAny ''alternate text'' (used for tooltips and for browsers that do not display images) is placed in double quotes immediately following the image url.%0aA caption can follow separated by a vertical bar (|), and may include simple formatting%0a%0a(:markup:)%0ahttp://pmichaud.com/img/misc/pc.jpg"Paper clips" | [- %25newwin%25 [[ (Wikipedia:Paper_clips | Paper clips ]] are ''fun'' to work with. -]%0a(:markupend:)%0a%0aImages can also be specified as [[upload(s)]]ed files (i.e., [@Attach:image.jpeg@]) and using [[InterMap]] links. %0aBy default PmWiki supports the following image types:%0a(:include PmWiki/Uploads#imagetypes#imagetypesend:)%0a%25note%25 (See also [[PmWiki/Uploads]] and [[#notes|Notes]] below for image files that lack extensions.)%0a%0aTo create a [[link(s)]] to an image (like [[http://pmichaud.com/img/misc/pc.jpg]] as opposed to displaying the image itself), use double brackets to mark the link, as in [@[[http://pmichaud.com/img/misc/pc.jpg]]@] or [@[[Attach:image.jpeg]]@].%0a%0aTo have an image link to another location, use the image as the link text as in %0a(:markup:)%0a[[http://pmwiki.org/ | http://pmichaud.com/img/misc/pc.jpg"PmWiki"]]|Visit '''PmWiki'''%0a(:markupend:)%0aor [@[[http://example.com|Attach:Groupname/image.jpeg]]@].%0a%0a[[#captions]]%0a!! Captions and floating images%0a%0a'''Vertical Alignment''' (such as in tables, i.e. valign)\\%0a - Fill in details here...%0a%0aA caption can be added to an image using a vertical brace and the caption text.%0a%0a(:markup class=horiz:)%0ahttp://pmichaud.com/img/misc/pc.jpg"Paper clips" | '''Figure 1'''%0a(:markupend:)%0a%0aNormally, images are displayed "in line" with the surrounding text. Use [@%25center%25@] to center an image. Use [@%25right%25@] to right-align an image.%0a%0a(:markup:)%0aLorem 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. %25center%25http://pmichaud.com/img/misc/pc.jpg"Paper clips"%25%25%0a%0aLorem 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. %25right%25 http://pmichaud.com/img/misc/gem.jpg%25%25%0a(:markupend:) %0a%0aTo left or right-align an image with text wrapping around it, use the [@%25lfloat%25@] or [@%25rfloat%25@] [[WikiStyles]]. %0a%0a(:markup:) [=%0a%25lfloat text-align=center margin-top=5px margin-right=25px margin-bottom=5px margin-left=25px%25 http://pmichaud.com/img/misc/gem.jpg | '''Rock on!'''%0a'''The image is left-aligned, with margins set; the caption is centered; the text wraps on the right side of the image.'''%0a%0aLorem 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%0aveniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea%0acommodo consequat. %0a=]%0a%0aThe [@[[%3c%3c]]@] markup breaks floating text, and the text continues at the bottom of the image.%0a%0a(:markup:) [=%0a%25lfloat%25 http://pmichaud.com/img/misc/gem.jpg%0a'''The image is left-aligned, and the text wraps on the right side of the image. The text after the ''[@[[%3c%3c]]@]'' markup continues below the image.'''%0a[[%3c%3c]]%0aLorem 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. %0a=]%0a%0aUse the [@%25lframe%25@] or [@%25rframe%25@] styles to float an image and place a frame around the image and its caption. The frame can be formatted via wikistyles:%0a%0a(:markup:) [=%0a%25rframe%25 http://pmichaud.com/img/misc/gem.jpg | '''Rock on!'''%0a'''The image is right-aligned, and the text wraps on the left side of the image.'''%0a%0aLorem 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.%0a%0a%25cframe width=100px bgcolor=lightblue border='3px solid red' padding=20px%25 http://pmichaud.com/img/misc/gem.jpg%0a%0aExample to show failure to fully apply width setting:-%0a%25cframe width=50px bgcolor=lightblue border='3px solid red' padding=20px%25 http://pmichaud.com/img/misc/gem.jpg%0a=]%0a%0aUse [@%25block rframe%25@] to set off multiple images and caption text to be stacked vertically in a right-floating frame.%0a%0a(:markup:) [=%0a%25block rframe width=300px%25http://pmichaud.com/img/misc/gem.jpg\\%0aLorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.\\\%0ahttp://pmichaud.com/img/misc/bubble.jpg\\%0aLorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.%25%25%0a%0aText subsequent to the defined block wraps to the left of the frame. 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.%0a%0a=]%0a%0a!!Resizing images [[#resizing]]%0a%0aTo resize an image via wikistyles, use [@%25width=50px%25@] or [@%25height=50px%25@] in front of an image. The [@%25thumb%25@] wikistyle is a helpful shortcut for [@%25width=100px%25@].%0a%0a(:markup:) [=%0a%25width=50px%25 http://pmichaud.com/img/misc/bubble.jpg \%0a%25height=50px%25 http://pmichaud.com/img/misc/bubble.jpg \%0a%25thumb%25 http://pmichaud.com/img/misc/bubble.jpg%0a=]%0a%0aNote: 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'.%0a%0aIf you want a resized image within a link, you have to specify the size before the link as well as close it off with a [=%25%25=].%0a%0a(:markup:)%0a%25width=134 height=100%25[[http://pmwiki.org/ | http://pmichaud.com/img/misc/pc.jpg"PmWiki"]]%25%25%0a(:markupend:)%0a%0aTo open the link in new window, you place [=%25newwin%25=] before the size specification.%0a%0a(:markup:)%0a%25newwin%25%25width=134 height=100%25[[http://pmwiki.org/ | http://pmichaud.com/img/misc/pc.jpg"PmWiki"]]%25%25%0a(:markupend:)%0a%0aResized images using [@%25thumb%25@] can also be floated with frames, as well as made into links.%0a%0a(:markup:) %0a%25lframe thumb%25 [[http://pmichaud.com/img/misc/bubble.jpg | http://pmichaud.com/img/misc/bubble.jpg"Burst the bubble"]] | [-Bubble-]%0a%25lframe thumb%25 http://pmichaud.com/img/misc/pc.jpg"Clip the ticket" | [-Paper Clips-]%0a%25lframe thumb%25 [[DocumentationIndex | http://pmichaud.com/img/misc/gem.jpg"Visit the Documentation Index"]] | [[DocumentationIndex | [-Rock On-]]]%0a(:markupend:)%0a%0a[[links]]%0a!!! Images as [[PmWiki/links]]%0aTo use an image as a link specify an image instead of text in the [[PmWiki/link(s)]] markup.%0aViz%0a(:markup:)%0a[[PmWiki/Links | http://pmichaud.com/img/2003/atc-1.gif"Information about wiki links"]]%0a(:markupend:)%0a%0a[[#notes]]%0a!!!Notes%0a* '''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://example.com/script/tux@], add a fake query string on the end with the desired extension (e.g., [@http://example.com/script/tux?format=.png@]). If query strings are unsuitable, a fragment identifier should work, e.g. [@http://example.com/script/tux#file.png@].%0a%0a* Relative width is possible by using percentages.%0a(:markup:)%0a%25width=10pct%25 http://pmichaud.com/img/misc/bubble.jpg \%0a%25height=30pct%25 http://pmichaud.com/img/misc/bubble.jpg %0a(:markupend:)%0a%0a* '''Flowing text is possible, like captions, within a frame'''%0a(:markup:)%0a>>lframe width=130px%3c%3c%0a%25thumb width=130%25 [[http://pmichaud.com/img/misc/bubble.jpg | http://pmichaud.com/img/misc/bubble.jpg"Burst the bubble"]] | [--Long caption for an image like [[http://pmichaud.com/img/misc/bubble.jpg | the bubble]]. This is just to show some text flowing within the frame.--]%0a>>%3c%3c%0a(:markupend:)%0a%0a%0a'''Unable to upload images?''' If you get messages telling you that the upload was not able to complete for some reason, here's something to check. If your web host has your web site%0a-> [=http://www.website.com=]%0awith username%0a-> ''username''%0athe system path (not http) to your website could be at%0a-> /home/users/~username/public_html%0aIf you have your wiki installed at what you think is the system's root directory%0a-> /pmwiki%0ayour system's path to the wiki uploads directory might actually be%0a-> /home/users/~username/public_html/pmwiki/uploads%0ainstead of the simpler%0a-> /pmwiki/uploads%0aThat's how I was able to get [[mine -> mailto:ispinn aatt gmail ddoott com]] working.%0a%0a!!!See also%0a* [[Cookbook:Images]] - adding image galleries, automatic thumbnails, background images and more. %0a%0a!!!Credits%0aThe images on this page were obtained from http://flickr.com and are redistributed under a Creative Commons License.%0a%0a(:keywords graphics, pictures, photos:)%0a%0a>>faq%3c%3c [[#faq]]%0a%0aQ: Is it possible to link an image on PmWiki without using a fully qualified URL?%0aA: Yes. For images that are attachments, the general format is [@Attach:Groupname/image.gif@]. To link to an image that is on the same server, use [@Path:/path/to/image.gif@].%0a%0aQ: Can I attach a client image file on PmWiki?%0aA: Yes, see [[PmWiki/Uploads]] .%0a%0aQ: How can I include a page from another group that contains an attached image?%0aA: 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@]. %0a%0aQ: 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?%0aA: Because the CSS for '''headings''' such as ! contains an element '''clear:both''' which forces this behaviour. Redefine the CSS locally if you want to stop this happening, but I think the bottom border (that underlines the heading) would need further re-definition. I just use bolding for the title, and 4 dashes below [=-=]--- to separate a new section, and it saves the effort of fiddling with the core definitions.%0a%0aUnlike the '''lframe''' and '''rframe''' directives, '''cframe''' does not fully honour the width setting. While the frame itself resizes to match the request, the enclosed image does not, and retains its original width. Effect is the same in IE and Fx. I've added an example beneath the standard example above.%0a%0aQ: Is it possible to disallow all images? I already disabled uploads but I also want to disallow external images from being shown on my wiki pages.%0a%0aA: Yes, add to config.php @@DisableMarkup('img');@@%0a%0aQ: How can I make it so that when I place an image in a page, the block of text it is in is a %3cp> (paragraph) rather than a %3cdiv> (division)?%0a%0aA: If you just want it to happen for a single image (instead of all), then%0atry putting [@[==]@] at the beginning of the line, as in:%0a%0a->[@[==] http://www.pmwiki.org/pub/pmwiki/pmwiki-32.gif@]%0a%0aHaving [@[==]@] at the beginning of a line forces whatever follows to%0abe part of a paragraph.%0a%0aQ: Is there any way to use relative paths for images?%0aA: See Cookbook:RelativeLinks and $EnableLinkPageRelative.%0a%0aQ: Is there a way to attach a BMP and have it display rather than link?%0aA: PmWiki supports @@.bmp@@ images out of the box. If you insist on using an uppercase extension see Cookbook:AddImageType.%0a%0aQ: Is there a way to have a table to the left or right of an image?%0aA: Yes, see [[(http://www.pmwiki.org/wiki/Test/)TableAndImage]].%0a +time=1234643581 |