Skip to Main Content

LibGuide Sustainability & Troubleshooting

Find ways to Jazz up your LibGuides with new content, bells, & whistles. Also checkout these tips for refreshing, upkeep, & troubleshooting your LibGuides

Gallery Boxes

What is a gallery box?

You can create galleries of images, books, databases, guides, and/or LibCal Events using the Gallery box type. It's easy to set up, you can mix and match any of the mentioned content items, and control settings like slide/transition speed, number of slides that appear at once, navigation dots, captions, and more.

The Gallery box was built with accessibility in mind, though (as with most other areas of the system) exactly how accessible it remains largely depends on what's added. For example: the box is accessible via keyboard and screen reader; an Alt Text field is available for all images; the left / right arrows on the box (to denote navigation between slides), dots (also denoting navigation / more slides), and captions do not overlap images

What are slides?

A slide is simply one of the items you add to the Gallery box. It could be a combination of an image and text, using one of the following items:

  • an Image,
  • a Book from the Catalog asset,
  • a Database asset,
  • a Guide screenshot,
  • an Event from LibCal.

Using the various settings in the Gallery box, you can also have several slides appear at once, in one row or in many. You could also have the transition of slides start automatically, or not -- there are many options for configuring the box just the way you want it..

Adding a Gallery Box

  1. While editing your guide, click on the page you want to edit in your guide's navigation menu (i.e. tabs or side-navigation).undefined
  2. Click the + Add Box link at the bottom of the column where you want the box to go. For example, to add a box to Column 2, click on + Add Box - Column 2.
  3. In the Add New Box window, enter the title for your box in the Box Name field.
    1. This will display in the box's heading.
    2. If displaying the box-level navigation in a side-navigation guide, it will also display in the list of boxes for the current page.
  4. Select Gallery from the Type dropdown.
  5. From the Position dropdown, select where in the column the new box should be added. You can add it to the top, bottom, or following any box in the column. (Don't worry: you can always reorder the boxes later.)
  6. If you would like to display the box without any borders, padding, or heading on the public view of your guide, select the Floating Box checkbox.
    1. While editing your guide, the box will still display with borders and a heading. The only difference is that you'll see the Floating Box icon appear in the heading.
    2. However, when previewing or viewing the public view of your guide, the borders and heading will be hidden.
  7. If you would like to hide this box from public view until its ready, select the Draft Mode checkbox.
    1. While enabled, you can only view the box while editing the guide. It will not be visible on the public guide, or while previewing the guide.
    2. Your system has the Publishing Workflow enabled, only a designated reviewer can take a hidden box out of draft mode.
  8. Click the Save button

gallery box

Configure Gallery Settings

While editing your guide, click on the page containing your gallery box in the guide's navigation menu.

  1. In the gallery box's heading, click on the Add/Edit Panes gear icon.undefined
  2. If you would like your slides to cycle automatically, set the Automatically Play option to On.
    1. When Automatically Play is enabled, use the Slide Speed to control how often each slide will display (in milliseconds) before advancing to the next slide.
    2. Use the Transition Type option to choose which effect to apply to slide transitions.
      1. The Slide effect will cause the new slide to advance from right to left.
      2. The Fade effect will cause the new slide to fade in, while the old slide fades out.
  3. Use the Transition Speed to control the animation speed of the slide transitions (in milliseconds).
  4. When Show Dots is set to On, navigation dots will appear below each slide.
    1. The current slide will be indicated by a black dot, while the others will be indicated by gray dots.
    2. Clicking on a dot will take you to that slide.
  5. Use the Max Image Height field to limit the maximum height of slide images. This can help you maintain a consistent height when using images with different dimensions.
    1. You can enter a fixed height in pixels (e.g. 300px) or a relative percentage height (e.g. 50%).
  6. If you would like to display your slides in a grid, set the Number of rows to 2 or more.
  7. When the Number of Rows is greater than 1, enter how many slides to display in each row using the Slides per Row option.
    1. For example, to create a 2 x 3 grid, you would set the Number of Rows to 2 and the Slides per Row​ to 3.
  8. When the Number of Rows is set to 1, enter how many slides to display at once using the Slides to Show option.
    1. For example, if you want to display two slides side-by-side, set the Slides to Show option to 2.
  9. Use the Slides to Scroll option to set how many slides are advanced at once.
    1. For example, if Slides to Show is set to 2 and Slides to Scroll is set to 1, then only one of the two slides will rotate out of view at a time.
  10. If your slides contain captions, use the Caption Position to customize where the captions display relative to the slide's content.
  11. Use the Caption Background to customize the background color of each slide's caption.
  12. Use the Caption Text to customize the font color of each slide's caption.
Click the Save and Return to Guide button when finished.

Adding an Image Slideundefined

  1. While editing your guide, click on the page containing your gallery box in the guide's navigation menu (i.e. tabs or side-navigation).
  2. In the gallery box's heading, click on the Add/Edit Panes gear icon.
  3. Click on the + Add New Slide button and select Image.
  4. 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).
  5. 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.
  6. 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.
  7. 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.
  8. 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.
  9. Click the Save button.

