LibGuides Tips & Tricks for Librarians: Images

Crop a picture that you want to use in your profile and save the file somewhere on your computer.

From your My Admin page:

• select "Customize Your Profile"
• in the General section, select "Use a file from my computer" from the drop-down list for Profile Image
• Browse your computer to locate the image

The UCF library added the image module to our subscription, which makes it much simpler to include images on your pages.

1. Save the image on your computer.
2. Create a box on a LibGuides page.
3. Add or edit text for the box.
4. Select the green icon to "Insert/edit image" (between the anchor and the question mark in the toolbar).
5. Click to upload an image from your computer or reuse an image in your personal image library
6. After you initially upload an image from your computer, it might not show up in the Image Manager box. If not, close the Image Manager box, then reopen it by repeating step 5.
7. Once you have uploaded an image from your computer, you can use the same image on other pages by reusing the image from your personal image library.

NOTE: You can't reuse an image from someone else's LibGuides page without first downloading it to your computer and uploading it into your own personal image library within LibGuides. There is not currently a central repository for all of our institution's images within LibGuides, so each guide author needs to load the images into their own personal image library.

If you want to include an image on your page without using LibGuide's image module, you'll need to store the image on a server openly accessible to the Internet and insert html coding to retrieve it each time the page is loaded.

"<img src="http://...>"

The ALT attribute is designed to be an alternative text description for images and is required so that users who cannot view an image still get a brief description.

1. Open the editing function for the box containing the image.
2. Select "HTML" from the task bar.
3. Within the brackets for the image, add a brief description using alt="description goes here", e.g., change the html from
   img src="http://lgimages.s3.amazonaws.com/data/imagemanager/8757/the_white_house.jpg"
   to
   img src="http://lgimages.s3.amazonaws.com/data/imagemanager/8757/the_white_house.jpg" alt="The White House"

It's also helpful to put a brief description of the picture either as the box title or as a line of text above or below the picture. And it's usually a good idea to provide a source attribution for the image.

NOTE: You can use title= instead of alt=. The difference is that the description in title= will display on a mouseover with all browsers, but the description in alt= will not display on a mouseover with some versions of some browsers.

If you're using an image as a link, but you don't want the edge of the picture to have a colored link border around it, edit the html to add border="0", e.g., change

img src="http://lgimages.s3.amazonaws.com/data/imagemanager/8757/the_white_house.jpg" alt="The White House"

to

img src="http://lgimages.s3.amazonaws.com/data/imagemanager/8757/the_white_house.jpg" alt="The White House" border="0"