Help:Using Images

http://assets.openuru.org/wiki/icons/help-48x48.png

Partly for security reasons but mostly to allow "assets" to be reused in other parts of the website, OpenURU.org does not allow direct upload of images or other media files to the wiki. The use of images is still highly recommended but the process is slightly different from most other wikis using the MediaWiki software. This page provides a tutorial with examples on using images in the OpenURU.org wiki.

Access Scope

Image files are stored in a special "assets" area of the website. They are accessible across the entire OpenURU.org domain (such as the OpenURU.org forums or project subdomain websites) but cannot be linked to ("hotlinked") from external websites.

Uploading of Files

Files can only be uploaded by wiki sysops: You should contact Mac_Fife or admin with links to arrange for your files to be placed on the server. Once this is done, you will be given the URLs to use to reference these files.

Copyright

Please note: In requesting a file upload, you are responsible for ensuring that use of the image on the OpenURU.org website is permitted under any copyright or licensing agreement: That you are the copyright owner of the image, or there is a licence agreement in place permitting re-use of the image or that the image is otherwise free from restrictions on re-publication.

Including images

In-line images

In-line images are ones which appear directly on your page (rather than just as links to images).

Do not use the Embedded File button on the editing toolbar to add images to your page. This will not work. Instead, simply insert the URL you were given when the file was uploaded with no "wiki markup".

If your image is relatively small and you want it to appear at one side of your page with text flowing round it, then you can "float" it using <div>...</div> tags, as in this example, which floats the image "MyImage.png" to the left side of the page, leaving 10 pixels clear space all round the image:

<div style="float: left; padding: 10px">http://assets.openuru.org/wiki/MyImage.png</div>

Note that MediaWiki can be quite fussy about upper and lower case, so make sure that you use capitals exactly as they were used in the filename.

Linked images

Very large images cannot easily be included in a wiki page, so it is instead necessary to link to the image instead. For this, you can use the External Link button on the editing toolbar and insert the URL and link text:

[http://assets.openuru.org/wiki/MyImage.png Click for my picture] which will be rendered as Click for my picture

Simply enclosing the URL inside square brackets will give a link like: [1]

Thumbnails

Since we are not using the in-built image handling of MediaWiki, if you would like to use a "thumbnail" image as a link to a larger image (probably a good idea as it lets other users preview the image before deciding to load it) then the thumbnailing must be done manually. In this case you should supply two images: The full-size image and a smaller, reduced quality image. There is no fixed guidance on the appropriate size for a thumbnail, as it will depend on how it is to be used in your pages, but in general:

• For most cases, an image of 200-300 pixels in both height and width will be adequate and still allow text to flow around the image.
• Keep thumbnail images to no more than 600 pixels in width. Larger images my not render completely depending on browser width resulting in a messy page layout.

If you have difficulty in producing a thumbnail from your image you can ask a sysop to do this for you when the file is uploaded.

You now need to include the thumbnail in your document and link it to the full-size image. This combines the techniques from the previous two sections; in a single link we give firstly the URL of the large image and then the URL of the thumbnail, with only a single space between the two URLs (that bit is quite important):

[http://assets.openuru.org/wiki/demo/stats_large.png http://assets.openuru.org/wiki/demo/stats_small.png]

http://assets.openuru.org/wiki/demo/stats_small.png

Example

This will be shown something like the illustration to the right (this is a working demo, so the the larger image will open if you click on the thumbnail image).

Notice the little blue arrow, which normally denotes an external link: Well, this is really in internal link, so if this arrow annoys you or it spoils the appearance of your page, you can get rid of it by wrapping the whole thing with a little bit of in-line CSS: <span class="plainlinks">...</span>

So, our fully developed thumbnail link, with external arrow removed becomes:

<span class="plainlinks">[http://assets.openuru.org/wiki/demo/stats_large.png http://assets.openuru.org/wiki/demo/stats_small.png]</span>

Remember, that is a single space between the URLs not a carriage return as it might appear from what you see above. And then you could float the thumbnail as we showed in the In-line Images section. Phew! It looks a bit daunting, but just remember the way it was built up (and check back here for a reminder!). You don't have to go the whole way, but if you do, that final link will show like this:

http://assets.openuru.org/wiki/demo/stats_small.png