bqkc/_includes/cb/feature_options.md

Feature Includes Bonanza page

Check all the includes. Steal Code!

---

Image Options

Image from Collection (auto caption)

{% include feature/image.html objectid="demo_001" width="75" %}

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

Image from Collection (with a caption)

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

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

Multiple Images from the Collection (auto caption)

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

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

Multiple Images from the Collection (with captions)

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

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

External Image (without a caption)

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

Example Code --> {% raw %}{% 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" %}{% endraw %}

External Image (with a caption)

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

Example Code --> {% raw %}{% 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!"%}{% endraw %}

Multiple External Images (with captions and a link)

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

Example Code --> {% raw %}{% 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" %}{% endraw %}

---

PDF Options

PDF from Collection (auto caption)

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

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

PDF from the Collection (with a caption)

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

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

External PDF (without a caption)

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

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

External PDF (with a caption)

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

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

---

Video Options

Video from Collection (auto caption)

{% include feature/video.html objectid="demo_004" width="75" %}

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

Video from the Collection (with a caption)

{% include feature/video.html objectid="demo_005" width="50" caption="a video from the collection" %}

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

External Video File (without a caption)

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

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

External Video File (with a caption)

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

Example Code --> {% raw %}{% 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" %}{% endraw %}

External Vimeo Video

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

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

External Youtube Video

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

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

Video Modal from Collection

{% include feature/video-modal.html objectid="demo_004" %}

Example Code --> {% raw %}{% include feature/video-modal.html objectid="demo_004" %}{% endraw %}

Video Modal External Item

{% include feature/video-modal.html objectid="https://cdil.lib.uidaho.edu/storying-extinction/objects/trailcams/videos/ballcreek-cedarrub-birdonpath.mp4" caption="Bears are Important!" transcript="Example transcript text, this should be better!" %}

Example Code --> {% raw %}{% include feature/video-modal.html objectid="https://cdil.lib.uidaho.edu/storying-extinction/objects/trailcams/videos/ballcreek-cedarrub-birdonpath.mp4" caption="Bears are Important!" transcript="Example transcript text, this should be better!" %}{% endraw %}

---

Audio Options

Audio from Collection (auto caption)

{% include feature/audio.html objectid="demo_003" width="50" %}

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

Audio from the Collection (with a caption)

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

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

External Audio (without a caption)

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

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

External Audio (with a caption)

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

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

Audio Modal from Collection

{% include feature/audio-modal.html objectid="demo_003" %}

Example Code --> {% raw %}{% include feature/audio-modal.html objectid="demo_003" %}{% endraw %}

Audio Modal External Item

{% include feature/audio-modal.html objectid="https://www.lib.uidaho.edu/digital/mp3s/Clouds.mp3" title="Clouds" caption="A reading." transcript="Example transcript text, this should be better!" %}

Example Code --> {% raw %}{% include feature/audio-modal.html objectid="https://www.lib.uidaho.edu/digital/mp3s/Clouds.mp3" title="Clouds" caption="A reading." transcript="Example transcript text, this should be better!" %}{% endraw %}

---

Other Features

Cloud Include

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

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

TimelineJS

{% include feature/timelinejs.html %}

Example Code --> {% raw %}{% include feature/timelinejs.html %}{% endraw %}

---

Bootstrap Features

Include a Card

• Card -- > {% raw %}{% 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 %}{% endraw %}

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

Include a Button

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

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

Include an Alert

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

{% include feature/alert.html text="This is an alert that 'warns' a user with centrally aligned text." color="warning" align="center" %}

Include a Modal

• Modals -- > {% raw %}{% 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" %}{% endraw %}

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