Insert an Image

Prepare your images

Images must be prepared for the web before they are added to your website.

Process

Images need to be uploaded to your website before you can add them into your webpages.  All images should be stored in a folder called 'Images' so that they are easy to locate, for you and for other website editors.

You can add images individually using the Add new... menu (and select 'Image') or you can upload multiple images at one time.

Create an images folder

If there isn't already a folder called Images then you should create a folder first at the top level.

Before you publish your site you can exclude the folder from the navigation. This will mean that your images folder doesn't show up in your main navigation but is still accessible via the Contents tab.

Upload an image into Plone

Adding an image via the menu

  • From within the Images folder click Add new... and select Image
  • The Title of the image will also act as the Alternative Text (Alt Text) when the image is inserted into a webpage.
  • The text that you enter into the Description field will become the image's caption - should you choose to display a caption. 
  • Click Browse and search for your image on your local or network drives (Z:\ X:\).  Locate the file and click Open.  Fill in a Title and an optional Description for your file.

  • When you click save, a copy of the file will be placed into your Images folder.

This method works well but becomes time consuming when you have multiple images to upload in one go.

Uploading multiple images

If you need to upload multiple images at one time then you can do so either by mapping a network drive (Windows 7 users) or by using Enfold Desktop (Windows XP users).

Insert images onto a webpage

Once you have your images uploaded into your Images folder you need to insert them into your webpage(s).

  • Edit the page and put your cursor at the point on the page where you want the image to be placed.  Click on the Insert image button.

Insert image button

 

The Insert/edit image window will open as shown below.

Insert image window

  1. Browse or search for your image.
    In most cases the quickest and easiest method of locating your image is to click 'Current Folder' which will show you the contents of the folder you are currently working in. From here you can navigate to your Images directory. The 'Up one level' link will take you up one level in your site's folder hierarchy.
  2. Select your image from the list.
  3. Modify the image details.
    Give your image a description if necessary (which will act as a caption), set the alignment, tick Caption if you want to display one and finally leave the Dimensions set to Original (it's better to re size your image before you upload it to Plone).
  4. Click Insert.
    You'll need to scroll the window down to reveal the 'Insert' button. Clicking 'Cancel' will close the window without inserting an image.

Publish images

When you publish a page that has images on it you also need to publish the images and image folder as well. If you don't, then when you logout of Plone and view your page the images will not display. It's okay to have an images folder that has some published and some unpublished images in it - as you might not want to make some photos available yet. It's easy to forget to publish them but you'll soon realise if your images don't show.

Once you have published your images folder then you will also have to publish any new images that get added to it in the future - as they will not inherit the published state of their parent folder.

You must publish any images that you want to have on your web pages otherwise they won't be visible to the outside.

Share this page: