Skip to Content - Skip to Navigation

Insert an Image on a Page

Adding images to your website is recommended, as it adds variety to your page. You can choose to place an image created by the IUP photographer or add an image to the library yourself. IUP images can be found in the Gallery subfolder in the Photographer folder.

There are two ways to add an image to your page: under the Content tab or Metadata tab:

  • Place your image within the content (using the Library icon Library icon) if the image is only half the width of your page (see How to Size Images for the IUP Templates) or if you want to control where in your content block the image displays. This option gives you more control than in Metadata over the size and placement of your image.
  • Place your image in the Metadata if the image is the main artwork for your page, and you want it to span the entire width of your page. The full-size image will display directly beneath the headline. You do not have control over size or placement when using Metadata.

Don’t Choose the Thumbnail

Always double-click the image title or the image itself.

Don't choose this boxNever choose the little yellow box.

Use the Right Size for Your Image

IUP webpages look best when you use images that are correctly sized to fit them.

 

Inserting an Image within Your Content

  1. Make sure your content is open for editing. Place the cursor at the beginning of the paragraph that you want the image next to. (Right before the first word on your page is typically best.)
  2. Click on the Library icon ( Library icon) and you will see the Library screen below: library
  3. Navigate to the folder containing the image you want to insert into your content.
  4. If you are in the correct folder, and you don’t see images displayed on the right side of the Workarea, make sure that you have selected Images on the drop-down at the top of the screen (other options are Files, Forms, Hyperlinks, and Quicklinks).
  5. Double-click the title of the image you want to place into your content, or double-click directly on the image. Double-clicking places the image into your content. (Note: Do not double-click on the little yellow box next to the image. This only places a thumbnail. If you actually want an image that small, then it needs to be resized on your computer and uploaded as a separate image.)
  6. Inspector iconClick the image once, then click the Inspector arrow, located at the top right corner of the Workarea. A menu will slide out. (If the styles are still showing, click the image again until the Image Elements appear in the Inspector.)
  7. Image properties using the InspectorAligning an image is a two-step process:
    1. First, click the image once to select it. (See sample Inspector at right. If the “Element:IMG” tag does not appear at top, click the image again.) At the bottom of the Image Elements menu, choose left- or right-aligned image under “Style Selector.”
    2. Next, click the image once more. The "class" field will now fill in with the same alignment. The first step places the image in the correct location, and the second adds a buffer zone around the image so the text does not butt up against it.
  8. Edit the title and alt fields so that they describe the image (these descriptions should match). This is required for accessibility reasons—these descriptions will be read aloud by the computer for people who use screen readers.
  9. The height and width will automatically be filled in. (Do not change these numbers. Remember that all images must be resized before uploading into Ektron, not from within Ektron.)

Note: If you forget to make changes to a picture after you have added it to the content block, you can click the picture and then click on the Inspector arrow to display the Image Elements.

Moving an Image

If the image is placed in the wrong loaction on the page, click it once to select it, then right-click and choose “Cut.” Place the cursor at the beginning of the paragraph that you want the image to be next to, and choose “Paste.” You will then need to repeat the aligning process (step 7 above).

Adding an Image through Metadata

Some of the full-width images at the very top of pages are added through the Metadata tab.
Note: Items added to a page’s Metadata will not appear, even in preview mode, until the page is actually published.

To add an image through the metadata, follow this process:

  1. While editing your main content block for that page, click on the Metadata tab and scroll down to the very bottom, where you’ll see Image Data. Click on Edit. The Library Folder screen will come up. (See below.) library
  2. On the left side of the screen, navigate to the folder where the image is stored. Locate the image on the right side of the screen and double-click on the title, or double-click on the image itself (not the little yellow box next to the image). The image’s file name will then be added to the blank field, and the image will be added to your page at the top, between the headline and the start of the content.
  3. Known Issue! Images added this way may not appear on the webpage due to an Ektron glitch. If you’ve done everything correctly, but the image just won’t show up on the published page, you’ll need to add the image into the Content instead.
  • Web Team
  • Sutton Hall, Room 316
    1011 South Drive
    Indiana, PA 15705
  • Phone: 724-357-3062
  • Fax: 724-357-5512
  • Office Hours
  • Monday through Friday
  • 8:00 a.m. – 12:00 p.m.
  • 1:00 p.m. – 4:30 p.m.