Initial commit

_includes/cb/about_the_about.md

@@ -0,0 +1,83 @@
+{% comment %}
+    Find some sample images or use defaults for About demos
+{% endcomment %}
+{% assign imagesample = site.data[site.metadata] | where_exp: 'item','item.format contains "image"' | first %}
+{% capture imagesampleid %}{{ imagesample.objectid | default: "https://www.lib.uidaho.edu/collectionbuilder/demo-objects/mg101_b6_photographs_01.jpg" }}{% endcapture %}
+{% assign pdfsample = site.data[site.metadata] | where_exp: 'item','item.format contains "pdf"' | first %}
+{% capture pdfsampleid %}{{ pdfsample.objectid | default: "https://www.lib.uidaho.edu/collectionbuilder/demo-objects/uiext21768.pdf" }}{% endcapture %}
+{% assign videosample = site.data[site.metadata] | where_exp: 'item','item.format contains "video"' | first %}
+{% capture videosampleid %}{{ videosample.objectid | default: "https://cdil.lib.uidaho.edu/storying-extinction/objects/trailcams/videos/ballcreek-cedarrub-birdonpath.mp4" }}{% endcapture %}
+{% assign audiosample = site.data[site.metadata] | where_exp: 'item','item.format contains "audio"' | first %}
+{% capture audiosampleid %}{{ audiosample.objectid | default: "https://www.lib.uidaho.edu/digital/mp3s/Clouds.mp3" }}{% endcapture %}
+
+## 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](https://guides.github.com/features/mastering-markdown/) and enhanced using "includes" that pull in collection content, external media, and [Bootstrap](https://getbootstrap.com/) 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](https://collectionbuilder.github.io/collectionbuilder-gh/feature_options.html) on our CollectionBuilder-GH demo site. 
+
+{% include feature/button.html text="Feature *Includes* Bonanza page" link="https://collectionbuilder.github.io/collectionbuilder-gh/feature_options.html" color="primary" size="lg" centered=true %}
+
+### 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 --> `{% raw %}{% include feature/image.html objectid="demo_001" width="75" %}{% endraw %}`
+
+{% include feature/image.html objectid=imagesampleid width="75" %}
+
+#### Include a PDF
+
+- PDF -- > `{% raw %}{% include feature/pdf.html objectid="demo_002"  width="50" %}{% endraw %}`
+
+{% include feature/pdf.html objectid=pdfsampleid width="50" %}
+
+#### Include a Video
+
+- Video: `{% raw %}{% include feature/video.html objectid="demo_004" %}{% endraw %}`
+
+{% include feature/video.html objectid=videosampleid width="75" %}
+
+#### Include an Audio File
+
+- Audio: `{% raw %}{% include feature/audio.html objectid="demo_003" %}{% endraw %}`
+
+{% include feature/audio.html objectid=audiosampleid  %}
+
+### Include Bootstrap Features
+
+The template also provides includes to make it easier to add [Bootstrap](https://getbootstrap.com/) components to your Markdown writing.
+These features allow you to better organize and highlight your content.
+
+#### 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=imagesampleid width="50" 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"  %}