curating the library of congress

About The Collection

This demo collection features items from the The Library of Congress.

The metadata was created in a CSV file. The styling was done by me.

About the About Page

We want to make engaging interpretive pages easier to create, so CollectionBuilder gives you tools to write with your collection content!

The template comes with a customizable “About” page layout designed for long form content with rich media embeds. Content is written in Markdown and enhanced using “includes” that pull in collection content, external media, and Bootstrap features like cards and modals. We hope this makes it easier for site builders to develop the collection AND add interesting and engaging contextual information.

Each “include” file has several options, which are documented in the files themselves–copy the examples to see how it works with your content! In the demo below, we’ve given display widths of 25% and 50% to save space, but you can feature the entire image or document.

You can also see a page featuring a bonanza of feature includes options on our CollectionBuilder-GH demo site.

Include Collection Items

The template provides includes to pull your collection objects and metadata into your interpretive page, allowing you to write with your materials directly embedded in the content.

Include an Image

• Image –> {% include feature/image.html objectid="demo_001" width="75" %}

Include a PDF

• PDF – > {% include feature/pdf.html objectid="demo_002" width="50" %}

Include a Video

• Video: {% include feature/video.html objectid="demo_004" %}

Include an Audio File

• Audio: {% include feature/audio.html objectid="demo_003" %}

Include Bootstrap Features

The template also provides includes to make it easier to add Bootstrap components to your Markdown writing. These features allow you to better organize and highlight your content.

Include a Card

• Card – > {% include feature/card.html header="This is a Card" text="The card features an image from the collection as a cap" objectid="demo004" width="25" centered=true %}

Include a Button

• Buttons – > {% include feature/button.html text="Button Link to Somewhere" link="https://collectionbuilder.github.io/" color="success" %}

Include an Alert

• Alerts – > {% include feature/alert.html text="this is an *alert* that 'warns' a user" color="warning" align="center" %}

Include a Modal

• Modals – > {% include feature/modal.html button="This is a modal using a 'primary' colored button to invite clicking" title="when clicked:" text="A Modal will pop out a box with some more information" color="primary" %}

Feature Includes Bonanza page

Check all the includes. Steal Code!

Image Options

Image from Collection (auto caption)

Example Code –> {% include feature/image.html objectid="demo_001" width="75" %}

Image from Collection (with a caption)

Example Code –> {% include feature/image.html objectid="demo_001" width="75" caption="an image" %}

Multiple Images from the Collection (auto caption)

Example Code –> {% include feature/image.html objectid="demo_001;demo_004;demo_002" %}

Multiple Images from the Collection (with captions)

Example Code –> {% include feature/image.html objectid="demo_001;demo_004;demo_002" width="75" caption="demo1;nother" %}

External Image (without a caption)

Example Code –> {% include feature/image.html objectid="https://www.lib.uidaho.edu/collectionbuilder/demo-objects/mg101_b6_photographs_01.jpg" width="75" alt="Frank B. Robinson at the Organ" %}

External Image (with a caption)

Example Code –> {% include feature/image.html objectid="https://www.lib.uidaho.edu/collectionbuilder/demo-objects/mg101_b6_photographs_01.jpg" width="75" alt="Frank B. Robinson at the Organ" caption="This guy is good!"%}

Multiple External Images (with captions and a link)

Example Code –> {% include feature/image.html objectid="https://www.lib.uidaho.edu/collectionbuilder/demo-objects/mg101_b6_photographs_01.jpg;https://www.lib.uidaho.edu/collectionbuilder/demo-objects/mg101_b6_psychiana_photographs_010.jpg" caption="this guy!;(was nothing without these women!)" link="https://www.lib.uidaho.edu/digital/psychiana/items/psychiana519.html;https://www.lib.uidaho.edu/digital/psychiana/items/psychiana547.html" alt="Frank B. Robinson at the Organ;Women staff members of Psychiana lined up outside the Psychiana headquarters" %}

PDF Options

PDF from Collection (auto caption)

Example Code –> {% include feature/pdf.html objectid="demo_002" width="50" %}

PDF from the Collection (with a caption)

Example Code –> {% include feature/pdf.html objectid="demo_002" width="50" caption="a pdf from the collection" %}

External PDF (without a caption)

Example Code –> {% include feature/pdf.html objectid="https://www.lib.uidaho.edu/collectionbuilder/demo-objects/uiext21768.pdf" width="50" %}

External PDF (with a caption)

Example Code –> {% include feature/pdf.html objectid="https://www.lib.uidaho.edu/collectionbuilder/demo-objects/uiext21768.pdf" width="50" caption="Safe Chainsawing is Important!" %}

Video Options

Video from Collection (auto caption)

Example Code –> {% include feature/video.html objectid="demo_004" width="75" %}

Video from the Collection (with a caption)

Example Code –> {% include feature/video.html objectid="demo_004" width="50" caption="a video from the collection" %}

External Video File (without a caption)

Example Code –> {% include feature/video.html objectid="https://cdil.lib.uidaho.edu/storying-extinction/objects/trailcams/videos/ballcreek-cedarrub-birdonpath.mp4" width="50"%}

External Video File (with a caption)

Example Code –> {% include feature/video.html objectid="https://cdil.lib.uidaho.edu/storying-extinction/objects/trailcams/videos/ballcreek-cedarrub-birdonpath.mp4" caption="Bears are Important!" width="50" %}

External Vimeo Video

Example Code –> {% include feature/video.html objectid="https://vimeo.com/464555587" width="50" caption="vimeo caption" %}

External Youtube Video

Example Code –> {% include feature/video.html objectid="https://www.youtube.com/watch?v=dbKNr3wuiuQ" width="50" caption="youtube caption" %}

Audio Options

Audio from Collection (auto caption)

Example Code –> {% include feature/audio.html objectid="demo_003" width="50" %}

Audio from the Collection (with a caption)

a mp3 from the collection

Example Code –> {% include feature/audio.html objectid="demo_003" width="50" caption="a mp3 from the collection" %}

External Audio (without a caption)

Example Code –> {% include feature/audio.html objectid="https://www.lib.uidaho.edu/digital/mp3s/Clouds.mp3" %}

External Audio (with a caption)

Clouds are Important!

Example Code –> {% include feature/audio.html objectid="https://www.lib.uidaho.edu/digital/mp3s/Clouds.mp3" width="50" caption="Clouds are Important!" %}

Cloud Include

Example Code –> {% include feature/cloud.html fields="subject" min="1" background="dark" button="outline-warning" %}

TimelineJS

Example Code –> {% include feature/timelinejs.html %}

Include Bootstrap Features

Include a Card

• Card – > {% include feature/card.html header="This is a Card" text="The card features an image from the collection as a cap" objectid="demo004" width="25" centered=true %}

Include a Button

• Buttons – > {% include feature/button.html text="Button Link to Somewhere" link="https://collectionbuilder.github.io/" color="success" %}

Include an Alert

• Alerts – > {% include feature/alert.html text="this is an *alert* that 'warns' a user" color="warning" align="center" %}

Include a Modal

• Modals – > {% include feature/modal.html button="This is a modal using a 'primary' colored button to invite clicking" title="when clicked:" text="A Modal will pop out a box with some more information" color="primary" %}