head 1.2; access; symbols; locks; strict; comment @# @; 1.2 date 2006.04.11.21.31.20; author AdminUser; state Exp; branches; next 1.1; 1.1 date 2006.04.11.19.22.53; author AdminUser; state Exp; branches; next ; desc @none @ 1.2 log @none @ text @%META:TOPICINFO{author="AdminUser" date="1144791080" format="1.1" version="1.2"}% ---+ Exhaustive Test Page for TWiki.ImgPlugin The syntax for displaying an image is =%IMAGE{"foo.gif" web="%WEB%" topic="%TOPIC%" type="thumb|thumbnail|frame" align="left|center|right|none" size="nn" caption="caption text"}%= Only =%IMAGE{"name"}%= is required. The other details are optional and can be placed in any order. $ *type* : 'thumb' / 'thumbnail' or 'frame'. Causes image to be displayed with specific formatting (see below). $ *align* : 'right', 'left', 'center' or 'none'. Determines placement of the image on the page. $ *size* : {width}px or {width}x{height}px (e.g. 50x40px, would limit width to 50 and height to 40). $ *caption* : Text to be used as caption text under the image $ *web* : the Web where the image is attached. $ *topic* : The topic (within the web) where the image is attached. * Initial image name is required. * The other arguments are optional and are order independent | *Option* | *Values* | *Default* | | *web* | "<web>" | (current web) | | *topic* | "<topic>" | (current topic) | | *type* | "thumb|thumbnail|frame" | empty | | *align* | "left|center|right|none" | "right" | | *size* | "<nn>" | (image width) | | *caption* | "<caption text>" | empty | * The Wikipedia format is also supported (see [[Wikipedia:Wikipedia:Extended_image_syntax]]) %TOC% ---++ Syntax to use an image in uploaded size, with a caption To use an image as uploaded with a caption use %IMAGE{"Westminstpalace.jpg" type="frame" align="none" caption="caption text"}%. This is the syntax you should use to update images that used the original image markup of the form %IMAGE{"Westminsterpalace.jpg|caption"}%. %IMAGE{"Westminstpalace.jpg" type="frame" align="none" caption="caption text"}% ---++ Syntax for images with no automatic caption or formatting The old syntax for images without captions is =%IMAGE{"Westminstpalace.jpg|alt text"}%=. This is rendered inline, and the specified text is used as the image's ''alt'' attribute (alternate text for programs which cannot display images, such as screen readers) and as the ''title'' attribute (supplementary text, often displayed as a tool tip when the mouse is over the image). ---+++ Example %IMAGE{"Westminstpalace.jpg|alt text"}% ---++ New syntax for images %IMAGE{"Westminstpalace.jpg" type="thumb" size="100" align="left" caption="The Palace of Westminster"}% In the syntax =%IMAGE{"Westminstpalace.jpg" type="thumb" size="100" align="left" caption="The Palace of Westminster"}%= shown in the left), several options can be set when including an image. Those affect the placing of the image, its size or the way the image will be presented. The options are =right=, =left=, =center=, =none=, =_size_px=, =thumbnail= (=thumb=), =frame=, and =_alternate (caption) text_=. %IMAGE{"CLR"}% %IMAGE{"Westminstpalace.jpg" type="thumb" size="200" align="right" caption="From the Thames"}% The options can be combined, and spaces ("") are used to separate options from each other. The options can be put in any order. =%IMAGE{"Westminstpalace.jpg" type="thumb" size="200" align="right" caption="From the Thames"}%= (shown on the right). %IMAGE{"CLR"}% Here is the description of the options other than the caption text (shown on the right). %IMAGE{"CLR"}% $ *right* : %IMAGE{"Westminstpalace.jpg" align="right" size="70"}%The image is right-aligned, and text floats to the left of the image =%IMAGE{"Westminstpalace.jpg" align="right" size="70"}%= (shown on the right). %IMAGE{"CLR"}% $ *left* : %IMAGE{"Westminstpalace.jpg" align="left" size="70"}%The image is left aligned, and text floats to the right of the image =%IMAGE{"Westminstpalace.jpg" align="left" size="70"}%= (shown on the left). %IMAGE{"CLR"}% $ *center* : The image is centered, and...%IMAGE{"Westminstpalace.jpg" align="center" size="70"}%the text following the image starts below it =%IMAGE{"Westminstpalace.jpg" align="center" size="70"}%= (shown above). %IMAGE{"CLR"}% $ *none* : The image is put at the left, and...%IMAGE{"Westminstpalace.jpg" align="none" size="70"}%the text following does not float to the right (or to the left, obviously), and starts below it =%IMAGE{"Westminstpalace.jpg" align="none" size="70"}%= (shown above). %IMAGE{"CLR"}% $ *size* px : %IMAGE{"Westminstpalace.jpg" align="right" size="50"}% This option renders a version of the image that's *[size]* pixels wide (e.g. =%IMAGE{"Westminstpalace.jpg|right|50px|"}%= shown on the right). Height is computed to keep aspect ratio (image)|aspect ratio (i.e. the shape of the image).%IMAGE{"CLR"}% $ __Notes__ : Specifying a size does not just change the apparent image size using HTML; it actually generates a resized version of the image on the fly and links to it appropriately. This happens whether or not you use *size* in conjunction with *thumb*.%BR% If you specify a "frame" option the image will not be scaled, and no size specifiers will be in the HTML. The image will be rendered at full size%IMAGE{"CLR"}% $ *thumbnail*, *thumb* : %IMAGE{"Westminstpalace.jpg" type="thumbnail" align="left" size="100"}% %IMAGE{"Westminstpalace.jpg" type="thumb" caption="The Palace of Westminster"}% The *thumbnail* (*thumb*) option generates a thumbnail|thumbnail image. It is automatically resized when the "size" attribute is not specified. Without the options *left*, *center*, and *none*, the image is normally on the right. If the image has a caption text, it is displayed in the lower margin. E.g. =%IMAGE{"Westminstpalace.jpg" type="thumbnail" align="left" size="100"}%= (shown on the left) and =%IMAGE{"Westminstpalace.jpg" type="thumb" caption="The Palace of Westminster"}%= (shown on the right).%IMAGE{"CLR"}% %IMAGE{"Tst.png" align="right" type="thumb" size="100" caption="This is a globe, and take a look at it in nested"}% An "enlarge"-icon is put also in the lower margin of the thumbnail. Both the image itself and the icon link to the image description page with the image in its actual size. The icon shows the link title "Enlarge" in its hoverbox, even in cases where this term does not apply, because it leads from the enlarged image to the one with the actual size. E.g. =%IMAGE{"Tst.png" align="right" type="thumb" size="100" caption="This is a globe, and take a look at it in nested"}%= (shown on the right). %IMAGE{"CLR"}% $ *frame* : %IMAGE{"Westminstpalace.jpg" type="frame" size="50" caption="The Palace of Westminster"}% With this option, the embedded image is shown with its actual size enclosed by a frame, regardless of the "thumb" or "size" attribute, and the caption, if any, is visible in the frame. Without the options =left=, =center=, and =none=, the image is normally on the right =%IMAGE{"Westminstpalace.jpg" type="frame" size="50" caption="The Palace of Westminster"}%=. %IMAGE{"CLR"}% With none of the options other than __size__ *px* and __alternate (caption) text__, an embedded image is rendered inline.
text text text text text text
=%IMAGE{"Westminstpalace.jpg" size="150" caption="The Palace of Westminster"}%=
text text text text text
=%IMAGE{"Tst.png" size="100" caption="This is a globe."}%=
text text text text
gives text text text text text text %IMAGE{"Westminstpalace.jpg" size="150" caption="The Palace of Westminster"}% text text text text text %IMAGE{"Tst.png" size="100" caption="This is a globe."}% text text text text %IMAGE{"CLR"}% ---++ Cancelling floating-around-image mode After having had an image floating next to text, putting further text below it and again using the full width can be done with the following markup. This blocks an image from appearing next to the material following this markup, possibly due to aesthetic reasons or a change in topics. *
* For legacy =align="right"= (etc.) floating this isn't good enough, legacy browsers would ignore inline CSS. To cancel floating under all conditions the following markup (valid XHTML 1.0 transitional) works *
* The same code can be issued by using template *%IMAGE{"CLR"}%* ---++ Linking to the image description page If you want to make a link to the description page for an image, use a leading colon before "image" in an intra-wiki link, like this =%IMAGE{"STS-32_crew.jpg|STS-32 crew"}%= which yields %IMAGE{":STS-32_crew.jpg|STS-32 crew"}% %META:FILEATTACHMENT{name="100px-Tst.png" attr="" autoattached="1" comment="" date="1144788121" path="100px-Tst.png" size="14805" user="UnknownUser" version=""}% %META:FILEATTACHMENT{name="Westminstpalace.jpg" attr="" autoattached="1" comment="" date="1144783314" path="Westminstpalace.jpg" size="19790" user="Main.AdminUser" version="1"}% %META:FILEATTACHMENT{name="150px-Westminstpalace.jpg" attr="" autoattached="1" comment="" date="1144788122" path="150px-Westminstpalace.jpg" size="2925" user="UnknownUser" version=""}% %META:FILEATTACHMENT{name="100px-Westminstpalace.jpg" attr="" autoattached="1" comment="" date="1144788117" path="100px-Westminstpalace.jpg" size="1652" user="UnknownUser" version=""}% %META:FILEATTACHMENT{name="Buckingham_palace_Copyright2003KaihsuTai.jpg" attr="" autoattached="1" comment="" date="1144783356" path="Buckingham_palace_Copyright2003KaihsuTai.jpg" size="15294" user="Main.AdminUser" version="1"}% %META:FILEATTACHMENT{name="80px-Westminstpalace.jpg" attr="" autoattached="1" comment="" date="1144788120" path="80px-Westminstpalace.jpg" size="1212" user="UnknownUser" version=""}% %META:FILEATTACHMENT{name="180px-Westminstpalace.jpg" attr="" autoattached="1" comment="" date="1144788121" path="180px-Westminstpalace.jpg" size="3847" user="UnknownUser" version=""}% %META:FILEATTACHMENT{name="70px-Westminstpalace.jpg" attr="" autoattached="1" comment="" date="1144788118" path="70px-Westminstpalace.jpg" size="1093" user="UnknownUser" version=""}% %META:FILEATTACHMENT{name="200px-Westminstpalace.jpg" attr="" autoattached="1" comment="" date="1144788118" path="200px-Westminstpalace.jpg" size="4453" user="UnknownUser" version=""}% %META:FILEATTACHMENT{name="Tst.png" attr="" autoattached="1" comment="" date="1144783328" path="Tst.png" size="499" user="Main.AdminUser" version="1"}% %META:FILEATTACHMENT{name="50px-Westminstpalace.jpg" attr="" autoattached="1" comment="" date="1144788120" path="50px-Westminstpalace.jpg" size="821" user="UnknownUser" version=""}% %META:FILEATTACHMENT{name="STS-32_crew.jpg" attr="" autoattached="1" comment="" date="1144702749" path="STS-32_crew.jpg" size="49583" user="Main.AdminUser" version="1"}% @ 1.1 log @none @ text @d1 2 a2 2 %META:TOPICINFO{author="AdminUser" date="1144783373" format="1.1" version="1.1"}% In brief, the syntax for displaying an image is d4 3 a6 1 =%IMAGE{"name|type|location|size|caption"}%= d10 19 a28 4 $ *Type* : 'thumb' / 'thumbnail' or 'frame'. Causes image to be displayed with specific formatting (see below). $ *Location* : 'right', 'left', 'center' or 'none'. Determines placement of the image on the page. $ *Size* : {width}px or {width}x{height}px (e.g. 50x40px, would limit width to 50 and height to 40). $ *Caption* : Any element which cannot be identified as one of the above is assumed to be caption text. d34 1 a34 1 To use an image as uploaded with a caption use %IMAGE{"Westminstpalace.jpg|frame|none|caption text"}%. This is the syntax you should use to update images that used the original image markup of the form %IMAGE{"Westminsterpalace.jpg|caption"}%. d36 1 a36 1 %IMAGE{"Westminstpalace.jpg|frame|none|caption text"}% a41 4 See Wikipedia Image markup with HTML for an old, deprecated, way of putting a caption under the image using HTML code. Please use the new way of associating captions with images, as described on this page. See Wikipedia Captions for discussion of appropriate caption text. See Wikipedia Alternative text for images for discussion of appropriate alt text. Unfortunately, it is not possible to specify different text for these two purposes. d48 2 a49 2 %IMAGE{"Westminstpalace.jpg|thumb|100px|left|The Palace of Westminster"}% The new syntax is backward compatible, so articles don't have to be changed. In the syntax =%IMAGE{"'filename''|''options'"}%= (e.g. =%IMAGE{"Westminstpalace.jpg|thumb|100px|left|The Palace of Westminster"}%= shown in the left), several options can be set when including an image. Those affect the placing of the image, its size or the way the image will be presented. The options are =right=, =left=, =center=, =none=, =_size_px=, =thumbnail= (=thumb=), =frame=, and =_alternate (caption) text_=. d52 3 a54 2 %IMAGE{"Westminstpalace.jpg|thumb|The Palace of Westminster|200px|right|From the Thames"}% The options can be combined, and vertical bars ("|") are used to separate options from each other. The options can be put in any order. An unknown option is taken as the caption text. If there are two or more unknown options, the last one upstages the rest =%IMAGE{"Westminstpalace.jpg|thumb|The Palace of Westminster|200px|right|From the Thames"}%= (shown on the right). a56 4 %IMAGE{"Westminstpalace.jpg" type="thumb" caption="From the Thames" size="200" location="right"}% Here is the same thing in !TWiki format. =%IMAGE{"Westminstpalace.jpg" type="thumb" caption="From the Thames" size="200" location="right"}% =%IMAGE{"CLR"}% d59 4 a62 9 $ *right* : %IMAGE{"Westminstpalace.jpg|right|70px|"}%The image is right-aligned, and text floats to the left of the image =%IMAGE{"Westminstpalace.jpg|right|70px|"}%= (shown on the right). %IMAGE{"CLR"}% $ *left* : %IMAGE{"Westminstpalace.jpg|left|70px|"}%The image is left aligned, and text floats to the right of the image =%IMAGE{"Westminstpalace.jpg|left|70px|"}%= (shown on the left). %IMAGE{"CLR"}% $ *center* : The image is centered, and...%IMAGE{"Westminstpalace.jpg|center|70px|"}%the text following the image starts below it =%IMAGE{"Westminstpalace.jpg|center|70px|"}%= (shown above). %IMAGE{"CLR"}% $ *none* : The image is put at the left, and...%IMAGE{"Westminstpalace.jpg|none|70px|"}%the text following does not float to the right (or to the left, obviously), and starts below it =%IMAGE{"Westminstpalace.jpg|none|70px|"}%= (shown above). %IMAGE{"CLR"}% $ __Notes__ : %IMAGE{"Westminstpalace.jpg|none|right|center|left|70px|"}% The above four options are incompatible. When used combined, the last one overrides the rest =%IMAGE{"Westminstpalace.jpg|none|right|center|left|70px|"}%= (shown on the left).%IMAGE{"CLR"}% %IMAGE{"Westminstpalace.jpg|70px|right"}% What is between the last vertical bar and the closing brackets ("}"), void or not, is taken as the last option, and works as usual. For instance, when the last option is =right=, the image is right-aligned, and text floats to the left =%IMAGE{"Westminstpalace.jpg|70px|right"}%= (shown on the right).%IMAGE{"CLR"}% %IMAGE{"Westminstpalace.jpg|thumb|This text is not displayed.|70px|left|"}% %IMAGE{"Westminstpalace.jpg|thumb|This text is displayed.|70px|right"}% In particular, if the last option is the void text (that is, if there is nothing between the last vertical bar and the closing brackets), the caption is not displayed =%IMAGE{"Westminstpalace.jpg|thumb|This text is not displayed.|70px|left|"}%= (shown on the left) and =%IMAGE{"Westminstpalace.jpg|thumb|This text is displayed.|70px|right"}%= (shown on the right).%IMAGE{"CLR"}% d64 1 a64 1 $ *size* px : %IMAGE{"Westminstpalace.jpg|right|50px|"}% This option renders a version of the image that's *[size]* pixels wide (e.g. =%IMAGE{"Westminstpalace.jpg|right|50px|"}%= shown on the right). Height is computed to keep aspect ratio (image)|aspect ratio (i.e. the shape of the image).%IMAGE{"CLR"}% a67 1 %IMAGE{"Westminstpalace.jpg|right|50px|80px"}% When there are two or more "size" options, only the last one is valid =%IMAGE{"Westminstpalace.jpg|right|50px|80px"}%= (shown on the right).%IMAGE{"CLR"}% d69 2 a70 2 $ *thumbnail*, *thumb* : %IMAGE{"Westminstpalace.jpg|thumbnail|left|100px|"}% %IMAGE{"Westminstpalace.jpg|thumb|The Palace of Westminster"}% The *thumbnail* (*thumb*) option generates a thumbnail|thumbnail image. It is automatically resized when the "size" attribute is not specified. Without the options *left*, *center*, and *none*, the image is normally on the right. If the image has a caption text, it is displayed in the lower margin. E.g. =%IMAGE{"Westminstpalace.jpg|thumbnail|left|100px|"}%= (shown on the left) and =%IMAGE{"Westminstpalace.jpg|thumb|The Palace of Westminster"}%= (shown on the right).%IMAGE{"CLR"}% d72 1 a72 1 %IMAGE{"Tst.png|right|thumb|100px|This is a globe, and take a look at it in nested"}% An "enlarge"-icon is put also in the lower margin of the thumbnail. Both the image itself and the icon link to the image description page with the image in its actual size. The icon shows the link title "Enlarge" in its hoverbox, even in cases where this term does not apply, because it leads from the enlarged image to the one with the actual size. E.g. =%IMAGE{"tst.png|right|thumb|100px|This is a globe, and take a look at it in nested."}%= (shown on the right). d75 1 a75 1 $ *frame* : %IMAGE{"Westminstpalace.jpg|frame|thumbnail|50px|The Palace of Westminster"}% With this option, the embedded image is shown with its actual size enclosed by a frame, regardless of the "thumb" or "size" attribute, and the caption, if any, is visible in the frame. Without the options =left=, =center=, and =none=, the image is normally on the right =%IMAGE{"Westminstpalace.jpg|frame|thumbnail|50px|The Palace of Westminster"}%=. d82 1 a82 1 =%IMAGE{"Westminstpalace.jpg|150px|The Palace of Westminster"}%= d84 1 a84 1 =%IMAGE{"Tst.png|100px|This is a globe."}%= d91 1 a91 1 %IMAGE{"Westminstpalace.jpg|150px|The Palace of Westminster"}% d93 1 a93 1 %IMAGE{"Tst.png|100px|This is a globe."}% a115 6 -- Main.AdminUser - 11 Apr 2006 -- Main.AdminUser - 04 Apr 2006 d117 1 d119 2 d122 4 d127 2 a128 1 %META:FILEATTACHMENT{name="STS-32_crew.jpg" attachment="STS-32_crew.jpg" attr="" comment="" date="1144783373" path="STS-32_crew.jpg" size="9787" stream="STS-32_crew.jpg" user="Main.AdminUser" version="1"}% @