What are book slides?

 

A book slide allows you to display a Book from the Catalog asset in a gallery box. For example, if you wanted to create a gallery of new books in your collection, you could add a slide for each Book from the Catalog asset. This will display the book's cover art, title, and description.

Create your Book Asset First

Before you begin: you can only select from existing Book from the Catalog assets. In order to add a book to a slide, therefore, the asset must first be listed under Content > Assets. If it's not, create the asset there first, then add it to your slide.

 

Adding a Book Slideundefined

  1. While editing your guide, click on the page containing your gallery box in the guide's navigation menu (i.e. tabs or side-navigation).
  2. In the gallery box's heading, click on the Add/Edit Panes gear icon.
  3. Click on the + Add New Slide button and select Book.
  4. In the Add Book window, click on the dropdown and use the search box to find the Book from the Catalog asset you want to add.
    1. Can't find the book you're looking for? Go to Content > Assets and confirm that its been added to your LibGuides asset library.
    2. If it's not listed, you can add it directly from the Content > Assets page. Then, return to your gallery box and add it as a slide.
  5. Select the book you want to add from the list of results.
  6. Review the preview to see what will be added to your slide. You can always select a different book if needed.
  7. Click the Add button.

Customizing the Slide Title & Description

  • If you would like to edit or remove the book's title, description, or other info after adding your slide, click on the slide's Edit icon. (Any changes you make will only be reflected on this slide -- they will not affect the original Book from the Catalog asset.)

undefined

To create this:

I used these settings:

undefined

 

Gallery Box Best Practices

  • Keep your images consistent in size for your gallery
    • By creating them that way or by setting the max image height
  • Be conscious of copyright.  See the information on image sources, below.
    • No matter whether your image is reused, new, or external, you will need to add the following image attributes:
  • You can provide descriptive text ("alt tags") for your images.
  • You can complete the Alternative Text field to provide a brief description of the information contained in the image. 
    • This is very important for accessibility; imagine what you would need to know about the image if you could not see it. A good suggestion is to imagine you were describing the image in a short phone conversation.
  • Setting the alignment is not necessary in all cases but helps you to set the image to the left or right of text.
  • This controls position of the image relative to text. 
    • If you want to center the image on the line, you must edit the HTML source code.
  • Sizing the image is not necessary. 
    • If you change the default size, the size in pixels the image was when you added it, it may not resize correctly for mobile.
  • Use the Horizontal and Vertical spacing (in pixels, e.g., 5) to add space around the image so it does

eBooks @FIU Gallery Example Using Image Slides

How to be an Anti-racist

 

 

Test

cat running in firld

cat

This cat is super cat

cat drinking milkshake

other cat

wow this cat is cute

cat with tie

mcnugget

my cute cat