FIU Libraries: LibGuide Sustainability &amp; Troubleshooting: Image Management

How to add and edit images in a guide using a Rich Text / HTML content item

2. In the Image Properties window, click the Browse Server button.

3. In the Image Manager window, select or upload a new image.

To upload and insert a new image, click the Upload New Image. You can upload any JPG, JPEG, GIF, PNG, or ICO file up to 5MB in size.
To insert an existing image, click on the Reuse this Image () icon under its thumbnail

Back in the Image Properties window, you can customize the image using the options under the Image Info tab.

A. URL: this contains the URL for your image from your Image Manager library.

B. Alternative Text: we strongly recommend adding descriptive alternative text so that your image is accessible to users of screen readers.

C. Width and Height: customize the dimensions of your image.

When the padlock icon is locked, entering a width or height will automatically calculate the other dimension so your image retains its aspect ratio.
You can click on the padlock icon to toggle the aspect ratio on/off.
To restore the default dimensions, click the Reset Size icon.

D. Border: enter a value to apply a border around your image. The larger the value, the thicker the border.

E. HSpace and VSpace: enter a value in these fields to apply a margin around the image.

Use the HSpace to apply a margin to the left and right sides.
Use the VSpace to apply a margin to the top and bottom.

H. Alignment: use this to align the image to the left, right, or center of the Rich Text/HTML content item.

If you would like your image to link to a URL, click on the Link tab.
- URL: enter the URL of the page you want to link to.
- Target: select whether to open the link in the current window or a new window.
Click OK to insert the image. (Don't forget to save your Rich Text/HTML content item!)

Editing an existing image

To edit an image you've already added to your Rich Text/HTML content item, simply right-click on it and select Image Properties from the context menu.

Searching for images in the Image Manager

To help in locating images that have been added to the Image Manager, you can search by the file names and keywords that have been added to an image -- and you can search within a single folder or across all folders in a library.

To search for an image:

Go to Content > Image Manager.
Select the library that the image is in.
Search by file name or keyword -- as characters are entered into the search box, the results/images displayed will update automatically.
If you want to search across all folders, choose All Folders from the dropdown.
- Note: you cannot search across the Shared Library and a personal library.

Upload an image to your personal Image Manager library

Your personal Image Manager library allows you to upload images that you can reuse throughout LibApps. Images you add to your personal library can only be reused by you -- other users (including admins) will not have access to your library.

To upload images to your personal library:

Go to Content > Image Manager.
Make sure the Personal Library button is selected.
Navigate to the folder where you want the image to be stored.
1. Or, use the Create New Folder field to add a new folder for your image.
Click on the Upload New Image button.
Select the image from your computer to upload it. Supported formats include JPG, JPEG, GIF, PNG, and ICO up to 5MB in size.

Adding an image slide into a Gallery Box

While editing your guide, click on the page containing your gallery box in the guide's navigation menu (i.e. tabs or side-navigation).
In the gallery box's heading, click on the Add/Edit Panes gear icon.
Click on the + Add New Slide button and select Image.
To upload or select an image from your Image Manager libraries, click on the Open Image Manager button. (If you want to use an external image, you can also enter its URL in the Slide Image URL field).
If you want to direct users to a URL when clicking on the slide, enter the full URL in the Link URL field. Leave this empty if you do not want the slide to link anywhere.
To make your slide accessible, please provide descriptive alternative text for your image in the Image Alt Text field. This will be added to the <img> tag's alt attribute.
Optionally, you can provide a Slide Title. This will display as an <h3> element above, below, or to the side of the image, depending upon your gallery box's Caption Position setting.
1. If you entered a Link URL, then the title will also link to that URL.
Optionally, you can provide Slide Details to help explain the slide content. This will display above, below, or to the side of the image, depending upon your gallery box's Caption Position setting.
Click the Save button.

Add default alternate text to an image in the Image Manager

Also referred to as Alt Text, adding alternate text to your images is an accessibility best practice. By adding descriptive alternate text to each image, you are providing users of assistive technologies (such as screen readers) a description of the content of the image. With the Image Manager, you can actually add default alternate text to your images.

Each time you reuse an image in LibApps, its default alternate text will be used (though you can customize it if needed). Not only does this save you time in the long run, but it greatly increases the odds that the alt text won't be overlooked -- especially for images in your shared library.

To add default alternate text to an image:

Go to Content > Image Manager.
Click on the thumbnail of the image you want to edit.
In the Edit Image Properties window, enter your descriptive text into the Alternative Text field. This will appear in the image's alt attribute (e.g. <img alt="Your alternate text displays here">).
Click the Save button.

Floor		Resources
One		Center for Academic Success: University Learning/Testing Center Electronic Classroom Broadcast Video Productions Resource for Education Technology UTS - Media Equipment Services Distance Learning Electronic Classroom Instructional Photography & Graphics
Two		Information & Research Services Curriculum & Juvenile Collection LACiC - Latin American and Caribbean Center Government Documents GIS-RS Center & Teaching Lab Maps & Imagery User Statistics
Three		Periodicals & Newspapers Laptop Lounge Honors College Student Resource Center College of Medicine Library Copiers Systems
Four		College of Medicine Special Collections & Archivese Academic Space Management School of Social Work Study Area
Five		Audiovisual Collection Diaz Ayala Collection Architecture and Fine Arts (General Collection and Periodical Section N) Music (General Collection and Periodical Section M) Music Listening Room Music CAI Center Spanish Resource Center Group Study Rooms
Six		Quiet Study Space Group Study Rooms General Collection HJ-L & P-Z Oversized Books
Seven		General Collection A-HG Quiet Study Floor Group Study Rooms
Eight		Library Administration Collection Management Digital Collections Center

Floor		Resources
One		Circulation Course Reserves Intercampus/Interlibrary Loan Information and Research Services Center for Excellence in Writing Communication Arts Studio Computer Labs/Copiers
Two		Microforms Periodicals Juvenile Collection Oversize Collection Video Collection Government Documents Reference Workroom Reference Collection Copiers
Three		General Collection, A-Z Library Administration

LibGuide Sustainability & Troubleshooting

Working with Images