IUP artmark

Insert an Image on a Page

  • Don’t Choose a Thumbnail

    Don't choose this boxAlways double-click the image title or the image itself.

    Never choose the little yellow box.

    Important!

    Image file names that contain punctuation will not show up properly on the website.

    Be certain the file name does not contain commas, apostrophes, etc. before uploading the image.

     
  • Inserting an Image into Your Content

    Open your content for editing (do not choose Edit in Context).

    1. 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 the Insert tab, then the Library icon ( Library icon), and you will see the Library screen (sample below): library
    3. Navigate to the folder containing the image you want to insert into your content.
      • 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.
    4. 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.
      • If the image is correctly sized, it may look far too large. But this is just an illusion—when the proper settings are applied to the image and the page is published, the photo will look the way it should.
    5. Apply the Settings:
      Always make images ResponsiveClick on the formatting toolbar buttons to add one or more of the correct image settings. Follow this link for detailed examples of using these settings:
      • Responsive: Always choose Responsive.
      • Align: For non-full-width images, choose Left- or Right-Aligned (right-aligned is usually best). This will let the text flow around the image. 
      • Align half-width images so the text flows around them Half-Width: Many images that are not full-width will look good at half the width of the page. Selecting Half-Width keeps the photo at half width in relation to the text next to it, no matter what size device the page is being viewed on.
      • Choosing Half-width keeps the image and the text next to it the same size Third-Width: Some pictures, like head-and-shoulder portraits, may be too large at half-width. For these, choose Third-Width instead. This keeps the photo at one-third the page width in relation to the text next to it.
      • Choosing third-width keeps the image one-third the width of the page and next to the textSide by Side Images: This allows two pictures to appear side by side (as long as the screen viewing area is wide enough). Both images will need to be sized as half-width images (737 pixels wide). 
        1. Place the first image on the page. Then, without making any spaces or new paragraphs, place the second image. (They will probably appear to be on top of each other.)
        2. Full settings applied for the right-hand side-by-side imageClick on the first (top) image to select it. Choose Left-Align, Responsive, Half-Width, and Side by Side. (see sample image)
        3. Click on the second (bottom) image to select it. Choose Right-Align, Responsive, Half-Width, and Side by Side.
      • When the content is published, the settings will take effect.
    6. Inspector icon in the formatting toolbar Edit the image’s Alt (alternative) Text.
      1. Click once on the image to select it, then open the Inspector by clicking the far-left icon on the Review tab of the formatting toolbar.
      2. Align options and the Alternative Text field within the Inspector Edit the Alternative Text field, if needed (see image). The alt text should describe what you see (“Healthcare--picture of Indiana Hospital”). This is required for accessibility reasons—the description will be read aloud by computer screen readers for people with vision impairment. 

    Although there is an option to artificially adjust the image’s size, this should be avoided as the image can become pixelated or fuzzy. Remember that all images must be resized before uploading into Ektron, not from within Ektron. For similar reasons, please do not use the “Edit Image” option, either.  

    Moving an Image

    If the image is placed in the wrong location on the page, you will need to delete it and then re-place the image in the correct location. The alignment and alt-text editing process must then be repeated (step 7 above).

    Changing an Image

    To change the image from within the Inspector, click the image so that it is selected. In the Inspector window, click the blue Library icon, located to the right of the “Image Source” field. Choose the appropriate image from the library window. (As always, only double-click the image filename or the image itself. Do not double-click on the little yellow box.)

    The Inspector also shows what styles are being used in the content. When the Inspector menu is open, placing the cursor within any text will show what styles are applied, plus what other styles are available.

    Here’s how to add a quicklink to an image.