Images in Plone

Libraries are encouraged to use images in the Web sites to add interest and creativity. There are three ways to use and display images in Plone:

• Several images can be uploaded to a folder and displayed as a slideshow or an exhibition. Suggested uses: digital photos of an event, or a pictorial tour of the library.
• An image can be added to a news item. This image will be placed in the upper right corner of the text of the news item. An image caption can be added. The image is displayed in the News Smart Folder and in the RSS feed.
• One or more images can be inserted into a page. Each image can be different sizes and be aligned within the text differently.
  

A digital camera is a good investment for libraries. Library staff can take pictures of an event and post them immediately on their Web site. Digital cameras make JPEG files of the images that are generally high resolution resulting in a large file size and a large size dimensionally. To use these images on the Web site, they will have to be resized.

Resizing images using Plone

When an image is uploaded, Plone generates a number of images of different sizes and saves these images with the original image. These are made available in a drop-down list when the user selects the image to insert. The user can select to insert the original image (which is usually too large to display properly on the page), or any of the other sizes.

• Mini, Preview and Large are recommended for digital photographs.
• Mini will display on approximately 1/8 of the screen
• Preview will display on approximately 1/4 of the screen
  
• Large will display on the whole screen

Resizing images using another program

The best way to handle image resizing is to use a graphics program, such as Photoshop, outside of Plone. These stand-alone programs have the ability to crop images to include only the content the user wants displayed. These programs also include other picture editing features such as fixing red-eye and the ability to resize to exact dimensions. These programs generally generate higher quality images.

Resizing images in the Kupu Editor

Plone does support resizing images in the Kupu editor. After an image is inserted, selecting the picture produces handles which may be dragged to resize the image. This method is NOT RECOMMENDED! Here's why: When images are resized in this way the image tag in the HTML is set to specific height and width attributes. The image itself is not changed. The browser has to resize the image on-the-fly as it is downloaded, every time it is downloaded. Because this is done dynamically, the browser has to do it fast, so the quality of the resulting image is poor.

Aligning images on the page

When images are inserted one of the options is to choose an alignment. This determines where the image will be placed relative to the text on the page. Choose left, inline, or right. Select left/right alignment first, then move the image up or down in the document afterwards. Select (click) the picture in the Kupu editor and drag it around through the text, then drop it when it is properly aligned. It is a good idea to write all the text first, then insert the image at the end of the text. Next use the drag-and-drop method to reposition the image. To have text wrap around the image, use the drag-and-drop process until the right amount of text appears all around the image. NOTE: 3 or 4 paragraphs of text are required to have text wrap all around an image.

Clipart

Clipart is considered an image. When selecting a piece of clipart choose an image that is the proper size or resize it before its uploaded. Upload a clipart image the same way a photo is uploaded, including applying the metadata. Use the same alignment techniques described above. When using a clipart bullet point or other bullet graphic use the inline alignment to align it with the text.