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

Version 12	Version 11
== Line 31 ==
<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>
== Line 34 ==	== Line 33 ==
edit_type='Minor tidying'	edit_type='Normal edit'
== Line 37 ==	== Line 36 ==
host='82.10.32.38'	host='195.110.84.91'
== Line 39 ==	== Line 38 ==
major_change='0'	major_change='1'

How to put pictures in your pages on the OpenGuides

Please refer to the Wiki Etiquette page for our policy on use of images.

It's very simple, and follows the traditional HTML way of doing things. Entering this:

<img src="http://openguides.org/img/example_image.png" width="150" height="150" alt="Example Image">

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 class="n" :

<img src="http://openguides.org/img/example_image.png" width="150" height="150" alt="Example Image" class="n">

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:
<div style="float:left; margin:10px"> your image here </div>

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