You are here: Home Web Team Department Websites Plone Documentation Images: uploading, inserting, replacing

Images: uploading, inserting, replacing

You can upload images (.jpg, .png, .gif) from your computer to insert into pages and news items.

Note: You must be logged in to make any changes to your site. Find out how to log in >>

Uploading and Inserting Images

Department sites are created with images folders where you store your pictures. You can add images into your department images folder one of two ways: directly into the page you're editing, or by uploading to your images folder.

Uploading an Image From a Page

To add an image to the page you're currently working on, follow these steps:

  1. Within the body text area of the page you're editing, place your cursor where you want to insert an image.
  2. Click the Insert/Edit Image icon:
  3. Find your department images folder (if you can't see it, try clicking Up One Level) and click on it to see the list of images in it.

    image dialog box image folder

  4. Click Upload File under the Image List section.

    browse for images dialog box

  5. Under the Upload File section, click Browse to get the image from your computer.
  6. Locate the image that you want to upload on your computer. Click it once to select it and then click Open.
  7. Type a Title to name the image (it will be saved to your images folder with this name).
  8. Click Upload. The image will upload and the screen will refresh to show you a preview of your image.
  9. Give the image a Description, choose your Alignment, and pick a Dimension size (numbers here represent pixels). Read more about selecting an image size.

    image preview dimension

  10. Click OK.
  11. The image is added to your page.

Uploading an Image to Your Images Folder

If you want to add images to your department site to insert into pages at a later date, follow the steps below.

  1. Click on the Contents tab from your homepage.

    contents tab

  2. Click on the folder named Images.

    image folder

  3. Select Image from the Add New dropdown menu.

    add new dropdown menu

  4. Give the image you're uploading a Title.
  5. Click Browse in the Image field, navigate to the image file on your computer, and then click Open.

    browse button dialog box image open

  6. Click Save at the bottom of the page.
  7. Your image will now be located in your images folder and can be inserted into pages around your site. Read how to insert images below >>

    image folder image thumbnail

Inserting Uploaded Images

If you've already added the images you want to use to your department images folder (see Uploading an Image to Your Images Folder or Uploading an Image From a Page above), you can easily use those images (and re-use them) throughout your site:

  1. Within the body text area of the page you're editing, place your cursor where you want the image.
  2. Click the Insert/Edit Image icon: insert edit image
  3. A dialog box will open to the contents of the folder you're currently in; you can Search by title for the image, or Browse the image list (click Up One Level to navigate up through your folders).

    image dialog box arrows

  4. Choose an image, then select your Alignment preference and size Dimension (see image sizes below).
  5. Click OK.

The image is added to your page.

Don't like the image size or want to use a different image? If you don't like the size of the image, or you decide you'd like to use a different image:
  1. Click on the image in the Body Text area
  2. Press the Delete key on your keyboard
  3. Follow steps 1 through 5 from Inserting Uploaded Images (above)

    Replacing Images in Images Folders

    If you want to replace an image you've uploaded to an images folder with a new image, you can do it without having to delete the existing image.

    1. Click on the Contents tab from the homepage of your site.

      contents view main folder

    2. Click on your Images folder.

      images folder

    3. Click on the image you want to replace.

      image preview page

    4. From the preview screen, click the Edit tab.

      edit ab replace image

    5. Under the Image preview, select Replace with new image.

      image replace screenshot

    6. Click Choose File and locate the image you want to upload from your computer. Once you've located and selected it from your computer, click Open.

      image computer dialog box

    7. Click Save.

    Removing Images from a Page

    To remove an image from a page you've added it to:

    1. Click Edit on the page you're wanting to change.
    2. Click once on the image you want to delete.

      image highlighted

    3. Hit the Delete or Backspace key to remove the image.
    4. Click Save at the bottom of the page.

    Deleting Images from Your Site

    If you want to delete images you're no longer using anywhere on your site, submit a a request to the Web Team (through our help form) with the name(s) of the image(s) you want deleted. More about submitting requests to the Web Team >>

    Someone from the Web Team will contact you with any questions they may have and/or when your request has been completed.

    Images Sizes

    There are several size options you can choose from when inserting images to your site.

    Original (original image dimensions) and Large (768x768)

    If the original image width is larger than the content area of your page (i.e., 550 pixels), it will stretch your page out when you insert the image. See an example of this >>

    We recommend using one of the smaller image sizes below for the best results when inserting images.

    Content-banner (550x1010)

    Roosevelt Middle School Dog Rescue Event

    Preview (400x400)

    Roosevelt Middle School Dog Rescue Event

    Content-small (320x650)

    Roosevelt Middle School Dog Rescue Event

    Mini (200x200)

    Roosevelt Middle School Dog Rescue Event

    Right-column (170x340)

    Roosevelt Middle School Dog Rescue Event

    Thumb (128x128)

    Roosevelt Middle School Dog Rescue Event

    Tile (64x64)

    Roosevelt Middle School Dog Rescue Event

    Icon (32x32)

    Roosevelt Middle School Dog Rescue Event

    Listing (16x16)

    Roosevelt Middle School Dog Rescue Event

    Document Actions