Working with images
Up to this point, you've been working only with text and hyperlinks. Now we'll learn how to work with images in Plone.
Uploading an image
Before you can place an image into a page, you must upload the images to your web site. In essence, this means that a copy of the image must be transferred from your computer to your Plone web site. A common practice is to create an images folder in which to store all of your images. You don't have to do things this way, but it may help you to keep your content organized on your site.
Navigate to the location to which you wish to upload your image, then click on the Add new... menu item and select Image from the drop-down list:
You should now see the Add Image screen. Just like pages, images need a Title and, optionally, a Description.
Complete these fields and then click on the Browse... button and navigate to the image on your computer's hard drive. Once you have located the image, click on it to select it, and then click the Save button on the Add Image screen. Now the image file is a part of your web site. The next thing to learn is how to insert the image on a page.
Inserting an image on a Page
Navigate to the page you wish to insert the image on. Edit the page, and choose the location for the image by positioning the cursor on the page where you want the image to appear. Click on the Insert Image icon to display the Insert Image screen. An example of this screen is shown below:
The Insert Image screen is divided into three sections. On the left are some navigation links to help you find the image file. Often, it helps to click on Home to see the full contents of your site. You can then select your Images folder, or whatever folder the image is located in. The middle section shows you what images are in the folder you have chosen. Click on an image file in the list, and the image details will appear in the rightmost section.
Notice that the image details section displays the Title (Me on a Horse) and the Description below that. You can also see a preview of the image, and the image dimensions.
Next, select an Alignment, Size, and if you wish, change the Text equivalent. These values are used as follows:
- Alignment: This controls how text will wrap around the image and on what side of the screen the image will be aligned.
- Size: You have several resizing options on this menu, covering a wide range of sizes.
- Text equivalent: Have you ever hovered your mouse over an image and seen a little description pop up? What you're seeing is the Text equivalent (also known as alt-text, or tooltip text). The text equivalent automatically uses the Title of the image, but you can change this if you want to.
When you have finished making your selections, click on Ok to insert the image. The page should then appear as follows:
The Thumb size and the Left alignment are chosen for this example. You can see how the text wraps to the right of the image.
If you want to remove the image, simply click on it and press the Delete key.
When you have finished inserting images on the page, make sure that you save the page before moving on to something else.
Preparing images for the web
When choosing the images you want to use on your site, you need to be aware of some basic best practices. Not everyone who uses the Internet has a fast, broadband connection, nor does everyone have a nice high-resolution monitor. In addition, there are certain web standards with regard to the type of image file that you are using. In designing a web site, your goal should be to reach as wide an audience as possible. As such, you must prepare your images with the following ideas in mind:
- File format: GIF and JPEG are the most widely-supported formats. Modern web browsers also support PNG format, but older browsers may have trouble with PNG images.
- File size: The larger the file size, the slower the display time for your web pages, especially for users on a slow Internet connection. Try to keep your images to under 50kb in size.
- Image dimensions: The physical size of the image is usually expressed in pixels. Use images that have a width that is less than the width of the Body Text field of your pages. Typically that means less than 500 pixels wide. If you want to display a larger image, insert a small version on the page and then link to the large version by using an internal link.
Note
Modern digital cameras are capable of taking very high resolution pictures. although you can upload large image files into Plone, you may find that they quickly consume your disk space and slow down your site. It is a wise idea to crop, scale down, and compress large images before uploading them to your web site. Plone itself cannot do this for you without using plugins, but there are many excellent software packages that can. Popular open source programs for image editing include the GIMP and Paint.NET . Commercial options include Microsoft Photoshop Elements , Jasc Paint Shop Pro , and Adobe Photoshop .