1800nasi/bqkc
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Initial commit

Browse Source
This commit is contained in:
Nasir Anthony Montalvo
2025-11-13 14:48:58 -06:00
committed by GitHub
commit 526096840e
2349 changed files with 19464 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

97
_includes/feature/audio-modal.html Normal file
View File

@@ -0,0 +1,97 @@
{% comment %}
Audio modal feature from an item's objectid or external link.
This include adds a card featuring the thumb image, title, and description of an audio item--when clicked it opens a modal containing the audio embed. The modal displays audio information, transcript, link to item. This is especially useful feature if you would like multiple videos on one page.
E.G. --> {% include feature/audio-modal.html objectid="demo_003" %}
It requires an "objectid" with the include, which is used to find the audio details. Alternatively, a URL to an external audio file can be used in "objectid".
Options:
- "objectid" = several options below (required)
- an objectid of an audio item in this collection, e.g. "demo_003"
- an external link to an MP3 file hosted elsewhere, e.g. "https://www.lib.uidaho.edu/digital/mp3s/Clouds.mp3"
- a relative link to an MP3 file somewhere else in this repository, e.g. "/assets/{{ includeid }}.mp3"
- "title" = by default automatically adds the title from item metadata, which will be used for the modal btn and modal title. Manually set by using the title option. (optional)
- "heading_level" = customize the level of the heading if necessary for accessibility, choose "h1", "h2", "h3", etc (optional, default "h2")
- "caption" = by default the figure include automatically uses the description of the item from your metadata. The caption option allows you to manually add a different caption, or give the value false for none. (optional)
- "image" = by default if using an objectid, if the item has a image_small value, the image will be used on the card. The image option allows you to manually add a image for non-collection videos. Give "false" to not display an image (optional)
- "transcript" = by default if using an objectid, if the item has a object_transcript value, the view transcript button will automatically be added. The transcript option allows you to manually add a different transcript or provide one for non-collection videos. (optional)
Note: if you have issues make sure the item is a audio item.
Audio file may not play correctly from dev server on Chrome browser! It will work in production.
{% endcomment %}
{% if include.objectid contains "/" %}
{%- capture src -%}{{ include.objectid | relative_url }}{%- endcapture -%}
{%- capture audio_link -%}{{ src }}{%- endcapture -%}
{%- capture audio_caption -%}{{ include.caption }}{%- endcapture -%}
{%- capture audio_title -%}{{ include.title }}{%- endcapture -%}
{% capture audio_transcript %}{{ include.transcript }}{% endcapture %}
{% capture audio_poster %}{% if include.image == false %}{% else %}{{ include.image | relative_url | default: '' }}{% endif %}{% endcapture %}
{% else %}
{%- assign item = site.data[site.metadata] | where: "objectid", include.objectid | first -%}
{%- capture audio_link -%}{{ '/items/' | relative_url }}{% if item.parentid %}{{ item.parentid }}.html#{{ item.objectid }}{% else %}{{ item.objectid }}.html{% endif %}{%- endcapture -%}
{%- capture src -%}{{ item.object_location | relative_url }}{% endcapture %}
{%- capture audio_caption -%}{% if include.caption %}{{ include.caption }}{% else %}{{ item.description }}{% endif %}{%- endcapture -%}
{%- capture audio_title -%}{% if include.title %}{{ include.title }}{% else %}{{ item.title }}{% endif %}{%- endcapture -%}
{% capture audio_transcript %}{{ include.transcript | default: item.object_transcript }}{% endcapture %}
{% capture audio_poster %}{% if include.image == false %}{% else %}{{ include.image | default: item.image_small | relative_url | default: '' }}{% endif %}{% endcapture %}
{% endif %}
{% capture includeid %}{% if include.objectid.size > 10 %}{{ include.objectid | slice: -10, 10 | slugify }}{% else %}{{ include.objectid | slugify }}{% endif %}{% endcapture %}
<div class="card my-3 narrow-content">
{% if audio_poster != "" %}<img src="{{ audio_poster | relative_url }}" class="card-img-top" alt="{{ audio_title | escape }}">{% endif %}
<div class="card-body text-center">
<{{ include.heading_level | default: 'h2' | strip }} class="card-title h2">{{ audio_title }}</{{ include.heading_level | default: 'h2' | strip }}>
<p class="card-text">{{ audio_caption }}</p>
<button class="btn btn-sm btn-primary stretched-link" type="button" data-bs-toggle="modal" data-bs-target="#{{ includeid }}Modal">
Listen to Audio
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi icon-sprite" viewBox="0 0 16 16">
<path d="M8 15A7 7 0 1 1 8 1a7 7 0 0 1 0 14m0 1A8 8 0 1 0 8 0a8 8 0 0 0 0 16"/>
<path d="M6.271 5.055a.5.5 0 0 1 .52.038l3.5 2.5a.5.5 0 0 1 0 .814l-3.5 2.5A.5.5 0 0 1 6 10.5v-5a.5.5 0 0 1 .271-.445"/>
</svg>
</button>
</div>
</div>
<div class="modal fade" id="{{ includeid }}Modal" tabindex="-1" aria-labelledby="{{ includeid }}ModalLabel" aria-hidden="true" data-bs-backdrop="static" data-bs-keyboard="false">
<div class="modal-dialog modal-lg modal-dialog-centered">
<div class="modal-content">
<div class="modal-header">
<h1 class="modal-title fs-5" id="{{ includeid }}ModalLabel">{{ audio_title }}</h1>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close" onclick="document.querySelector('#{{ includeid }}ModalAudio').pause();"></button>
</div>
<div class="modal-body">
<p class="text-center my-3">
<audio controls class="w-100" preload="metadata" id="{{ includeid }}ModalAudio">
<source src="{{ src }}" >
Your browser does not support the audio element, please <a href="{{ audio_link }}">download the file to listen</a>.
</audio>
{% if audio_poster != "" %}<img src="{{ audio_poster | relative_url }}" class="img-fluid" alt="{{ audio_title | escape }}">{% endif %}
{% unless include.caption == false %}<p class="figure-caption">
{{ audio_caption }}
</p>{% endunless %}
</p>
</div>
<div class="modal-footer">
{% if audio_transcript != '' %}
<div class="collapse mt-3 w-100" id="collapseTranscript{{ includeid }}">
<div class="card card-body text-start">
{% assign transcript_type = audio_transcript | slice: 0,1 %}
{% if transcript_type == '/' %}
{% assign transcript_location = audio_transcript | remove_first: '/' %}
{% assign transcript = site.pages | where: 'path', transcript_location | first %}
{{ transcript.content | markdownify }}
{% else %}
{{ audio_transcript | markdownify }}
{% endif %}
</div>
</div>
<button class="btn btn-outline-primary m-2" type="button" data-bs-toggle="collapse" data-bs-target="#collapseTranscript{{ includeid }}" aria-expanded="false" aria-controls="collapseTranscript{{ includeid }}">View Transcript</button>
{% endif %}
{% unless include.objectid contains '/' %}
<a href="{{ audio_link }}" class="btn btn-outline-dark m-2">Visit Item Page</a>{% endunless %}
<button type="button" class="btn btn-dark" data-bs-dismiss="modal" onclick="document.querySelector('#{{ includeid }}ModalAudio').pause();">Close</button>
</div>
</div>
</div>
</div>