LibGuide tips

Sometimes you want to add a picture to your rich text box, but you don't want it to take too much space of your box. Then a thumbnail would be a perfect choice. Something like this.

Follow these steps to make your picture popup.

1. Click the picture you have just inserted in your textbook.
2. Click the Picture icon in the toolbar.
3. Copy the URL in the popup window.
4. Close the popup window.
   
5. Click the Hyperlink icon in the toolbar.
6. Paste the URL in the URL filed.
7. Click the Target tab at the top of the popup window.
   
8. Select Popup Window in Target filed.
9. Fill in Width and Height. These two figures depend on how big your picture is.
10. Fill in Left Position and Top Position. These two figures depend on where you want the pop up window be. Left Position 500 and Top Position 300 is my preferred setup. 
    

You may need to update your profile image on LibGuides.

We recommend that the photo you use is of a rectangular shape of about 150 wide and 210 high.

1. After you logged in LibGuides V2, click your account at the top right corner.

2. On your account management page, click “My Profile” tab.

3. In the “title & image” box, check “upload a new profile image”, and click “select new image” to upload a photo from your PC.

4. Now, your photo is changed in your profile box, and will on pages that your profile appears.

To add an image to a box, you need to upload an image into either your personal or shared image directory.

Always remember that large images take a long time to load, especially on a mobile device, so always resize and compress your images before loading them into the image directory or your libguide.

To display in your libguide, you need to use/add a rich text box, click on the image button, and then select the image from the directory.

To make an image pop out on a hover you need to create a class where the image sits and then a css parameter e.g. {transform:scale (1.5;} on the hover state. 

There is a class set up for image-pop-hover of a scale of 1.5

.image-hover-pop:hover {transform:scale(1.5);}

See https://www.w3schools.com/cssref/css3_pr_transform.php

If you don't want your image to be appeared on mobile screens, you can just add Bootstrap class of visible-lg in front of your image source. Detailed steps as below:

1. save your image into the libguides, then edit again using html.
2. locate the image that you inserted and change the code to be 
   <img alt="your image description" class="visible-lg" src="......." />

Now your image will only appear on big screens:)