Adding images

Best Practices

Hint: Use JPEG format for photographs, GIF and PNG for other graphics.

Tip: Do not leave the Alternate Text box blank, and be clear in the explanation of the image (e.g., student using a laptop).

Lesson: Learn about preparing images for use in the CMS.

Images may be inserted into your Web page in either the WYSIWYG Editor or in the image (optional) block. In either case, the image must have been uploaded to the site before you can insert it into your Web page.

Insert an image via the WYSIWYG

  1. Place your cursor where you would like the image to appear. Click Insert/edit image.  The Insert/edit image window will appear.
  2. Select the Internal radio button.
  3. Click the Browse icon to navigate to the image you wish to use.
  4. Navigate to where the image is stored. The images folder is located in Base Folder/local_resources/images/.
  5. Select from one of the images in that folder.
  6. Alternate Text: Use descriptive text for images that are important for site navigation (e.g., Computing Services Home).
  7. Width/Height (optional): Enter the width and height for your image. Width/Height - sets the width and height of the image in pixels using the width/height attributes of the <img> tag. This does not modify the dimension of the source image.
    • Images that span the width of the center column, such as promotional images, should be no larger than 510 pixels wide.
    • Images in right column should be no larger than 160 pixels wide.
  8. Advanced Images tab
    When aligning an image with a single line of text, choose from one of the following options:
    • Baseline and Bottom - Aligns the bottom of the text to the bottom of the image.
    • Top - Aligns the image with the top of the tallest line item.
    • Middle - Aligns the text baseline with the middle of the image.
    • Text Top - Aligns the top of the image with the top of the tallest character.
    • Absolute Middle - Aligns the middle of the image with the middle of the text.
    • Absolute Bottom - Aligns the bottom of the image with the lowest point of the text line.
  9. When aligning an image with two or more lines of text use the Left or Right options.
  10. Click Insert to add the image.

Edit or insert images dialogue box

Pros and Cons

Pro: You can insert an unlimited number of images on your page using the WYSIWYG and directly apply your CSS.

Con: Images won't resize when a specific height and width are assigned. No formatting is applied to its presentation. May not work well with mobile devices.

Insert an image via the 'Repeating content block - Image' block

In addition to the WYSIWYG portion of the Repeating content block, three other blocks are available:

  • Additional content blocks
  • Image blocks
  • Spotlight blocks

Optional image block

The image block allows users to add one image per repeating content block, but be aware that you can create more Repeating content blocks AND you can also attach XHTML blocks containing images to the 'Additional content blocks' sections of each Repeating content block.

A breakdown of the Image (optional) block:

Alt

  • Image file (optional) - Browse to your images folder, select the image and attach it here.
  • Image alt text - ALWAYS provide alt text to adhere to accessibility requirements.
  • Image caption - Caption text can be entered in the WYSIWYG pane.

Optional image block - links for images

  • Internal link on image - If the image should link to a different page, browse to the internal page here.
  • Or, external link on image - Enter the URL in this field.

Optional image block - image settings

  • Remove top margin? - Clicking 'yes' promotes the attached image to the top of the content block, aligned with the paragraph text.
  • Image's vertical position - Allows you to select the position relative to the section block: aligned with section heading, below the section heading, or at the bottom of the section.
  • Image width (standard) - The dropdown menu offers preset width options: widest (100%), extra wide (420px), wide (360px), medium-wide (300px), medium (260px), medium-narrow (160px), narrow (100px), and custom width.
  • Image width (custom) - If you want to specify an unique custom width, enter the number in pixels in this field.
  • Content box alignment - Left, right, none.
  • Block not bordered? - By default, this is checked and the image will be borderless.

Pros and Cons

Pros: When the widest image width is used, the image can be resized fluidly to its maximum width. Will receive default formatting for a clean presentation with proper spacing with text. It will also automatically respond to its context when the mobile setting is enabled by a manager.

Cons: Presently, only one image can be attached in the image block per Repeating content block. As noted earlier, an additional image can be included as an additional block.