Adding Images in a Plone Site

_{(Size: 7k)}

See also this Blog entry on Image scaling

How To Add Images

1. When saving images in a folder you should use a suffix like .jpg or .gif e.g. image.jpg
2. Reduce the size of your image to a manageable size. Anything over 100 kb uses up bandwidth and makes the page slower to load. You can reduce the size of your image by using a photo editor. See Resize Images... You can download a free editor from Google called Picassa, but photoshop is definitely the choice for keeping the definition clear whilst resizing.... When saving, click "save for web". This reduces their size even more.
3. Select 'add image' in the drop down menu. It is advisable to add images in a separate /images folder. If you add images to the home folder it will get too cluttered. In your contentimages folder click on add item menu, and 'add image'.

4. Press browse to locate image on your hardrive. Give it a suitable title and short name e.g. Vases.

5. Note: The image also needs to be published or made visible in order to be visible on the live site, don't leave it private.

Using Kupu I selected inline and then centered the image

3. Add to Page

Now the image is in the site you can add it to a page.

• Press the cursor on the page where you would like it to be.

• Using Kupu and FCK editor press the image button on the edit panel at the top of the page (Kupu has a picture of a tree, FCK editor a picture of a mountain)
  
• In Kupu you can use the navigation bar on left to find the image within the different folders of the site. See Kupu documentation....
  
• FCK editor works on the same principle: press browse to find image.
  
• We have been using reStructured test also, you can find out how to add images using reStructured text with this reStructured Text tutorial...

Advanced Image features

1. Don't hotlink images. This is when you create a link to another site from a picture to your page from another site. It just confuses people when they find themselves in another site. (Even a text link should somehow warn the user they are about to enter another site).

2. You can select an image to be inline (in the middle) or on left or right. Be ware that align left and right often create problems of compatibility with other browsers. The image here is clearly align-left, and you may notice a black border that shouldnt be there, this is due to kupu. Basically in Kupu CSS (code which defines the graphical look of things) there is an 'image-left' and 'image-right' class which you can modify to remove the border. Recent versions of Kupu also give you a predefines size.

3. The best way of displaying many images is by using table. Dreamweaver is ideal for this. Aternatively FCKeditor is the better option, unless you configure Kupu to stop stripping out HTML.

4. If you right click the mouse button over a picture and click properties you can see its size and location within the site.

Photo Credit: Ed Silverton