Images within tables
Images can be embedded into tables. A quick advanced formatting is to use simple tables.
For example,
||= [[image http://upload.wikimedia.org/wikipedia/commons/thumb/b/b5/Zepper-BK_117-C2-%28EC145%29-SchweizerischeRettungsflugwacht.jpg/180px-Zepper-BK_117-C2-%28EC145%29-SchweizerischeRettungsflugwacht.jpg]] ||
||= [[size smaller]] The Eurocopter EC 145 (image embedded from [*http://en.wikipedia.org/wiki/Aircraft Wikipedia] on 17 August 2009) [[/size]] ||
This code embeds an image from Wikipedia within a 1x2 table. The first cell displays the image centred within the cell. The second cell is used for adding a title and reference, with the text centred, and displayed using a smaller font, as per the Standard Rules.
|
The Eurocopter EC 145 (image embedded from Wikipedia on 17 August 2009) |
Placing images (horizontally)
By default, images appear to the left of the page or table. In order to force the image to a particular position (e.g. to the center or to the right), you can do as follows:
- The straightforward way is to use a position cue within the image code, right after the initial squared parentheses. Use "=" to center the image, "<" to force it to the left, and ">" to force it to the right. This code will work both in normal pages and within tables.
For example,
[[=image http://upload.wikimedia.org/wikipedia/commons/thumb/8/88/IA_Dhruv_Berlin-08.jpg/180px-IA_Dhruv_Berlin-08.jpg]]
This code embeds an image from Wikipedia, centering it in the page.
Placing images (horizontally) within simple tables
You can center an image by wrapping it within a one-cell simple table. Because the table gets centered by default, it will also center the image, automatically. This is the simplest way of centering an image, but it only works well when the size of the table does not exceed that of the image (i.e. when the table is not made bigger for other reasons, such as having a long text in it).
For example,
|| [[image http://upload.wikimedia.org/wikipedia/commons/thumb/8/88/IA_Dhruv_Berlin-08.jpg/180px-IA_Dhruv_Berlin-08.jpg]] ||
This code embeds an image from Wikipedia within a one-cell simple table, which acts as a frame to the picture. Both the table and the picture will be centered in the page.
When a simple table is bigger than an image, the image appears towards the left of its cell. If the image is in a cell by itself, then you can use "=", "<" or ">" either after the initial double lines of the cell code or after the initial double squared-parentheses of the image code, with similar results.
For example,
||> [[image http://upload.wikimedia.org/wikipedia/commons/thumb/8/88/IA_Dhruv_Berlin-08.jpg/180px-IA_Dhruv_Berlin-08.jpg]] ||
|| [[>image http://upload.wikimedia.org/wikipedia/commons/thumb/8/88/IA_Dhruv_Berlin-08.jpg/180px-IA_Dhruv_Berlin-08.jpg]] ||
Any of these codes embeds an image from Wikipedia in a cell, forcing the image to the right. However. the first code only works on the image if there is no other competing code in the same cell (e.g. text). (Also, notice that the first way of coding still collapses the cell's top and bottom margins onto the image, but the second way of coding does not do so.)
Whenever you are using text and images within the same cell, then "=", "<" or ">" after the initial double lines of the cell code affects the text, and "=", "<" or ">" after the initial double squared-parentheses of the image code affects the image. You need to specify both codes, otherwise, they will enter in conflict and none of the codes will work appropriately.
For example,
||= [[image http://upload.wikimedia.org/wikipedia/commons/thumb/8/88/IA_Dhruv_Berlin-08.jpg/180px-IA_Dhruv_Berlin-08.jpg]] [[size smaller]] The HAL Dhruv helicopter (image embedded from [*http://en.wikipedia.org/wiki/Aircraft Wikipedia] on 2 September 2009) [[/size]] ||
||= [[=image http://upload.wikimedia.org/wikipedia/commons/thumb/8/88/IA_Dhruv_Berlin-08.jpg/180px-IA_Dhruv_Berlin-08.jpg]] [[size smaller]] The HAL Dhruv helicopter (image embedded from [*http://en.wikipedia.org/wiki/Aircraft Wikipedia] on 2 September 2009) [[/size]] ||
||= [[>image http://upload.wikimedia.org/wikipedia/commons/thumb/8/88/IA_Dhruv_Berlin-08.jpg/180px-IA_Dhruv_Berlin-08.jpg]] [[size smaller]] The HAL Dhruv helicopter (image embedded from [*http://en.wikipedia.org/wiki/Aircraft Wikipedia] on 2 September 2009) [[/size]] ||
The first code does not offer any cue about the position of the image, creates a conflict and, thus, reverts to a default presentation, placing the text after the image, both in the same line. The second code, however, centers both the image and the text. The third code is also correct, forcing the image to the right while centering the text.
The HAL Dhruv helicopter (image embedded from Wikipedia on 2 September 2009) |
The HAL Dhruv helicopter (image embedded from Wikipedia on 2 September 2009)
|
The HAL Dhruv helicopter (image embedded from Wikipedia on 2 September 2009)
|
Images as hyperlinks
Images can also act as hyperlinks (i.e. clicking on the image opens a particular website). To do so, write the following sentence after the image code: link="http://address of the page you want to open" .
For example,
||= [[image http://upload.wikimedia.org/wikipedia/commons/thumb/b/b5/Zepper-BK_117-C2-%28EC145%29-SchweizerischeRettungsflugwacht.jpg/180px-Zepper-BK_117-C2-%28EC145%29-SchweizerischeRettungsflugwacht.jpg link="*http://en.wikipedia.org/wiki/Aircraft"]] ||
||= [[size smaller]] The Eurocopter EC 145 (image embedded from [*http://en.wikipedia.org/ Wikipedia] on 17 August 2009) [[/size]] ||
This code embeds an image from Wikipedia within a 1x2 table. The first cell displays the image centred within the cell. The image itself opens the relevant page in Wikipedia. The second cell is used for adding a title and reference, with the text centred, and displayed using a smaller font, as per the Standard Rules (in this case, the referece is to the welcome page of Wikipedia, instead of to a particular page, in order to reduce redundancy).
|
The Eurocopter EC 145 (image embedded from Wikipedia on 17 August 2009) |
Images as hyperlinks to their original, full size, images
A spin-off of using images as hyperlinks, is using the image to link to the full-size original image, while using text hyperlinks to open the image in context.
For example,
||= [[=image http://upload.wikimedia.org/wikipedia/commons/thumb/8/88/IA_Dhruv_Berlin-08.jpg/180px-IA_Dhruv_Berlin-08.jpg link="*http://upload.wikimedia.org/wikipedia/commons/8/88/IA_Dhruv_Berlin-08.jpg"]] [[size smaller]] The HAL Dhruv helicopter (image embedded from [*http://en.wikipedia.org/wiki/Aircraft Wikipedia] on 2 September 2009) [[/size]] ||
This code embeds an image from Wikipedia within a one-cell table. The cell displays both the image and text centered within the cell. The image itself opens the full resolution image hosted by Wikipedia. The text appears centered, displayed using a smaller font, as per the Standard Rules (in this case, the link is to the page in Wikipedia were the image appears in context).
The HAL Dhruv helicopter (image embedded from Wikipedia on 2 September 2009)
|