Making LibGuides

You can add “fun stuff” – multimedia content, catalog items, databases, images, buttons, and more– to your guide. We’ve included links to documentation demonstrating how to include:

• Books
• Databases
• Buttons
• Video and Multimedia Content
• Images
• Search Boxes
• Gallery Boxes
• Embedded Audio Player

Have an idea for a new content type? Contact Hannah Fountain-Pileggi (hfounta8@pratt.edu) for support.

Adding a book asset to your guide imports its cover artwork and some bibliographic information. You can edit additional bibliographic details as well as our local call number and catalog permalink.

Adding a database from our Databases A-Z list imports its title and description, access icons, and links directly to the resource.

If you feel comfortable inserting HTML, Buttons can be wonderful tool for drawing user attention to key resources or content. To use the button below, copy the code and insert it as html in the LibGuides Rich Text Editor. Be sure to switch on the source code editor first! The button for this is located on the top-right of the rich text editor.

Replace the # with your hyperlink. Replace "Go Somewhere" with your resource. It's good user experience to name your buttons clearly. Don't name your button "more" or "learn more here." Sending people to Special Collections? Name the button "Go to Special Collections."

<a class="btn btn-spring" href="#">Go Somewhere</a>

<a class="pratt-btn" href="#">Go Somewhere else</a>

<a class="special-btn" href="#">Go Somewhere else</a>

We can embed video content using LibGuide's Media/Widget Asset Tool.

Did you know that you can embed videos from Kanopy, Docuseek, and Alexander Street Press?  Simply find the movie of your choice, click Share or Embed, and copy the code. Use the the LibGuides Media/Widget Asset Tool to paste the code in Please note that patrons will need to log in with their OneKey if they are off-campus.

<iframe allow='encrypted-media;' width='640' height='390' src='https://pratt.kanopy.com/embed/202943?v=20190405' frameborder='0' allowfullscreen webkitallowfullscreen mozallowfullscreen></iframe>

To add images to your guide, use the image insertion tool when editing Rich Text/HTML content by clicking the images icon ().

The LibGuides Image Manager allows you to upload and organize images to use across guides. Don't forget to add alt text!

OPAC Search Boxes

You can embed an OPAC search bar into your guide! Depending upon your familiarity with HTML, you can also configure your search to limit results to specific locations or material types.

To add an OPAC search bar to your guide, add a Rich Text/HTML asset block, then copy and paste the code below into your HTML source editor, adding your own placeholder search text:

<div class="col-12 col-sm-12>
<div class=" row="">
<form action="https://cat.pratt.edu/search/X" id="srchbox" method="get" name="srchbox"><input aria-label="OPAC Search" id="searcharg" name="searcharg" placeholder="Placeholder Text Here" style="width:70%; border-color:black; border-width:1px; padding: 6px 12px;" type="search" /><button class="btn btn-spring" name="commit" type="submit" value="Search">SEARCH&nbsp;&nbsp;<i class="fa fa-search"></i></button></form>
</div>
<script>
document.getElementById('searcharg').focus();
var opacForm = document.getElementById('srchbox');
opacForm.addEventListener('submit',function(e) {
e.preventDefault();
var searchField = document.getElementById('searcharg');
searchField.name = 'SEARCH';
searchField.value = '(' + searchField.value + ')';
opacForm.submit();
});
</script>

Digital Collections (JSTOR) Search Boxes

You can also add a Pratt Institute Libraries Digital Collections search box to your guide:

To add a Digital Collections search bar to your guide, add a Rich Text/HTML asset block, then copy and paste the code below into your HTML source editor.

<div class="col-12 col-sm-12">
<div class="row">
<form action="https://www.jstor.org/action/doBasicSearch" id="srchbox" method="get" target="_blank">
<div><input name="Query" placeholder="Search Pratt Institute Libraries Digital Collections" style="width:60%; border-color:black; border-width:1px; padding: 12px;margin: 12px; type=" text="" /><input name="scope" type="hidden" value="eyJpZCI6ICIxMDAwODQ3ODciLCAicGFnZU5hbWUiOiAiUHJhdHQgSW5zdGl0dXRlIExpYnJhcmllcyBEaWdpdGFsIENvbGxlY3Rpb25zIiwgInBhZ2VVcmwiOiAiL3NpdGUvcHJhdHQvIiwgInR5cGUiOiAicG9ydGFsIn0=" /><button class="btn btn-spring" name="commit" style="padding: 12px;" type="submit" value="Search">SEARCH&nbsp;&nbsp;<i class="fa fa-search"></i></button></div>
</form>
</div>
</div>

You can embed an audio player into your guides using your own files, or a file available online. 

Embedding your own files into an audio player is simple, but the process requires some familiarity with HTML editing. If you're linking to an audio file stored somewhere on the Web, you can omit the steps prompting you to create an invisible "Container" box to store your files and instead link directly to your target audio assets.

To add an embedded audio player loaded with your own file, follow the steps outline below:

1. First, you'll need to ready your audio and transcript files. Your audio should be in MP3 format, and your transcript should be a PDF document. 
2. Next, create two empty, standard boxes. One box will serve as an invisible container to hold your files, while the other box will contain your visible, interactive audio player. Label your boxes "Container" and "Player" for now, and make sure both boxes are in draft mode. 
3. In your "Container" box, upload your files by adding them as document/file assets. After you have added your audio and transcript files, you'll need to copy their URLs. To do this, you can open your freshly uploaded document/file assets in your browser and copy their URLs, or you can try right-clicking and selecting 'copy link address'. Whichever method you choose, paste both URLs in an easily retrievable place, as you'll need them when configuring your audio player. 'Save & Close'.
4. Next, configure your "Player" box by adding a rich text/html content block. In the Rich Text Editor, click 'source' to enable HTML editing. Copy the template below and paste it into your HTML editor, adding your own description and asset URLs. To preview what your audio player looks like, click 'source' again. 'Save & Close' when finished.

   <figure>
   <figcaption>Brief description of audio content:</figcaption>
   <audio controls="" src="Link to Audio File"></audio>
   <p><a href="Link to Audio File">Download audio</a></figure>
   <br><a href="Link to Transcript File">Download transcript</a></p>
   </figure>
   

5. Finally, disable draft mode for the "Player" box. This will make your audio player visible on your public guide. Rename your "Player" box or designate it a floating box. Leave the "Container" box in draft mode; this box does not need to be visible on your public guide for your player to work or for users to be able to access/download files. 

Sometimes referred to as a carousel, a gallery box allows you to rotate (automatically or manually) through a set of slides.

A slide is a combination of an image and text that rotates through the gallery, similar to a slide in a presentation. Each gallery box can have a maximum of 100 slides.

You can create the following slides with images, books from the catalog, databases, LibGuide screenshots, and LibCal events.

See Springshare's step-by-step guide for adding Gallery Boxes.