Skip to main content

RILINK Schools LibGuides CMS Users Guide

Hyperlink an Image to Content

Click Ms. A's picture to read more!

Ms. A, title

Click Mr. B's picture to read more!

Mr. B, title

Click Mrs. C's picture to read more!

Mrs. C, title

Click Mr. D's picture to read more!

Mr. D, title

The following steps are for creating a page modeled on a staff directory. The instructions can be adapted for any use.



1. Create two images for each staff person. Make one smaller-sized image at 150px X 200px (that's the size of the image in the sample tabbed box). Make the 2nd image as big as required. The larger image in the linked PDF is 300px X 400px. 

-Be sure to name each file for easy distinction between thumbnail size and larger size, and for easy image subject identification.

-Supported formats include JPG, JPEG, GIF, PNG, and ICO up to 10MB in size.

Strongly recommended: Create all staff thumbnail imagea and larger images at identical sizes, respectively, for consistency.

2. Upload the images to Image Manager:

-From the LibGuides main dashboard, click View Your Image Manager Library; or

-From within an individual guide editing dashboard, click Content > Image Manager

-Create a new folder if desired, then follow the steps to Upload New Image.



1. Create the PDF file of the expanded profile page in the content editor of your choice. The sample expanded profile documents linked on this page were created in Word then saved as PDFs.

2. From the LibGuides main dashboard, click Assets; or

From within an individual guide editing dashboard, click Content > Assets

3. Click Add Content Item and select Document/File

4. Give the document a name, select the file, and Save. Everything else is optional.

5. After saving, the screen returns to the Asset Manager library. Use the Name search field to search for the asset added in Step 4. Look in the left-most column for the Asset ID for this document and write it down.

6. Repeat Steps 1-5 for each expanded profile document needed.



1. On the appropriate page, click the Add Box option

2. Enter box name and select tabbed box type; identify position and draft mode as needed

-Reuse Existing Box may be used in place of Step 2 once format is established. Be sure to create a copy, then edit the reused box for correct image and content.

3. Create and edit tabs for the box by clicking the gear icon and proceeding accordingly

4. On the 1st tab, click Add/Reorder and select Rich Text HTML. Add image, staff name, title, and contact info as needed. Hyperlink email address as needed. Click Save and leave Edit screen open.

5. On a scrap of paper (or carefully using Copy / Paste), using the Asset ID from Step B5 above, figure out the relative permalink for the asset you want to link to text or image. For each asset, the relative permalink will look like this, where 123456 is replaced with the unique Asset ID for each asset as obtained in Step B5:


6. Decide which text or image will be hyperlinked to the Asset permalink. Select it and click the Link icon in the toolbar. Type (or paste) the relative permalink as formulated in the previous step, exactly as it appears, including one forward slash at the beginning. Please note that the first character following the forward slash is a lower case ell. Be sure to replace 123456 in the above example with the unique Asset ID obtained in Step B5. Choose the Target tab and set the target as desired.

7. Add text that indicates which item the user should click to read more information.

8. Click Save & Close. Preview the page to make sure the box operates as desired.

9. Repeat Steps 4-8 for all remaining tabs.