So, you've uploaded an image for your wikiHow article, but you're not happy with its placement on the page? This guide will show you several advanced techniques to control where images show up on the page in relation to your text. By following the steps shown here, you will be able to place your image to the right, left, or below the text; you will also learn how to place multiple images in a row.

If all you need is guidance on basic image placement and resizing, you can find more information in How to Put a Photo in a wikiHow. For help finding freely licensed images from Flickr to use on your article, go here, and for a guide to uploading photos already saved on your computer to wikiHow, go here.

[edit] Basic Technique: Thumbnail Image

This is perhaps the easiest way to place images to the right of the text in an article; because it uses the default settings for thumbnail images, no special formatting commands are needed. This is a very common format for wikiHow articles.

[edit] Steps

Upload or import your image to wikiHow if you have not already done so.
Open your article for editing.
Move your cursor to the beginning of the line you'd like the image to appear opposite. You can place your image wherever it will be most beneficial: next to the summary, a step, a tip, or a warning. If you are placing it next to a step, tip, or warning, your cursor should follow the "#" or "*".
Insert the thumbnail code for your image at the beginning of the line. By default, thumbnails are placed to the right of the text. The standard code for a thumbnail is: [[image:Filename.png|thumb]]. You can copy this text and simply replace Filename.png with the name of your file.
Repeat these steps if you have more images.
Preview your image. You should find that the your image appears to the right of your text as shown below.
Save your page once you are satisfied with how it looks.

[edit] Advanced Technique: Align Right or Left

These steps will show you how to align images on either the right side or the left side of the page. Placing images on the right side of the page is the preferred method for wikiHows because this makes it easy to read a step and then view an image illustrating the step. Note that placing images on the left side of steps may cause problems with Firefox and especially Internet explorer (the screen shot below was taken using Safari and may not be indicative of all browsers' performance). Avoid aligning an image on the left when using numbered lists if at all possible.

[edit] Steps

Follow steps one and two from the Basic Technique guide above if you have not already done so.
Insert the code for your image as follows:
- To align your image on the right, use: [[image:Filename.png|right]].
- To align your image on the left, use: [[image:Filename.png|left]].

3. Preview your page to make sure everything looks good.

4. Don't forget to save your page when you're done!

[edit] Advanced Technique: Align Below Text

To place your image above or below a particular block of text, follow the steps below.

[edit] Steps

Follow step one from the Basic Technique guide above if you have not already done so.
Move your cursor to the end of the line you would like the image to be placed below.
Insert two line breaks " " following the end of the text, and then add your image link. The code at the end of your line should look like this: [[image:Filename.png]].
Preview your page to make sure everything looks good.
Save your page when you're satisfied with the results.

[edit]Advanced Technique: Panoramas

Use the WikiMedia Wide image template to place very wide or panorama images in articles.

[edit]Steps

Follow step one from the Basic Technique guide above if you have not already done so.
Move your cursor below the line you would like the image to be placed below.
Type the following code to add the image:
- Syntax: Usage: {{Wide image|Filename.png|width|description}}
- Example: {{wide image|1500px Pauliyas_Hongkong.jpg|1500px|A panorama of [[Wikipedia:Hong Kong|Hong Kong]]}}

A panorama of Wikipedia:Hong Kong

[edit]Tips

Many of these advanced techniques take while to learn. A good approach is to use preview frequently as you're working, and try different combinations of syntax and line breaks ( ) to achieve your desired results.
Make sure spelling and syntax is correct. Check these first if your image doesn't show up on your page.
- px after image width number
- | between elements of a statement
- correct name of your image file
You can resize your images at the same time they are aligned. Add width into your image placement code like this: [[image:Filename.png|200px|right]]. Simply replace the red 200 with your desired width.
For more information on sizing images or thumbnails and using captions, see How to Put a Photo in a wikiHow.

[edit] Warnings

Make sure that any changes you make to your image alignment don't cause problems elsewhere in the article.
Advanced image placement techniques, especially align left, may not appear the same in all browsers. When using images to illustrate the steps in an article, the best practice is to align the images on the right side or use thumbnail images (which default to right side alignment).
You may occasionally find that using some of the advanced image alignment techniques interfere with the automatic line numbering system that uses the "#" symbol. In this case you may need to number your steps manually.