FAQ content

Guides: How to use gallery boxes

In this article

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, not unlike a slide in a PowerPoint presentation -- each gallery box can have a maximum of 100 slides.

You can create the following types of slides:

Example of a Gallery box with 2 rows of slides, 3 slides per row, no captions.

Gallery boxes are easy to set up and customize, with options to control things like transition speed between slides, the number of slides that appear at once, navigation dots, captions, and more.

The gallery box was built with accessibility in mind. For example, the box is accessible via keyboard and screen reader by default; 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. As with other user-created content, however, how accessible it remains largely depends on the content of your slides and the options & colors used.

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).
  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.

Clicking the Add Box link

  1. In the Add New Box window, enter the title for your box in the Box Name field.
    • This will display in the box's heading.
    • If displaying the box-level navigation in a side-navigation guide, it will also display in the list of boxes for the current page.
    • Please note: Only limited HTML tags are allowed in a box's title. These include: <strong>, <b>, <em>, and <i> (as used in Font Awesome icons). For best results, however, we recommend using CSS code to style box titles.

Adding a new gallery box

  1. Select Gallery from the Type dropdown.
  2. 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.)
  3. 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.
    • 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.
    • However, when previewing or viewing the public view of your guide, the borders and heading will be hidden.
  4. If you would like to hide this box from public view until its ready, select the Draft Mode checkbox.
    • 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.
    • Note: if your system has the Publishing Workflow (CMS-only) enabled, only a designated reviewer can take a hidden box out of draft mode.
  5. Click the Save button.

Add an image slide

An image slide allows you to display an image with an optional caption and description. For example, if you wanted to create a gallery of images from a recent event, you could add a slide for each image to your gallery box. Images can be uploaded and selected from your personal or shared Image Manager libraries.

Example of an image slide

To add an image slide to a gallery box:

  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 () icon.

Clicking the Add/Edit Panes icon to edit a gallery box

  1. Click on the  Add New Slide button and select Image.

Selecting Image from the Add New Slide dropdown

  1. 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).

Configuring an image slide

  1. 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.
  2. 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.
  3. 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.
    • If you entered a Link URL, then the title will also link to that URL.
  4. 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.
  5. Click the Save button.

Add a book from the catalog slide

A book slide allows you to display a copy of the cover art, title, and description of 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. 

Please note that when you create a book slide from a Book from the Catalog asset, you are copying the details of that asset -- the slide is not mapped or connected to the original asset in any way. If you make changes to (or delete) the original asset, your slide is not impacted. 

 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.

Example of book slides in a grid layout

To add a book from the catalog slide to a gallery box:

  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 () icon.

Clicking the Add/Edit Panes icon to edit a gallery box

  1. Click on the  Add New Slide button and select Book.

Selecting Book from the Add New Slide dropdown

  1. 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.
    • Can't find the book you're looking for? Go to Content > Assets and confirm that its been added to your LibGuides asset library.
    • 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.

Selecting a book

  1. Select the book you want to add from the list of results.
  2. Review the preview to see what will be added to your slide. You can always select a different book if needed.
  3. Click the Add button.

Adding a book slide

Customize a book slide's title and description

  1. 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.)

Editing a book slide


Add a database slide

A database slide allows you to display a database from your LibGuides A-Z List in a gallery box. For example, if you wanted to create a gallery of new trial databases, you could add a slide for each database that includes a thumbnail, link, and description.

 Before you begin: you can only select from existing databases in your A-Z List. In order to add a book to a slide, therefore, the database must first be listed under Content > A-Z Database List. If it's not, an admin must create the asset there first, then you can add it to your slide.

Example of a database slide

To add a database slide to a gallery box:

  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 () icon.

Clicking the Add/Edit Panes icon to edit a gallery box

  1. Click on the  Add New Slide button and select Database.

Selecting Database from the Add New Slide dropdown

  1. In the Add Database window, click on the dropdown and use the search box to find the database you want to add from your A-Z List.
    • Can't find the database you're looking for? If it's not listed in your A-Z Database List, an admin can add it directly from the Content > A-Z Database List page. Then, you can return to your gallery box and add it as a slide.
  2. Select the database you want to add from the list of results.

Selecting a database

  1. Review the preview to see what will be added to your slide. You can always select a different database if needed.
  2. Click the Add button.

Adding a database slide

Customizing a database slide's title and description

  1. If you would like to edit or remove the database'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 actual database in your A-Z List.)

Editing a database slide


Add a LibGuide slide

A LibGuide slide allows you to highlight one of your guides in a gallery box. For example, if you wanted to create a gallery of popular subject guides, you could add a slide for each guide. Each slide includes a screenshot of the guide's homepage, along with its title and description. Clicking on the screenshot or the title will take the user to that guide.

Example of a LibGuide slide

To add a LibGuide slide to a gallery box:

  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 () icon.

