Add, replace or remove images from your site

This tutorial applies to Beetlebrow web sites built with Plone 3.x which use the Beetlebrow BB Website plug-in. If you're not sure whether that applies to you, ask us.

We have created your web site with the idea of making it as easy as possible for you to manage it yourself, and as hard as possible for you to get it wrong. This is especially true of managing the images that appear in your site. We've created a mechanism to allow you to add as many images as you like to the smaller column on your web pages. This is generally on the right, though on some site and some areas of some sites, it may be on the left (and some sites may have two narrow columns on either side of the main content column!).

Whatever the configuration of columns, the largest one holds the text and is known as the content column. The other narrower column(s) on the left or right are the image and boxout columns, and exist to hold boxes of information and images.

Adding an image

1. Go to the page where you want to add an image.
2. Click on the "add new" drop down menu on the right hand side of the grey edit bar around the content of your site and select "web image".
   
3. Give the image a title, and a description if you want. If your site is set up to display image captions, the description will become the caption. Adding a description can also help make the page a little bit more Google-friendly, boosting your site's SEO.
4. Select the column to add the image to. Generally column B is the right column, as this is the one on the right. However, if you have a two column page and the image fails to show up once you've added it, follow the instructions below for replacing an image and when you reach the "image edit" screen you are on now (when you are adding a new image), select column A instead.
5. Leave the image size as "use site default" unless you know what you're doing and have a reason to change it. We have set the site default to fit the columns widths of your site. This mechanism means you can upload any size of image, and if it is too large for the space, our software will crunch it down to the right size to fit the space, while maintaining excellent image quality. Please avoid uploading images larger than 1MB though, as this will quickly use up your disk space allowance, resulting in extra charges.
6. If you want the image to zoom to a larger size, check the "use fancy zoom" box.
7. If you want the image to be a link to another page of the site or elsewhere on the web, copy the address of the page to which you want your image to point into the "link" field.
   
8. To copy the address of a web page, open a new tab in your browser, go the the page in question and click on the location bar of your browser (this is where it says "http://www.beetlebrow.co.uk/what-do-you-need/etc - the page address). If the address does not highlight, double or treble click until it does. Now click ctrl C (or command C in the Mac), to copy the address. Go to your image window, click in the link field and press ctrl V (or command V in the Mac) to paste the address into the field.
9. Now click the save button to upload your image and save it with its settings. This may take a little while if the image is a large one.
10. When the image is uploaded, click on the "state: public draft" drop down menu on the right hand side of the grey edit bar and select "publish".
11. Navigate to the page in question and your image should now display at the right size in the appropriate column on your page.
    

Replacing an image

1. If you have an image on a page which you'd like to replace, just go the page in question and click on the "contents" tab on the top left of the grey edit bar.
2. Click on the image title from the list that appears
3. Now click on the "edit" tab on the top left of the grey edit bar.
4. Click on the "Replace this image" button and then click in the "browse" field beside it.
5. Find the replacement image on your hard drive.
6. Now click the "save" button to upload the new image to the server in place of the old one. This may take a while if the image is large.
7. The image may seem not to have been replaced when you view the page. This is simply because the old version is cached in your browser. People visiting the page afresh will see the new image. To force your browser to display the new image hold down the ctrl key and press the F5 key (in Internet Explorer) or hold the down ctrl and shift keys (command and shift in the Mac) and press "R".
   

Removing an image

1. To remove an image, go to the page in question and click on the "contents" tab on the top left of the grey edit bar.
2. Check the box beside the image in question.
3. Click the "delete" button below the list of images and/or boxes.
4. When the page reloads the image has gone.
   

Re-ordering the images and boxes within a column

1. If you'd like your images and/or boxes to appear in a different order within the column, go to the page in question and click on the "contents" tab on the top left of the grey edit bar.
2. The images and boxes appear in the same order in the listing displayed as on the site. To re-order them you just drag them up and down the list. However, you must do this carefully as follows or it won't work.
3. Click on the four dots :: on the right hand side of the image or box you'd like to move.
4. Drag it up or down the list being very careful not to stray out of the four dots :: column while doing so.
   
5. If you don't remain within this column, the order changes won't "stick" and neither will others you try afterwards. If this happens, just reload/refresh the page and try again.
6. There's no save button as the order changes as soon as you release the mouse. Click on the "view" tab on the left hand side of the grey edit bar to see the new order.