StaffGuide: LibApps Guide

Guidance and tips for creating and maintaining your content

Managing Images in 2.0

 Your personal images are stored under Content > Image Manager on the top orange menu bar.

You can create folders to better organize your personal images.

Image Manager

 

In the Image Manager, you have tools to examine an image, move it to a new folder, or copy a direct link to that image.

Click on the image to add a description or to move it to a new folder.

 

Add an Image

Images can be added to any Rich Text / HTML content block.

1. In the Rich Text editor toolbar, select the Image icon.

Insert an Image tool

A dialog box will open.

2. You can choose to upload an image, reuse an image you have previously uploaded to the system, or to point to an external image on the Libraries' web site or another site.

  1. To reuse an image you have already uploaded, click the Browse Server button.
    Find the image in your personal images or in the shared images and click the image icon to add it.

    Insert an image
     
  2. To use a new image, click the Browse Server button and then Upload New Image. Browse to the file you wish to upload. Be sure to change to the folder where you want to store the image before beginning the upload.
     
  3. To point to an external image, and not include it in your personal image library, complete the Image URL field.
    In most web browsers, you can right-click an image to find the URL.

star icon - best practiceBest practice:Be conscious of copyright. See the information on image sources, below.

3. No matter whether your image is reused, new, or external, you will need to add the following image attributes:

star icon - best practiceBest practice: you must provide descriptive text ("alt tags") for your images.

4. You must complete the Alternative Text  field to provide a brief description of information contained in the image. This is very important for accessibility; imagine what you would need to know about the image if you could not see it. A good suggestion is to imagine you were describing the image in a short phone conversation.

4. Setting the alignment is not necessary in all cases but helps you to set the image to the left or right of text.
This controls position of the image relative to text. If you want to center the image on the line, you must edit the HTML source code.

5. Sizing the image is not necessary. If you change the default size (the size in pixels the image was when you added it, it may not resize correctly for mobile.

6. Use the Horizontal and Vertical spacing (in pixels, e.g., 5) to add space around the image so it does not run into text or box borders.

7. Click "OK" and you are all done!

Image Properties Dialog Box

Make Your LibGuide Accessible

star icon - best practiceBest practice: do not use images as the only medium for essential information.

As you add images to your LibGuides, be sure to consider the needs of users who might access the page through a screenreader (like JAWS) or who have low vision, color blindness, etc.

Images should be used to supplement textual information, not replace it.

Provide descriptive tags for all images that allow users to understand your Research Guide. As the W3C Guidelines state:

Provide content that, when presented to the user, conveys essentially the same function or purpose as auditory or visual content.

Although some people cannot use images, movies, sounds, applets, etc. directly, they may still use pages that include equivalent information to the visual or auditory content... (more at http://www.w3.org/TR/WCAG10/#gl-provide-equivalents).

Sources of Images

star icon - best practiceBest practices:

  • Rights: for anything other than small icons or book / media covers or screenshots that you or your colleagues have created, only use public domain images or those licensed for reuse through Creative Commons.
  • Give adequate information about the image source in a caption.