You are here: Home → Help Center → Reference Manuals → U of L Plone 2.5 User Manual → Adding Content → Adding Images

2.3. Adding Images

Up one level

Images in Plone are usually photographs taken with a digital camera, but they can also be scanned images, graphical illustrations made with software, and other specialized images.  Let's take the most common case, imagining that you have taken a photograph of a butterfly. 

Digital photographs taken with modern cameras are usually too big to post directly on a website, so they need to be resized.  A typical web site design may have a width of around 1000 pixels. When a photograph comes off your camera, it may be several thousand pixels wide and tall, and several megabytes in file size.  You need to use software on your computer to resize the image to something less than 1000 x 1000 pixels, often just several hundred pixels maximum width. The software you use to view or print your digital photos will often have this resizing functionality, or you may have graphics software such as Corel Draw, Adobe Photoshop, Irfanview, or Gimp on your computer.  Resizing an image, sometimes called resampling, is a standard function you should be able to find in your software, often under the Image menu. How do you know what width, in pixels, to resize your image?  It depends. For a little "head shot" photograph to go in a biography, maybe 200 pixels wide is just right.  For a group photograph, 200 pixels would be too small to allow identification of the people in the photograph, so it would need to be 400 pixels wide. For a scanned map image, perhaps the image width would need to be 1000 pixels for the map detail to be usable.

After saving your resized image, giving it a name that indicates the new size (e.g., butteryfly-resized-300px.jpg), you'll have an image file on your computer. The file format is most commonly .jpg (or .jpeg). Other common formats for images include .png and .gif.  Take note of where you save images on your computer so that you can find them when you upload them to your Plone web site.

In summary, you take your photograph, transfer it to your computer, use image software on your computer to resize your photograph, then upload it to your Plone website:

 

When you upload an image to a Plone web site, several smaller, supplemental copies of the image will be automatically created, including the smallest, a thumbnail version. These smaller versions are used by Plone when showing images in lists of items in a folder.  The original full-size image is always there, and this is the size that is shown when you choose the uploaded image to be included in a web page.  The rule to remember is that you should resize the image on your computer to the size you want to use on a web page, and just upload it. Plone will make other size copies upon uploading, but normally don't have to think about it; Plone will use the supplemental versions when needed for displays.

When you get ready to upload an image, use the add item menu for a folder (You will only see the add item menu after logging in):

 

After clicking to add an image, you'll see the edit image panel:

 

The Title and Description fields (field, as in data input field) are there, as with adding a Folder, and there are two additional things at the bottom. Let's look at the four input items individually:

• Title - Use whatever text you want, even with blanks and punctuation (Plone handles web addressing). 
  
• Description - Always a good idea, but always optional. Leave it blank if you want.
  
• Image - The Image field is a text entry box along with a Browse... button.  You don't have to type anything here; just click the Browse button and you'll be able to browse you local computer for the image file to upload (Remember: You need to remember where you keep your images on your computer).
• Related Item(s) - This is a Plone-specific field that allows powerful association of content items. When you are new to Plone, you may skip this input field.  As you gain experience, you may find a need for making such associations, which help with searching for content. The merits of this field are described at the end of this section.

You also notice other tabs: view, for looking at the image, properties, for entering basic properties, and sharing, for setting access to the image for other users. The view tab is self explanatory -- click it whenever you need to see what an item will look like when browsed. The properties tab, and the basic data it covers, is described at the end of this section.  The sharing

tab is described in a later section dedicated to managing who can see and edit content.

 

At a minimum, you will type in a title and browse for the image file, then hit save at the bottom to upload the image to the Plone web site.  You'll have to wait a few seconds for the upload to complete (or a minute or so, if you have a slow Web connection). Plone will show you the uploaded image when done.