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: insert edit image
  3. Find your department images folder (if you can't see it, look at You Are Here, and go back one folder) and click on it to see the list of images in it.

    findImage.jpg

  4. Click Upload File under the Image List section.

    uploadImage.jpg

  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.

    insertImage.jpg

  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.

    contentTab.jpg

  2. Click on the folder named Images.

    imageFolder.jpg

  3. Select Image from the Add New dropdown menu.

    addImage.jpg

  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.

    uploadImage.jpg

  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 >>

    savedImages.jpg

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 (go to You Are Here to navigate up through your folders).

    sizeImage.jpg

  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.

      replaceImages.jpg

    2. Click on your Images folder.

      replaceImages2.jpg

    3. Click on the image you want to replace.

      replaceImages3.jpg

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

      editImage.jpg

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

      replaceNew.jpg

    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.

      chooseImage.jpg

    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