Clicking the Add/Edit Panes icon to edit a gallery box

  1. Click on the  Add New Slide button and select LibGuide.

Selecting LibGuide from the Add New Slide dropdown

  1. In the Add LibGuide window, click on the dropdown and use the search box to find the guide you want to add from your LibGuides system.
  2. Select the guide you want to add from the list of results.

Selecting a guide

  1. Review the preview to see what will be added to your slide. You can always select a different guide if needed.
  2. Click the Add button.

Adding a LibGuide slide

Customizing a LibGuides slide's title and description

  1. If you would like to edit or remove the guide'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 actual guide.)

Editing a LibGuide slide


Add a LibCal event slide

If your library subscribes to a paid tier of LibCal (i.e. you do not have a free 3/3/3 subscription), you can highlight your upcoming events by adding LibCal event slides to a gallery box. For example, if you wanted to create a gallery of upcoming workshops, you could add a slide for each event. Each slide will display the event's image, title, description, date, time, locatinon categories -- all pulled directly from your LibCal calendar.

Example of a LibCal event slide

To add a LibCal event slide to a gallery box:

  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 () icon.

Clicking the Add/Edit Panes icon to edit a gallery box

  1. Click on the  Add New Slide button and select LibCal Event.

Selecting LibCal Event from the Add New Slide dropdown

  1. In the Add LibCal Event window, click on the dropdown and use the search box to find the event you want to add from your LibCal system.
  2. Select the event you want to add from the list of results.

Selecting an event

  1. Review the preview to see what will be added to your slide. You can always select a different event if needed.
  2. Click the Add button.

Adding a LibCal Event slide

Customizing a LibCal event slide's title and description

  1. If you would like to edit or remove the event'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 actual event.)
 Note: when you add a LibCal Event slide, the event's info is copied to your slide. However, the slide is not linked to the event. If any changes are made to the event in LibCal (such as the date, time, or location), you will have to make the corresponding changes to your slide, as well.

Editing a LibCal Event slide


Gallery box settings

To customize the settings for a gallery box:

  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).

Clicking the cog icon to edit a gallery box

  1. In the gallery box's heading, click on the Add/Edit Panes () icon.

Customizing a gallery box's settings

  1. In the Gallery Settings column, customize the settings as desired.
    1. If you would like your slides to cycle automatically, set the Automatically Play option to On.
    2. 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.
    3. Use the Transition Type option to choose which effect to apply to slide transitions.
      • The Slide effect will cause the new slide to advance from right to left.
      • The Fade effect will cause the new slide to fade in, while the old slide fades out.
    4. Use the Transition Speed to control the animation speed of the slide transitions (in milliseconds).
    5. When Show Dots is set to On, navigation dots will appear below each slide.
      • The current slide will be indicated by a black dot, while the others will be indicated by gray dots.
      • Clicking on a dot will take you to that slide.
    6. 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.
      • You can enter a fixed height in pixels (e.g. 300px) or a relative percentage height (e.g. 50%).
    7. If you would like to display your slides in a grid, set the Number of rows to 2 or more.
    8. When the Number of Rows is greater than 1, enter how many slides to display in each row using the Slides per Row option.
      • 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.
    9. When the Number of Rows is set to 1, enter how many slides to display at once using the Slides to Show option.
      • For example, if you want to display two slides side-by-side, set the Slides to Show option to 2.
    10. Use the Slides to Scroll option to set how many slides are advanced at once.
      • 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.
    11. If your slides contain captions, use the Caption Position to customize where the captions display relative to the slide's content.
    12. Use the Caption Background to customize the background color of each slide's caption.
    13. Use the Caption Text to customize the font color of each slide's caption.
  2. Click the Save and Return to Guide button.

Example gallery box configurations

2x3 grid of Book from the Catalog assets

To recreate this, set the Number of Rows to 2 and the Slides Per Row to 3.

Gallery box displaying 2 rows of 3 slides

1 row showing 2 slides at a time

To recreate this, set the Number of Rows to 1 and Slides to Show to 2.

Gallery box displaying 1 row with 2 slides


Reorder slides

  1. Click the Double Arrow () icon and drag the slide into a new position.
  2. Drop the slide into place.
  3. Click the Save and Return to Guide button. 

Example of reordering slides 


Advanced: Customizing the CSS for a gallery box

One way to customize the appearance of your guides is by customizing the styles and colors of your content boxes. Want border-less boxes? Squared corners instead of rounded? Blue box headers instead of gray? These are just a few things you can do in your guide's Tab & Box Options. Tab & Box options can be set at three levels:

  • Admin users can customize the default Tab & Box Options for all guides in your system. To prevent users from deviating from these colors, admins can also lock every guide into those defaults. This can help maintain a uniform look and feel throughout your LibGuides site.
  • Group admins can customize the default Tab & Box Options for all guides in their group. To prevent users from deviating from these colors, admins can also lock every guide into those defaults. This can help maintain a uniform look and feel throughout your LibGuides site.
  • Guide owners and editors (and all admins) can customize the Tab & Box Options for individual guides. Admins have the ability to force each guide to use the same tab and box styles. If that's the case, then a guide's Tab & Box Options will be disabled.

