The Open Guide to London: the free London guide - Differences between Version 5 and Version 4 of Using Images

Version 5	Version 4
== Line 0 ==	== Line 0 ==
== How to put pictures in your pages on the OpenGuides ==	== How to put pictures in your pages on Grubstreet ==
== Line 4 ==	== Line 4 ==
<center><kbd><img src="http://grault.net/grubstreet/pictures/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 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 12 ==	== Line 12 ==
<center><kbd><img src="http://grault.net/grubstreet/pictures/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 20 ==	== Line 20 ==
=== Positioning ===	=== Positioning ==
== Line 23 ==	== 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 25 ==	== 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 29 ==	== Line 29 ==
	<small>
== Line 32 ==
edit_type='Normal edit'

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></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></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>

your image here

</nowiki>

Obviously, replace "right" with "left" if need be. Use the margin setting to adjust how much blank space to surround the image.