About, CollectionBuilder CSV

<div class="jumbo-title-box">
    
    <div class="p-2 text-center text-white bg-dark bg-opacity-75">
        <h2 class="display-4">CollectionBuilder CSV</h2>
        <p class="jumbo-tagline">Digital Collection Magic with Static Web Technologies</p>
    </div>
    
</div>

About CollectionBuilder CSV

This demo collection features items from the University of Idaho Library’s Digital Collections, and is build using CollectionBuilder-CSV.

CollectionBuilder-CSV is a “Stand Alone” template for creating digital collection and exhibit websites using Jekyll, given:

a CSV of collection metadata
a folder of images, PDFs, audio, or video files

Driven by your collection metadata, the template generates engaging visualizations to browse and explore your objects. The resulting static site can be hosted on any basic web server.

CollectionBuilder is an set of open source tools for creating digital collection and exhibit websites that are driven by metadata and powered by modern static web technology. See CB Docs for detailed information.

<div class="col-md text-center">
    <figure class="figure mx-3 feature-w-75">
        <a href="/CB-demo/items/demo_001.html">
            <img class="figure-img img-fluid rounded lazyload" alt="historic sepia photograph depicting a formal brick and stone building in the College Gothic style"  title="click to see item" src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 3 2'%3E%3C/svg%3E" data-src="/CB-demo/objects/small/demo_001_sm.jpg" >
        </a>
        <figcaption class="figure-caption text-center"><a href="/CB-demo/items/demo_001.html">Administration Building, University of Idaho, No. 30</a></figcaption>
    </figure>
</div>

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.

Feature Includes Bonanza page

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" %}

<div class="col-md text-center">
    <figure class="figure mx-3 feature-w-75">
        <a href="/CB-demo/items/demo_001.html">
            <img class="figure-img img-fluid rounded lazyload" alt="historic sepia photograph depicting a formal brick and stone building in the College Gothic style"  title="click to see item" src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 3 2'%3E%3C/svg%3E" data-src="/CB-demo/objects/small/demo_001_sm.jpg" >
        </a>
        <figcaption class="figure-caption text-center"><a href="/CB-demo/items/demo_001.html">Administration Building, University of Idaho, No. 30</a></figcaption>
    </figure>
</div>

Include a PDF

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

<figure class="figure border rounded p-1 feature-w-50">
    <div class="ratio ratio-1x1">
        <object aria-label="pdf embed of Spokane County Court House, Spokane, Washington"  data="/CB-demo/objects/demo_002.pdf">
            <p>The PDF is not rendering in your browser. Please <a href="/CB-demo/objects/demo_002.pdf">download the PDF</a> to view.</p>
        </object>
    </div>
    <figcaption class="figure-caption"><a href="/CB-demo/items/demo_002.html">Spokane County Court House, Spokane, Washington</a></figcaption>
</figure>

Include a Video

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

<figure class="mx-auto feature-w-75">
    <div class="ratio ratio-16x9"><iframe title="video embed &lt;a href=&quot;/CB-demo/items/demo_004.html&quot;&gt;University of Idaho vs. University of Southern California (Football), 10/30/1925&lt;/a&gt;" src="https://www.youtube-nocookie.com/embed/CVXQ3X6Q8oU?rel=0&modestbranding=1" allowfullscreen></iframe>
        </div>
    
    <figcaption class="figure-caption">
        <a href="/CB-demo/items/demo_004.html">University of Idaho vs. University of Southern California (Football), 10/30/1925</a>
    </figcaption>
    
</figure>

Include an Audio File

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

Good News – Power (Radio Episode Excerpt)

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 %}

<img class="card-img-top" src="/CB-demo/objects/small/demo_001_sm.jpg" alt="historic sepia photograph depicting a formal brick and stone building in the College Gothic style"><h5 class="card-header">This is a Card</h5><div class="card-body">
    <div class="card-text"><p>The card features an image from the collection as a cap</p>

</div>

</div>

Include a Button

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

Button Link to Somewhere

Include an Alert

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

This is an alert that ‘warns’ a user with centrally aligned text.

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" %}

<button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#this-is-a-modal-using-a-primary-colored-button-to-invite-clickingModal">This is a modal using a 'primary' colored button to invite clicking</button>

<div class="modal-dialog" role="document">
    <div class="modal-content">
        <div class="modal-header">
            <h5 class="modal-title" id="this-is-a-modal-using-a-primary-colored-button-to-invite-clickingModalLabel">When clicked:</h5>
            <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
        </div>
        <div class="modal-body" >
        <p>A Modal will pop out a box with some more information</p>

        </div>
    </div>
</div>

Technical Credits - CollectionBuilder

This digital collection is built with CollectionBuilder, an open source framework for creating digital collection and exhibit websites that is developed by faculty librarians at the University of Idaho Library following the Lib-Static methodology.

Using the CollectionBuilder-CSV template and the static website generator Jekyll, this project creates an engaging interface to explore driven by metadata.

More Information Available

Technical Specifications
IMLS Support

CollectionBuilder CSV