Images and other Media: Difference between revisions
Gerald Chi (talk | contribs) Created page with "__NOTOC__ ===Basic Instructions for Inserting Images=== Only images that have been uploaded to Wiki doc can be used. To upload images, use the upload page. ..." |
Gerald Chi (talk | contribs) mNo edit summary |
||
Line 166: | Line 166: | ||
| Palace of Westminster || [[Image:Humanbody.jpg|thumb|none|100px|From the Thames]] || <tt><nowiki>[[Image:Humanbody.jpg|thumb|none|100px|From the Thames]]</nowiki></tt> | | Palace of Westminster || [[Image:Humanbody.jpg|thumb|none|100px|From the Thames]] || <tt><nowiki>[[Image:Humanbody.jpg|thumb|none|100px|From the Thames]]</nowiki></tt> | ||
|---- | |---- | ||
| Buckingham Palace || [[Image: | | Buckingham Palace || [[Image:Humanbody.jpg|thumb|none|100px|Queen's home]] || <tt><nowiki>[[Image:Humanbody.jpg|thumb|none|100px|Queen's home]]</nowiki></tt> | ||
|} | |} | ||
Revision as of 05:41, 2 September 2013
Basic Instructions for Inserting Images
Only images that have been uploaded to Wiki doc can be used. To upload images, use the upload page. You can find the uploaded image on theimage list.
What it looks like | What you type |
---|---|
A picture: | A picture: [[Image:humanbody.jpg]] |
With alternative text: | With alternative text: [[Image:humanbody.jpg|Anatomy]]
|
Floating to the right side of the page and with a caption:
|
Floating to the right side of the page and with a caption: [[Image:humanbody.jpg|frame|Anatomy]]
|
Floating to the right side of the page without a caption: | Floating to the right side of the page ''without'' a caption: [[Image:humanbody.jpg|right|Anatomy]]
|
Linking directly to the description page of an image: | Linking directly to the description page of an image: [[:Image:humanbody.jpg]]
(such as any of the ones above) also leads to the description page |
Linking directly to an image without displaying it: | Linking directly to an image without displaying it: [[media:humanbody.jpg|Anatomy]]
|
Using the div tag to separate images from text (note that this may allow images to cover text): | Example: <div style="display:inline; width:220px; float:right;"> Place images here </div> |
Using wiki markup to make a table in which to place a vertical column of images (this helps edit links match headers, especially in Firefox browsers): | Example: {| align=right |- | Place images here |} |
See the Wikidoc's image use policy as a guideline used on Wikidoc.
All information on this page is attributed to Wikipedia and its contributors
More Detailed Instructions for Inserting Images and its Syntax
Type
- "thumbnail" or "thumb": Image is scaled down to a standard, user specified width, by default 180 pixels, and a box is added around the image. If a caption is written, it is shown below the image. Image defaults to placement on the 'right' unless overridden with the 'Location' attribute (see above).
- "frame": Original image size is preserved, and a box is added around the image. If a caption is written, it is shown below the image.
- (nothing specified): Original image size is preserved, no border is added around the image. If a caption is written, it is not shown.
- "border": Same as if nothing is specified, but a border is added around the image.
Location
- "right": Image including its box is placed on the right side of the page. The article text that follows the image flows around the image.
- "left": Image including its box is placed on the left side of the page. The article text that follows the image flows around the image.
- "center": Image including its box is placed in the center of the page. The article text that follows the image is placed below the image.
- "none": Image including its box is placed on the left side of the page. The article text that follows the image is placed below the image.
Size
- "100px": Scales the image down to make it 100 pixels wide. Replace any number for 100. If you specify "thumbnail" and a value here, this value will take precedent. If the image is already smaller than your specified value, the image stays at its size.
- "100x200px": Scales the image to be no wider than 100 pixels and no higher than 200 pixels. Image will keep its original aspect ratio
Caption
Any element which cannot be identified as one of the above is assumed to be caption text.
New advanced syntax for inserting images
The new syntax is backward compatible, so articles don't have to be changed. In the syntax [[Image:filename|options]] (e.g. [[Image:Humanbody.jpg|thumb|100px|left|Anatomy]] 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, sizepx, thumbnail (thumb), frame, andalternate (caption) text.
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, but this seems to appear only if thumbnail is specified. If there are two or more unknown options, the last one upstages the rest:[[Image:Humanbody.jpg|thumb|Anatomy|200px|right|Human Body]] (shown on the right).
Here is the description of the options other than the caption text:
- right
- The image is right-aligned, and text floats to the left of the image: [[Image:Humanbody.jpg|right|70px|]] (shown on the right).
- left
- The image is left aligned, and text floats to the right of the image: [[Image:Humanbody.jpg|left|70px|]] (shown on the left).
- center
- The image is centered, and...the text following the image starts below it: [[Image:Humanbody.jpg|center|70px|]] (shown above).
- none
- The image is put at the left, and...the text following does not float to the right (or to the left, obviously), and starts below it: [[Image:Humanbody.jpg|none|70px|]] (shown above).
- Notes:
- The above four options are incompatible. When used combined, the last one overrides the rest: [[Image:Humanbody.jpg|none|right|center|left|70px|]] (shown on the left).
- 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:Humanbody.jpg|70px|right]] (shown on the 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:Humanbody.jpg|thumb|This text is not displayed.|70px|left|]] (shown on the left) and [[Image:Humanbody.jpg|thumb|This text is displayed.|70px|right]] (shown on the right).
- sizepx
- This option renders a version of the image that's [size] pixels wide (e.g. [[Image:Humanbody.jpg|right|50px|]] shown on the right). Height is computed to keep (i.e. the shape of the image)
- 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.
- This means the server does all the work of changing the image size, not the web browser of the user. By having the server do all the work means faster downloading of pages. It also means that larger images can be stored on the server without any slowdown by the browser (especially on dial up telephone lines.) Only the data for the actual size on the page is transmitted.
- From MediaWiki 1.5 the default thumbnail width can be set in the preferences, so it is recommended not to specify "px", in order to respect the users' preferences (unless, for a special reason, a specific size is required regardless of preferences, or a size is specified outside the range of widths 120–300px that can be set in the preferences).
- 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
- When there are two or more "size" options, only the last one is valid: [[Image:Humanbody.jpg|right|50px|80px]] (shown on the right).
- thumbnail, thumb
- The thumbnail (thumb) option generates a 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:Humanbody.jpg|thumbnail|left|100px|]] (shown on the left) and [[Image:Humanbody.jpg|thumb|Anatomy]] (shown on the right). Note: thumbnail (thumb) cannot be used in lists.
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.jpg|right|thumb|100px|This is a puzzle, and take a look at it in [[Media:tst.jpg|the actual size]].]] (shown on the right).
- frame
- 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:Humanbody.jpg|frame|thumbnail|50px|Anatomy]].
With none of the options other than sizepx and alternate (caption) text, an embedded image is rendered inline.
text text text text text text [[Image:Humanbody.jpg|150px|Anatomy]] text text text text text [[Image:tst.jpg|100px|This is a puzzle.]] text text text text
gives
text text text text text text text text text text text text text text text
The option none can be used to have thumbnails without left- or right-alignment. This is probably most useful for tables. This is an example:
How to use none | ||
---|---|---|
London's palaces | ||
Palace of Westminster | [[Image:Humanbody.jpg|thumb|none|100px|From the Thames]] | |
Buckingham Palace | [[Image:Humanbody.jpg|thumb|none|100px|Queen's home]] |
It is also possible to include links in the caption text, e.g.:
[[Image:Humanbody.jpg|right|thumbnail|This is the [[Palace of Westminster]] in London]]
Just make sure the number of opening and closing square brackets are right. One extra or missing would mean the entire image syntax line would not work.
Additional caption formatting options are possible.
[[Image:Humanbody.jpg|right|thumbnail|<div align="center">This is <span style="color: green">the </span><br /> [[Palace of Westminster]]<br /> '''in <span style="color: red">London</span>'''</div>]]
All of the normal text formatting options work.
How Do I Insert a Whole Bunch of Pictures in Gallery like format?
This is another example of preparing gallery like format. Pictures are larger and whole gallery is centered;
Another example of image gallery preparation
Image A: Femoral artery and branches right femoral artery territory |
Image B: Femoral-triangle Femoral-triangle and more description) |
Image C: | Image D: |
The same style gallery for two images
Image A: Autopsy of brain showing right middle cerebral artery territory stroke |
Image B: Same image; infarct area (blue shading) and midline shift (arrow) |
How Do I Keep All The Text From Floating Around The Image? How Can I Get The Text To Begin Again Below the Image? Cancelling The 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.
- <br style="clear:both" />
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:
- <br clear="all" />
The same code can be issued by using template {{Clr}} or {{-}} in certain namespaces (En, meta).
Linking To A Page That Has A Detailed Description Of The Image
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:humanbody.jpg|humanbody]] which yields: humanbody