Skip to Main Content

Digital Exhibits Guide

Quick Links

Scalar Support
Visit the blog, see Scalar's webinars and user guides, and more.

Scalar Guide
Quick link to Scalar 2 user guide.

Box
Chicago Collections uses Box for file storage and co-working. After your exhibit has been approved, use this link to quickly get to your Box account.

Need Help? Contact Us

Slack
Slack is a messaging application used for collaborative work. You can use the Chicago Collections Slack channel to ask questions about digital exhibits and find digital exhibit collaborations or subject experts.

Email
Send the Digital Resources & Collections Committee an email any time!

Exhibit Navigation

Paths

If you want people to view your exhibit in a specific order, you’ll need to create a "path" for them to follow: 

  • To create a numbered Table of Contents path in the body of a page, start on the first page with text. If you don’t want a Table of Contents in the body of a page, then start your path from the Title splash page

  • Input all the pages you want in your path either from the first page of your path (Edit-->Relationships-->Path) or from the dashboard (Relationships tab-->Paths pull-down menu)

  • For more information on creating paths, see the Scalar User's Guide

Thumbnails

You can use the card widget in combination with page thumbnails to create thumbnail navigation.  This can be done in addition to or instead of a path, as was done for "The Sporting Life: Stories from Chicago Collections archives" exhibit:

There are two steps for creating this kind of navigation: 

  1. For each page you want to include, assign a thumbnail by editing the page, then selecting the "Thumbnail" option in the "Styling" tab at the bottom 
  2. Add a card widget in the body of the text where the thumbnails will appear. The card images will be the thumbnails you just assigned. You can find out more about working with the card widget in the Scalar User's Guide

Displaying Multiple Images

To feature a gallery of images on a single page, use the Media Gallery or Structured Media Gallery layout.  For the pilot exhibit we initially used the Media Gallery layout for each theme page to display all images in that theme.  However, we included so many images in each gallery that the pages took up too much bandwidth.  This might be a viable solution for your exhibit, though, if you have a small number of few images. 

Another way to display a large group of images is to use a carousel widget, which is what we ended up doing for each theme page of the Sporting Life exhibit.  For us, a drawback is that the carousel doesn’t display image metadata in the same way as standalone image metadata is displayed.  If you want to feature metadata and images together in a carousel you’ll need to customize the caption text or link to the individual image pages. 

The pilot exhibit also features a page with all images in the entire exhibit that we called “Media Gallery” (not to be confused with the Media Gallery layout) since we wanted to showcase the different images from our various members.  This is entirely optional.  

And a general note: it is a little difficult to have multiple people in Scalar at the same time since you can't see what everyone is doing. If you have multiple people working on your exhibit, be sure to coordinate who is working on what and when.

Using CSS to Alter the Style of a Page

CSS (Cascading Style Sheets) can be applied at either the page level (see Editing Pages in the Scalar User's Guide for more on this topic) or at a project level (see Book Properties in the Scalar User's Guide for more.) The Sporting Life exhibit uses CSS to suppress icons and text that are built into the default Scalar style.

The Scalar Code Customizations-CSS section of the Appendix contains an outline of the global CSS changes we suggest using for your Chicago Collections digital exhibit. Each piece of code has a picture illustrating what is suppressed by the code. There are also comments directly in the CSS.  

Note: Please be aware that you cannot copy/paste the code directly into Scalar from the web or a rich text editor. First copy the code to Notepad or other text editor in order to get rid of any rich text formatting, then paste into Scalar.

Embedding HTML Code

One of the nice features of Scalar is that you can put HTML code into the text input fields for metadata (See Adding Additional Metadata in the Scalar User's Guide for more information on working with metadata in Scalar) and captions and they will render. Particularly of use are hyperlink (<a>), figure captions (<figcaption>), emphasis/italics (<em>) and bold(<strong>). In the Scalar Code Customizations-HTML section of the Appendix, you will find a few examples of how HTML code can be integrated into your digital exhibit. 

Embedded HTML code was used for formatting captions, linking to collections in EXPLORE, linking to institution pages in EXPLORE or Chicago Collections, linking to RightsStatements.org, and individual image pages for compound images.