Contents: Vignettes
Vignettes
Mauris rhoncus nisl vitae tellus gravida vehicula. Nam turpis dui, pulvinar eu condimentum et, fringilla ac eros. Fusce sollicitudin posuere nisi eget porttitor. Quisque aliquam efficitur dolor. Ut turpis ex, faucibus ut dictum in, pharetra condimentum nulla. Donec posuere vestibulum metus nec dapibus. Integer cursus tempus erat sed semper. Donec efficitur molestie erat quis cursus. Cras maximus, metus et cursus gravida, nunc ligula finibus diam, sit amet dignissim lorem purus a est. Nam tristique euismod placerat. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum vitae scelerisque libero, luctus varius augue. Suspendisse sagittis, felis finibus accumsan vehicula, velit eros venenatis eros, et venenatis metus lorem eu urna.
In hac habitasse platea dictumst. Duis nisi odio, finibus quis purus sed, pretium mattis odio. Phasellus at tincidunt sem, ac vestibulum massa. Nulla id magna efficitur, egestas turpis sit amet, feugiat tortor. Aliquam mi nisl, tempor eget sem a, feugiat pharetra ante. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam leo erat, cursus vitae mauris in, tincidunt dapibus felis. Sed non sodales est. Aliquam et nisi urna. Sed in imperdiet orci, at tristique neque.
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 %}

This is a Card
The card features an image from the collection as a cap
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" %}
This is an alert that ‘warns’ a user with centrally aligned text.
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" %}