Adding Images to Pages

Images can be incorporated into page layouts.

Icon Idea Note: Images embedded within pages must additionally meet the School of Medicine's accessibility requirements for smaller screen sizes.  It's the school's policy that all pages should fit comfortably within a 1024 pixel-wide screen:

  • Images in 2-column layouts must be scaled to 760 pixels wide, or smaller.
  • Images in 3-column layouts must be scaled to 585 pixels wide, or smaller.

Insert a Previously-Uploaded Image

If you have uploaded an image to your site as described in the 'Upload an Image from the Images Folder' section of Adding Images, follow these steps to incorporate it into a page:

  1. Navigate to the page in which you want to add an image.
  2. Click on the edit tab in the green menu bar (you need to be logged in to see this).
  3. In the Body Text, place your cursor where you want the image placed on the page and click on the Insert/Edit image button (Image).
  4. In the dialogue box that pops up, browse within the Image list (middle panel, or; use the shortcuts in the left panel) to the location on your site where the image is located (usually Images, within the Home folder).
    Insert/Edit Image
  5. Select the image you'd like to add, adjust its alignment & description, if applicable, & click insert at the bottom of the dialogue box.
  6. Alignment:
    • Inline (default) - Places image on the same line as the text.
    • Left - Places image to the left of the text.
    • Right - Places image to the right of the text.
  7. When you have finished editing the page, scroll to the bottom and click ok.
  8. The main content area automatically switches to the view tab in the green bar so that you can preview the page with its newly inserted image.

Upload & Insert an Image from a Page You're Editing

With our new page editor (TinyMCE), you can now upload an image directly from the page you're working on.  To do so:

  1. Navigate to the page in which you want to add an image.
  2. Click on the edit tab in the green menu bar (you need to be logged in to see this).
  3. In the Body Text, place your cursor where you want the image placed on the page and click the Insert/edit image button (Image).
  4. In the dialogue box that pops up, choose Home in the 'Libraries' panel, then the Images folder.
    Insert/Edit Image
  5. Click Upload File.
  6. Browse to the image on your computer & click Open.
  7. Give the image a title and description (optional), then click upload.
    Insert/Edit Image (Upload)
  8. Select the newly-uploaded file from the bottom of the Image list, adjust its alignment & description, if applicable, & click insert at the bottom of the dialogue box.
  9. Alignment:
    • Inline (default) - Places image on the same line as the text.
    • Left - Places (floats) image to the left of the text.
    • Right - Places (floats) image to the right of the text.
  10. When you have finished editing the page, scroll to the bottom and click ok.
  11. The main content area automatically switches to the view tab in the green bar so that you can preview the page with its newly inserted image.

Icon Idea Note: When you save the page, users who aren't logged in will be able to download the file through the link you created, as long as the file itself exists in the published state. If you do not publish your file, most users will not be able to access it. Be sure to change each file you upload from private to published.

Image Border

Add a border using the option on the Style menu.  Note that Image Right & Image Left options are now located within Image Properties:

Style Menu

Linking an Image

If you wish the image to be a link, right-click the image, select Insert/edit Link, then when the link dialogue appears, choose the king of link you need, from the 'Libraries' section.

  • Home - Browse to a link within your site, starting at its homepage.
  • Current Folder - Browse to a link within your site, starting at the folder you're currently in (default).
  • External - Link to a different site on the web, using its web address (starting with http://).  See also Link to an External or .PDF File, for important information about creating external links.
  • Mail - Link to an e-mail address.
  • Anchors - Link to an anchor within the current page.
    Insert Link

 

exclamation-trianglesign.png Warning: Beware when copying images from an existing web site. Let's say you are responsible for setting up your department's web site in the new School of Medicine Plone system. One of the easiest ways to do this is to highlight and copy the content of your old site and paste it in the new site. If you highlight and copy an image and paste it into a page of your new site, the image will appear. However, the image has not been added to the Plone system. The image will call to the place where the image resides on your old web site. As soon as the old site is deleted you will have broken images on your new site. The proper way to add the image is to right-click on the image and select Save Image As. Save the image to your computer and then upload it to the Plone system as outlined above.

[top]

 

Related content
Page Style Guide