CSS map for a gallery box

Diagram of a gallery box


Pointer - section 1

The entire box:

.s-lib-box: use this class to target all boxes in your guides

Tip: Remember, if you want to change the border color or width, you can do this in your look & feel settings!

Default CSS:

.s-lib-box {
  border-color: #cccccc;
  border-width: 1px;
  box-shadow: 0 8px 6px -6px #AAAAAA;
  border-radius: 4px 4px 4px 4px;
  background-color: #fff;
}

Pointer - section 2

The box header and title:

.s-lib-box .s-lib-box-title: use these classes to target your box headings

Tip #1: Remember, if you want to change the header background color or the font color, you can do this in your look & feel settings!

Tip #2: If you decide to hide your box titles, we suggest that you check the "Do not include this code on guide edit page" check box on your Custom JS / CSS page.

Default CSS:

.s-lib-box .s-lib-box-title {
  background-color: #f1f1f1;
  background-image: none;
  color: #888;
  border-bottom: 1px solid #cccccc;
  border-radius: 3px 3px 0px 0px;
}

Pointer - section 3

Gallery box area:

.s-lib-box-content : this class targets the gallery's "container", which houses the slide's content and navigation.

.slick-slider: this sets the margins & positioning for the slide's content.

.slick-initialized .slick-slide: this element contains the visible slide's image, title, and details.

.slick-slide a img: this code targets each image when the image has a link.

.slick-slide img: this code targets each image when the image does not have a link. It's best to use this code in tandem with .slick-slide a img.

Default CSS:

.s-lib-box-content {
  padding: 10px;
}

.slick-slider {
  margin-left: 20px;
  margin-right: 20px;
  position: relative;
  display: block;
  box-sizing: border-box;
  user-select: none;
  touch-action: pan-y;
  -webkit-tap-highlight-color: transparent;
}

.slick-slide {
  float: left;
  height: 100%;
  min-height: 1px;
}

.slick-initialized .slick-slide {
  display: block;
}

.slick-slide img {
  display: block;
  max-width: 100%;
  width: 100%;
}

Pointer - section 4

Navigation arrows:

.slick-prev, .slick-next: these are the gallery's left and right navigation arrows, respectively.

Default CSS:

.slick-prev, .slick-next {
  font-size: 0;
  line-height: 0;
  position: absolute;
  top: 50%;
  width: 20px;
  height: 20px;
  padding: 0;
  transform: translate(0, -50%);
  cursor: pointer;
  color: transparent;
  border: none;
  outline: none;
  background: transparent;
}

.slick-prev {
  left: -20px;
  z-index: 2;
}

.slick-next {
  right: -25px;
  z-index: 2;
}

Pointer - section 5

Slide text:

.slick-slide .s-lib-cpane-caption: this class targets both the Slide Title (the larger text) and the Slide Details (the smaller text).

.s-lib-cpane-caption h3: this will target the Slide Title only.

.s-lib-cpane-caption p: this will target the Slide Details only.

Default CSS:

.s-lib-cpane-caption {
  padding: 10px;
  width: 100%;
  display: block;
  vertical-align: top;
}

Pointer - section 6

Slide indicators (dots):

.slick-dots: this class targets the whole section of indicator dots.

.slick-dots li: this set's the positioning and margins of each dot (this element contains the dot, which is a button element).

.slick-dots li button: this targets each individual indicator dot.

.slick-active button: this targets the indicator dot of the current slide.

Default CSS:

.slick-dots {
  position: absolute;
  bottom: -25px;
  display: block;
  width: 100%;
  padding: 0;
  margin: 0;
  list-style: none;
  text-align: center;
}

.slick-dots li {
  position: relative;
  display: inline-block;
  width: 20px;
  height: 20px;
  margin: 0 5px;
  padding: 0;
  cursor: pointer;
}

.slick-dots li button {
  font-size: 0;
  line-height: 0;
  display: block;
  width: 20px;
  height: 20px;
  padding: 5px;
  cursor: pointer;
  color: transparent;
  border: 0;
  outline: none;
  background: transparent;
}
Want to target one box?
Click on the icon and grab the box ID! Then use that number to create the HTML ID.
Ex. If your box ID is 123, use #s-lg-box-123 in your CSS!
If you want to target a specific part of that box - like the box header - just combine the ID with the code above.
CSS code example:
#s-lg-box-123.s-lib-box .s-lib-box-title {
  background-color: #ff0099;
}