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

Version 10 Version 9
== Line 2 ==
Is there an openguides way to upload images somewhere so they can be referred to in pages or do they have to exist somewhere else on the web?

== Line 33 == == Line 31 ==
edit_type='Normal edit'
edit_type='Minor tidying'
== Line 36 == == Line 34 ==
host='84.12.11.166'
host='82.69.47.157'
== Line 38 == == Line 36 ==
major_change='1'
major_change='0'
== Line 43 ==
summary=''

How to put pictures in your pages on the OpenGuides

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:

Example Image

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:

Example Image

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.

See also: Text Formatting Examples


List all versions