OK – I can see you are half way there in as much as you have uploaded some images onto the server.

The images have to be on the server to link to them...
You want to store the images in the images/stories folder if you look at the backend CMS login and click on Media Manager you will see at a glance how the files and folders are structured and where your images are.

This is also a place where you can upload images from you hard drive onto the server – simply navigate to the folder you want to upload the file into (I recommend the stories folder, or create a folder within the stories folder*) I recommend you give the images easy to find names such at “park_01” “park_02” “town_01” “Midwich_comnty_cntre_01” etc. as oppose to the name given them by your camera. (this will save a lot of trouble looking for images in list form latter on).

The images you have already uploaded are way too big to display on the website and while you can resize them within the page they will still take too long to load. You need to resample the images to around 200 – 250px wide at 76dpi with photoshop or whatever picture editor you have.

If you want people to be able to view a larger version of the image that fills the screen as the ones you have now do – then name the smaller resample image thumb (i.e. “my_image_01” for the large version and “my_image_thumb_01” for smaller version of the same pic) You can then make links from the small images in the site content direct to the full screen version and set it to open in a new window (more on that latter when we get into inserting links).

OK now you have your image on the server...
you need to identify where it is i.e. the URL for the image. You have two ways to establish what the URL the first and simplest is that you uploaded the image and so you know what its called and where it is. The URL here is for an image called park_01.jpg and you have uploaded it to the server in the “stories” directory and we know that the stories directory is located in the images directory – So, the location of this image is:- “your domain” (inc. the http:// bit) forward slash “images”- forward slash “stories” – forward slash “the file name” please compare this string to the URL above and I’m sure it will be clear. i.e http://www.yourdomain/images/stories/park_01.rpg

Now to place your image...
you want to place it in the page you are editing – there are two ways to do this, however I find the best way with the most control over the image and how it is placed within your page is as follows:

• On a page opened in the CMS page editor (front or back end – no difference) place your cursor at the front of the line of text you want it place the image (at start of the text maybe)
• find the little insert image button in the editor toolbar (it’s a picture of a small tree) click on this to open a pop up box with tabs.
• Type the image URL in (if you have the URL typed correctly a preview of the image will show) give the image a description and a title as this helps with search engines and makes your site more accessible to the visually impaired (their browser can read out the title and description for them)
• Click the Appearance tab I recommend you select align left or align right for the text to wrap around the image with the image placed to left or right of the text.
• Tick the constrain proportions box and I suggest you set the image width to 150px or 200px (you might get away with 250px – it can be a bit trial and error

If you look at www.nemag.org.uk and scroll down to some pictures – this site has its front page in blog view (as a news site it works best that way) and the images here are set to 200px wide- you can see if they were any wider they would not fit in the columns – what would happen then is the images would still display at their full width and push all the modules/boxes to the right) so it will fit well in blog views and the newsletter on your site without effecting other elements.

• Finally if you are having the text wrap around the image type 5 into the vertical space and the horizontal space boxes so your text is not sitting right on the edge of the image.
• Click insert – and you are done.

Be aware the view of the image and text in the editor box is not exactly as it will appear on screen.

TIP: when finished – click apply instead of save then open a new window or tab and view the page – if its not how you wanted it (image a little big or too small) simply pop back to your open editor page click the image and you can resize it by holding and dragging the corners (click apply – refresh the window or tab that is at the site page to check it again and repeat until happy) click save to save and exit the editor when you are happy with the look of the page.

*To create a new folder with in the stories folder – simply navigate till you are in the stories folder – type the name of your new folder in the create directory text box (ie “town_views", "our_projects") (I recommend you do not use spaces in the name if you want a space use an underscore as sample above) and click the create button at the top of the page.