When adding links to your guides, they should always be added as Link Assets.

• Link assets are monitored by the Link Asset Manager.
  • If the link breaks, the manager will let us know.
• Reuse link assets whenever possible as it will make it much easier to batch update them.
• Give each link a brief description 
• Always have the description displayed beneath the item title.
  • Using a pop-up isn't accessible.
• Order link lists (and any other type resource list) by relevance, not alphabetically.
  • Try to keep link lists short (stick to seven or fewer) as users can become overwhelmed when faced with a ton of options.

If there's no way for you to use a Link Asset and you absolutely, positively, have to include a link in a Rich Text Box...

• The link text should make sense if it's read by itself.
  • Someone using a screen reader may choose to read only the links on the page.
    • "Click here!" and "More info" do not provide any information about where the link will lead.
  • Say this: "The US Government offers plain language guidelines to help you learn how to write for the web."
  • Not this: "Click here to view plain language guidelines created by the US Government."

Images can be used to make a page more attractive, break up text, or provide visual clues about the content of the page.

• Be sure to add sufficient Alternative Text (alt text) when applicable. For more information on alt text, visit the *Accessibility* page.
• When naming your image files, please do not keep the default meaningless file name that is automatically generated. Use descriptive file names.
• Use only high-quality images! Nothing makes a page look worse than grainy, pixelated images.

Image Manager Library

• Images can be added to your guides in various ways, such as embedded in a Rich Text / HTML box or added to a slideshow in a gallery box. However, no matter how you choose to make the image viewable on your guide, it should always be stored in the LibApps Image Manager Library. 
  • To insert an image into a Rich Text / HTML box, click the Image icon on the toolbar
  • In the Image Properties box that opens, click Browse Server. 
  • You are now in the Image Manager Library! 
  • Navigate to the Shared Library and check if the image you need has already been uploaded. If it hasn't, create a new folder for your guide and click Upload New Image.
  • To adjust the display size of your image, enter a percentage in the Width slot in the Image Properties window.
    • Think of it as the percentage of the width of the box that your image will take up. If you put 100%, your image will completely fill the width of the box. If you put 50%, your image will take up only half of the width of the box. For this to work properly, ensure that the Height slot is blank.
    • Remember: even if you resize an image in LibGuides, the page still loads the full image size. To reduce load times, resize images before uploading them to the LibApps Image Manager Library.

Reusing Images

• Please reuse images whenever possible! 
  • When uploading images, upload them into the Shared Library so others can reuse them if needed.
  • Be sure to keep things labeled properly and organized into folders! 
• If an image needs to be updated in every single instance it has been used (the UI of the search tool has changed and new screenshots are required, a logo has changed, etc.), this can easily be done within the Image Manager.
  • Upload the updated image with the same file name as the original to your LibApps Image Manager Folder.
  • The LibApps Image Manager will ask if you want to overwrite the existing image.
  • Click Overwrite > auto-update everywhere that image is used.
  • Note: This will only work properly if everyone works together to reuse images that have already been uploaded! If there are seven variations of what is essentially the same image being used across numerous guides, updating content becomes more complicated and tedious.

Copyright Restrictions

• Remember that images are subject to copyright, so ensure that you are citing the images in your guide properly. Unless an image is a book cover supplied by Springshare or created by you or your colleagues, images should be either available in the Public Domain or have a Creative Commons license.
  • Try to include the following (or as many as possible) in your citation:
    • Image creator's name (artist, photographer, etc.)
    • Title of the image
    • Date the image (or work represented by the image) was created
    • Date the image was posted online
    • Date of access (the date you accessed the online image)
    • Institution (gallery, museum) where the image is located/owned (if applicable)
    • Website and/or Database name
  • Citation software such as Zotero can help you properly format your citations.
  • If you created the image yourself, no citation is required.
• If an image has a Creative Commons license, add an attribution using the TASL method: Title, Author, Source, and Method.

View the sites below for Public Domain and Creative Commons images:

For help creating attributions for your images, visit the following sites:

• If you want to include books on your LibGuides, prioritize the inclusion of eBooks over physical books.
  • They are more easily accessible for students, especially international and commuter students.
• To add a book to your guide, select "Add / Reorder", then "Book from the Catalog".
  • If you input the ISBN, the rest of the necessary information should populate automatically. 
    • If it doesn't, you will unfortunately have to fill in everything manually.
  • Always include a permalink to the catalog page for the book!
  • If you choose to include a description of the book, always select the Description Display option "Beneath item title".
• Like with all other assets, reuse books from the catalog whenever possible!

Consider adding a variety of types of media to your research guides as people learn in many different ways! TedTalks, podcasts, playlists, and other types of multimedia can make a guide feel a bit more fun and casual while still supplying a lot of valuable information.

Two concerns to be aware of:

1. Be sure to pay attention to copyright restrictions.
2. Ensure that the resources have closed captions or are otherwise accessible to our users.

When adding videos, podcasts, playlists, or other types of media to your guide, always aim to embed the content as a widget rather than simply adding a link. If the media is embedded, users can watch/listen to/enjoy the media right here on the guide, rather than clicking a link to travel to an external webpage. You can usually find the embed code under the "Share" button of the resource. To add it to your guide, click "Add / Reorder" on a box, then select "Media / Widget". Be sure to reuse these widgets whenever possible! Having duplicates of the same resources clutters things up and makes things more complicated as time goes on.

Remember how LibGuides are created with responsive design, allowing them to resize according to the size of the user's screen? We can similarly create responsive embeds that automatically resize to fit their containing element. Basically, this means that if you embed a video into your guide with this method, it will completely fill the box it's in, making things look neat and clean. For an example, see the next box.

Example Code

<div class="embed-responsive embed-responsive-16by9">
<iframe class="embed-responsive-item" src="https://www.youtube.com/embed/LKr73G43-YQ?si=S_a122in_cDWH9GX" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe>
</div>

Making a Responsive Embed

For videos with a 16:9 aspect ratio (Most YouTube videos fall into this category)
<div class="embed-responsive embed-responsive-16by9">
  <iframe class="embed-responsive-item" src="..."></iframe>
</div>

For videos with a 4:3 aspect ratio
<div class="embed-responsive embed-responsive-4by3">
  <iframe class="embed-responsive-item" src="..."></iframe>
</div>

When I'm creating a responsive embed, I simply copy and paste the content's embed code (this can normally be found in the "Share" options) into a "Media / Widget" box, then add/delete items until it matches the above format.

For example, without any alterations, the original embed code for the example video/code is:

<iframe width="560" height="315" src="https://www.youtube.com/embed/LKr73G43-YQ?si=S_a122in_cDWH9GX" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe>

Because the code told me that the video is 560 pixels by 315 pixels, I now know that the aspect ratio is 16:9 (you can use an aspect ratio calculator to figure this out.) I'm going to add <div class="embed-responsive embed-responsive-16by9"> to the beginning of my code so it knows what the aspect ratio should be. Next, I'm going to delete the bit containing information about the size of the video—width="560" height="315"—and replace it with class="embed-responsive-item". Finally, because we opened up a <div> tag, we now need to close it by adding </div> to the very end of our code. 

In the end, it should look like this:

<div class="embed-responsive embed-responsive-16by9">
<iframe class="embed-responsive-item" src="https://www.youtube.com/embed/LKr73G43-YQ?si=S_a122in_cDWH9GX" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe>
</div>