The Open Guide to London: the free London guide - Differences between Version 12 and Version 1 of Using Images
| Version 12 | Version 1 |
|---|---|
| == Line 0 == | == Line 0 == |
| == How to put pictures in your pages on the OpenGuides == |
== How to put pictures in your pages on Grubstreet == |
| == Line 2 == | |
|
''Please refer to the [[Wiki Etiquette]] page for our policy on use of images.'' |
|
| == Line 6 == | == Line 4 == |
|
<center><kbd><img src="http://openguides.org/img/example_image.png" width="150" height="150" alt="Example Image"></kbd></center> |
<center><kbd><nowiki><img src="http://grault.net/grubstreet/pictures/example_image.png" width="150" height="150" alt="Example Image"></nowiki></kbd></center> |
| == Line 10 == | == Line 8 == |
|
<center><img src="http://openguides.org/img/example_image.png" width="150" height="150" alt="Example Image"></center> |
<center><img src="http://grault.net/grubstreet/pictures/example_image.png" width="150" height="150" alt="Example Image"></center> |
| == Line 12 == | == Line 10 == |
|
Note that the image has a thin black border (or should do; if you can't see it, your browser can't handle stylesheets properly). This is applied by default to make images look neater on the site. If the picture you're using already has a border, or a transparent background, you can turn the border off by inserting the phrase <kbd>''class="n"''</kbd> : |
Note that the image has a thin black border (or should do; if you can't see it, your browser can't handle stylesheets properly). This is applied by default to make images look neater on the site. If the picture you're using already has a border, or a transparent background, you can turn the border off by inserting the phrase <kbd>''<nowiki>class="n"</nowiki>''</kbd> : |
| == Line 14 == | == Line 12 == |
|
<center><kbd><img src="http://openguides.org/img/example_image.png" width="150" height="150" alt="Example Image" class="n"></kbd></center> |
<center><kbd><nowiki><img src="http://grault.net/grubstreet/pictures/example_image.png" width="150" height="150" alt="Example Image" class="n"></nowiki></kbd></center> |
| == Line 18 == | == Line 16 == |
|
<center><img src="http://openguides.org/img/example_image.png" width="150" height="150" alt="Example Image" class="n"></center> |
<center><img src="http://grault.net/grubstreet/pictures/example_image.png" width="150" height="150" alt="Example Image" class="n"></center> |
| == Line 22 == | == Line 20 == |
|
=== Positioning === |
=== Positioning == |
| == Line 25 == | == Line 23 == |
|
<kbd><div style="float:left; margin:10px"> your image here </div></kbd> |
<kbd><nowiki><div style="float:left; margin:10px"> your image here </div></nowiki></kbd> |
| == Line 27 == | == Line 25 == |
|
Obviously, replace "left" with "right" if need be. Use the margin setting to adjust how much blank space to surround the image. |
Obviously, replace "right" with "left" if need be. Use the margin setting to adjust how much blank space to surround the image. |
| == Line 30 == | == Line 28 == |
|
<i>Please only embed pictures you know to be copyright-free, or your own pictures. I'd suggest always stating a credit and copyright ownership if at all possible to avoid problems.</i> |
---- <small> |
| == Line 34 == | |
|
edit_type='Minor tidying' |
|
| == Line 37 == | |
|
host='82.10.32.38' |
|
| == Line 39 == | |
|
major_change='0' |
|
| == Line 44 == | |
|
summary='technical details of how to include an image' |
How to put pictures in your pages on Grubstreet
It's very simple, and follows the traditional HTML way of doing things. Entering this:
</nowiki>Will produce this:
Note that the image has a thin black border (or should do; if you can't see it, your browser can't handle stylesheets properly). This is applied by default to make images look neater on the site. If the picture you're using already has a border, or a transparent background, you can turn the border off by inserting the phrase <nowiki>class="n"</nowiki> :
</nowiki>produces:
Please make sure that you always include ALT text for the image, so that people reading the site with text-only browsers aren't adversely affected.
=== Positioning ==
If you want the image to "float" on the left or the right of the page, you can use styling: simply enclose your image tag in the following tags:
<nowiki>
Obviously, replace "right" with "left" if need be. Use the margin setting to adjust how much blank space to surround the image.
See also: Text Formatting Examples
List all versions