Initial commit
This commit is contained in:
Nasir Anthony Montalvo
GitHub
107
_includes/index/carousel.html
Normal file
107
_includes/index/carousel.html
Normal file
@@ -0,0 +1,107 @@
|
||||
{% comment %}
|
||||
|
||||
Image item carousel.
|
||||
This include adds a Bootstrap Carousel component populated with randomly selected image items, designed with index page in mind.
|
||||
https://getbootstrap.com/docs/5.1/components/carousel/
|
||||
|
||||
E.G. --> {% include index/carousel.html title="Sample Items" height=450 %}
|
||||
|
||||
Options:
|
||||
|
||||
- "height" = the height of the carousel in px, just give the number (optional, default 300)
|
||||
- "carousel-type" = the selection of items featured in the carousel, choose from thumb (all items with image_thumb) or small (all items with image_small). (optional, default thumb)
|
||||
- "child-objects" = include child items in count or only parents, true or false (optional, default false)
|
||||
- "title" = card title text inside card content area (optional)
|
||||
- "header" = card header text in bar above card content (optional)
|
||||
- "heading_level" = customize the level of the heading if necessary for accessibility, choose "h1", "h2", "h3", etc (optional, default "h2")
|
||||
- "max" = maximum images selected for slide show (optional, default 9. Do not make too big!)
|
||||
- "btn-color" = a bootstrap color class to theme the buttons. Can be any bootstrap template color (e.g. info, success) or outline (e.g. outline-info, outline-success), including colors created in config-theme-colors. (optional, default "primary")
|
||||
- "btn-text" = the label used in the link btn to view the carousel item (optional, default "View Item")
|
||||
- "filter-field" and "filter-value" = use these options together to filter which set of items will appear in the carousel based on a particular metadata field and value in that field. filter-field must match a column in your metadata. any item with a value in the filter-field that "contains" the filter-value will be included, it does not need to be an exact match. (optional)
|
||||
|
||||
{%- endcomment -%}
|
||||
|
||||
{%- assign carousel-max = include.max | default: 9 -%}
|
||||
{%- assign btn-color = include.btn-color | default: "primary" -%}
|
||||
{%- assign btn-text = include.btn-text | default: "View Item" -%}
|
||||
{% if include.child-objects == true %}
|
||||
{%- assign carousel-items = site.data[site.metadata] | where_exp: 'item','item.objectid' | where_exp: "item","item.image_small != nil or item.image_thumb != nil"-%}
|
||||
{% else %}
|
||||
{%- assign carousel-items = site.data[site.metadata] | where_exp: 'item','item.objectid and item.parentid == nil' | where_exp: "item","item.image_small != nil or item.image_thumb != nil" -%}
|
||||
{% endif %}
|
||||
{%- if include.filter-field and include.filter-value -%}
|
||||
{% assign carousel-items = carousel-items | where_exp: 'item','item[include.filter-field] contains include.filter-value' %}
|
||||
{%- endif -%}
|
||||
|
||||
{%- comment -%}
|
||||
Set up carousel div
|
||||
{%- endcomment -%}
|
||||
<style>
|
||||
#imageCarousel .carousel-item { height: {{ include.height | remove: 'px' | strip | default: '300' }}px; }
|
||||
</style>
|
||||
<div class="card mb-3">
|
||||
{% if include.header %}<{{ include.heading_level | default: 'h2' | strip }} class="card-header h5">{{ include.header }}</{{ include.heading_level | default: 'h2' | strip }}>{% endif %}
|
||||
<div class="card-body">
|
||||
{% if include.title %}<{{ include.heading_level | default: 'h2' | strip }} class="card-title h5">{{ include.title }}</{{ include.heading_level | default: 'h2' | strip }}>{% endif %}
|
||||
|
||||
<div id="imageCarousel" class="carousel slide bg-dark rounded mb-3" data-bs-ride="carousel">
|
||||
<div id="carouselIndicators" class="carousel-indicators">
|
||||
|
||||
</div>
|
||||
<div id="carouselInner" class="carousel-inner">
|
||||
|
||||
</div>
|
||||
<button class="carousel-control-prev" type="button" data-bs-target="#imageCarousel" data-bs-slide="prev">
|
||||
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
|
||||
<span class="visually-hidden">Previous</span>
|
||||
</button>
|
||||
<button class="carousel-control-next" type="button" data-bs-target="#imageCarousel" data-bs-slide="next">
|
||||
<span class="carousel-control-next-icon" aria-hidden="true"></span>
|
||||
<span class="visually-hidden">Next</span>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
{%- comment -%}
|
||||
add slides using JS to allow for randomizing slide show
|
||||
{%- endcomment -%}
|
||||
<script>
|
||||
/* add item data */
|
||||
// title,objectid,image_thumb/small
|
||||
var carouselItems = [ {% for c in carousel-items %}[ {{ c.title | escape | jsonify }}, "{{ c.objectid }}", {% if c.image_small %}{{ c.image_small | relative_url | jsonify }}{% else %}{{ c.image_thumb | relative_url | jsonify }}{% endif %}, "{{ c.parentid }}", {{ c.image_alt_text | default: c.title | escape | jsonify }} ]{% unless forloop.last %}, {% endunless %}{% endfor %}];
|
||||
/* shuffle items */
|
||||
carouselItems.sort(function() { return 0.5 - Math.random() });
|
||||
|
||||
/* add items to carousel */
|
||||
var carousel = document.getElementById("carouselInner");
|
||||
var carouselIndicators = document.getElementById("carouselIndicators");
|
||||
var slides = "";
|
||||
var indicators = "";
|
||||
var i, itemImg, itemLink;
|
||||
for (let i=0; i < {{ carousel-items | size | at_most: carousel-max }}; i++) {
|
||||
// calculate item image location
|
||||
itemImg = carouselItems[i][2];
|
||||
// calculate item link
|
||||
if (carouselItems[i][3]){
|
||||
itemLink = '{{ '/items/' | relative_url }}' + carouselItems[i][3] + '.html#' + carouselItems[i][1];}
|
||||
else {
|
||||
itemLink = '{{ '/items/' | relative_url }}' + carouselItems[i][1] + '.html';
|
||||
}
|
||||
// create indicator
|
||||
indicator = `<button type="button" data-bs-target="#imageCarousel" data-bs-slide-to="${i.toString()}" ${ i == 0 ? 'class="active" aria-current="true" ' : '' }aria-label="Slide ${i.toString()}"></button>`;
|
||||
// create slide
|
||||
slide = `<div class="carousel-item py-2${ i == 0 ? ' active' : '' }">
|
||||
<img class="d-block h-100 mx-auto lazyload" alt="${carouselItems[i][4]}" data-src="${itemImg}">
|
||||
<div class="carousel-caption">
|
||||
<h3 class="carousel-item-title text-white py-2 h6">${carouselItems[i][0]}</h3>
|
||||
<a href="${itemLink}" class="btn btn-sm btn-{{ btn-color }}">{{ btn-text }}</a>
|
||||
</div></div>`;
|
||||
slides += slide;
|
||||
indicators += indicator;
|
||||
}
|
||||
// add indicators to page
|
||||
carouselIndicators.innerHTML = indicators;
|
||||
// add slides to the page
|
||||
carousel.innerHTML = slides;
|
||||
</script>
|
||||
47
_includes/index/content.html
Normal file
47
_includes/index/content.html
Normal file
@@ -0,0 +1,47 @@
|
||||
{% comment %}
|
||||
|
||||
Collection content summary.
|
||||
Counts item types based on "display_template" providing link to Browse page.
|
||||
|
||||
E.G. --> {% include index/content.html %}
|
||||
|
||||
E.G. --> {% include index/content.html object_field="format" others=true total=true %}
|
||||
|
||||
Options:
|
||||
|
||||
- "btn-color" - a bootstrap color class to theme the buttons. Can be any bootstrap template color (e.g. info, success) or outline (e.g. outline-info, outline-success), including colors created in config-theme-colors. (optional, default "outline-secondary")
|
||||
- "heading_level" = customize the level of the heading if necessary for accessibility, choose "h1", "h2", "h3", etc (optional, default "h2")
|
||||
- "object_field" = optionally change the field used to count items. Typically this is either "display_template" (default) or "format". The field should be available on the Browse page to filter! The icons assume you use something like "display_template" or "format" to select the correct icon.
|
||||
- "child-objects" = include child items in count or only parents, true or false (optional, default false)
|
||||
- "others" = display a count for items with no "display_template", true or false (optional, default false)
|
||||
- "total" = display a count for total items, true or false (optional, default false)
|
||||
|
||||
{%- endcomment -%}
|
||||
{%- assign object_field = include.object_field | default: 'display_template' -%}
|
||||
{% if include.child-objects == true %}
|
||||
{%- assign items = site.data[site.metadata] | where_exp: 'item','item.objectid' -%}
|
||||
{% else %}
|
||||
{%- assign items = site.data[site.metadata] | where_exp: 'item','item.objectid and item.parentid == nil' -%}
|
||||
{% endif %}
|
||||
{%- assign templates = items | map: object_field -%}
|
||||
{%- assign types = templates | uniq | compact | sort -%}
|
||||
<div class="card mb-3" >
|
||||
<div class="card-body">
|
||||
<{{ include.heading_level | default: 'h2' | strip }} class="card-title h5">Content</{{ include.heading_level | default: 'h2' | strip }}>
|
||||
<p class="card-text">
|
||||
{% for t in types %}
|
||||
{%- assign count = templates | where_exp: 'item', 'item contains t' | size -%}
|
||||
{% if count > 0 %}
|
||||
{{ count }}
|
||||
<a class="text-dark" href="{{ '/browse.html' | relative_url }}#display_template:{{ t }}">{{ t | upcase | replace: "_", " " }}
|
||||
{% include helpers/get-icon-svg.html type="hidden" template=t %}</a><br>
|
||||
{%- endif -%}
|
||||
{%- endfor -%}
|
||||
{% if include.others == true %}{% assign others = templates | where_exp: 'item', 'item == nil or item == ""' | size %}{% if others > 0 %}
|
||||
{{ others }} OTHER {% include helpers/get-icon-svg.html type="hidden" %}<br>{% endif %}{% endif %}
|
||||
{% if include.total == true %}
|
||||
{{ templates | size }} TOTAL ITEMS<br>{% endif %}
|
||||
<a class="btn btn-sm btn-{{ include.btn-color | default: 'outline-secondary' }} mt-2" href="{{ '/data.html' | relative_url }}">View table</a>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
41
_includes/index/data-download.html
Normal file
41
_includes/index/data-download.html
Normal file
@@ -0,0 +1,41 @@
|
||||
{% comment %}
|
||||
|
||||
Collection data downloads.
|
||||
Based on the stubs present in the config-nav, displays relevant download btn links for metadata derivatives in a variety of formats. This highlights the ability to explore and reuse collection data.
|
||||
|
||||
E.G. --> {% include index/data-download.html %}
|
||||
|
||||
Options:
|
||||
|
||||
- "heading_level" = customize the level of the heading if necessary for accessibility, choose "h1", "h2", "h3", etc (optional, default "h2")
|
||||
|
||||
{%- endcomment -%}
|
||||
{%- assign stubs = site.data.config-nav | map: 'stub' | join: ';' -%}
|
||||
<div class="card mb-3">
|
||||
<div class="card-body">
|
||||
<{{ include.heading_level | default: 'h2' | strip }} class="card-title h5">Collection as Data</{{ include.heading_level | default: 'h2' | strip }}>
|
||||
<p><small>Download this collection's metadata in a variety of reusable formats.</small></p>
|
||||
<p class="card-text text-center">
|
||||
<a class="btn btn-sm btn-secondary m-1" href="{{ '/assets/data/metadata.csv' | relative_url }}" download>Metadata CSV</a>
|
||||
<a class="btn btn-sm btn-secondary m-1" href="{{ '/assets/data/metadata.json' | relative_url }}" target="_blank">Metadata JSON</a>
|
||||
{% if stubs contains "subject" %}
|
||||
<a class="btn btn-sm btn-secondary m-1" href="{{ '/assets/data/subjects.csv' | relative_url }}" download>Subjects CSV</a>
|
||||
<a class="btn btn-sm btn-secondary m-1" href="{{ '/assets/data/subjects.json' | relative_url }}" target="_blank">Subjects JSON</a>
|
||||
{% endif %}
|
||||
{% if stubs contains "map" %}
|
||||
<a class="btn btn-sm btn-secondary m-1" href="{{ '/assets/data/geodata.json' | relative_url }}" target="_blank">Geodata JSON</a>
|
||||
{% endif %}
|
||||
{% if stubs contains "location" %}
|
||||
<a class="btn btn-sm btn-secondary m-1" href="{{ '/assets/data/locations.csv' | relative_url }}" download>Locations CSV</a>
|
||||
<a class="btn btn-sm btn-secondary m-1" href="{{ '/assets/data/locations.json' | relative_url }}" target="_blank">Locations JSON</a>
|
||||
{% endif %}
|
||||
{% if stubs contains "timeline" %}
|
||||
<a class="btn btn-sm btn-secondary m-1" href="{{ '/assets/data/timelinejs.json' | relative_url }}" target="_blank">Timeline JSON</a>
|
||||
{% endif %}
|
||||
{% if site.data.theme.metadata-facets-fields %}
|
||||
<a class="btn btn-sm btn-secondary m-1" href="{{ '/assets/data/facets.json' | relative_url }}" target="_blank">Facets JSON</a>
|
||||
{% endif %}
|
||||
<a class="btn btn-sm btn-secondary m-1" href="{{ site.source-code }}" rel="noopener">Source Code</a>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
21
_includes/index/description.html
Normal file
21
_includes/index/description.html
Normal file
@@ -0,0 +1,21 @@
|
||||
{% comment %}
|
||||
|
||||
Collection Description card.
|
||||
Pulls description from _config.yml. Provides btn link to About page if present in the config-nav.
|
||||
|
||||
E.G. --> {% include index/description.html %}
|
||||
|
||||
Options:
|
||||
|
||||
- "btn-color" - a bootstrap color class to theme the buttons. Can be any bootstrap template color (e.g. info, success) or outline (e.g. outline-info, outline-success), including colors created in config-theme-colors. (optional, default "primary")
|
||||
- "heading_level" = customize the level of the heading if necessary for accessibility, choose "h1", "h2", "h3", etc (optional, default "h2")
|
||||
|
||||
{%- endcomment -%}
|
||||
<div class="card mb-3">
|
||||
<div class="card-body">
|
||||
<{{ include.heading_level | default: 'h2' | strip }} class="card-title h5">Description</{{ include.heading_level | default: 'h2' | strip }}>
|
||||
<p class="card-text">{{ site.description }}</p>
|
||||
{%- assign about = site.data.config-nav | where: "stub","/about.html" | size -%}{% if about > 0 %}
|
||||
<a class="btn btn-{{ include.btn-color | default: 'primary' }}" href="{{ '/about.html' | relative_url }}" >Learn More »</a>{% endif %}
|
||||
</div>
|
||||
</div>
|
||||
53
_includes/index/featured-terms.html
Normal file
53
_includes/index/featured-terms.html
Normal file
@@ -0,0 +1,53 @@
|
||||
{% comment %}
|
||||
|
||||
Featured Terms button-links.
|
||||
This include creates a card with btn links to the Browse page from a set of automatically generated or manually selected terms. Either use the "field" option to auto generate *or* the "featured" option to manually create list of terms.
|
||||
|
||||
E.G. --> {% include index/featured-terms.html field="subject" title="Top Subjects" btn-color="outline-info" max=8 %}
|
||||
|
||||
E.G. --> {% include index/featured-terms.html featured="Example term; Another; One more" title="Topic Areas" btn-color="success" %}
|
||||
|
||||
Options:
|
||||
|
||||
- "field" - a field from your metadata that will be used to auto generate top terms (required to auto generate)
|
||||
- "featured" - a manually created list of featured terms, separated by ; semicolon (required if not auto generating from a field)
|
||||
- "title" - card title text inside card content area (optional)
|
||||
- "header" = card header text in bar above card content (optional)
|
||||
- "heading_level" = customize the level of the heading if necessary for accessibility, choose "h1", "h2", "h3", etc (optional, default "h2")
|
||||
- "max" - max number of terms to display if auto generating (optional, default 5)
|
||||
- "btn-color" - a bootstrap color class to theme the buttons. Can be any bootstrap template color (e.g. info, success) or outline (e.g. outline-info, outline-success), including colors created in config-theme-colors. (optional, default "primary")
|
||||
|
||||
Requires CB's "array_count_uniq.rb" plugin!
|
||||
|
||||
{%- endcomment -%}
|
||||
|
||||
{% if include.featured %}
|
||||
{% assign topTerms = include.featured | split: ";" %}
|
||||
{%- else -%}
|
||||
|
||||
|
||||
{% comment %}
|
||||
Use termsField and termsMax to customize feature
|
||||
{% endcomment %}
|
||||
{% assign termsField = include.field | default: "subject" %}
|
||||
{% assign termsMax = include.max | default: 5 %}
|
||||
{% if site.data.theme.browse-child-objects == true %}
|
||||
{%- assign terms = site.data[site.metadata] | where_exp: 'item','item.objectid' | map: termsField | join: ";" -%}
|
||||
{% else %}
|
||||
{%- assign terms = site.data[site.metadata] | where_exp: 'item','item.parentid == nil' | map: termsField | join: ";" -%}
|
||||
{%- endif -%}
|
||||
{%- assign uniqTerms = terms | downcase | split: ";" | array_count_uniq -%}
|
||||
{% capture topTerms %}
|
||||
{% for i in uniqTerms limit: termsMax %}{{ i[0] }};{% endfor %}{% endcapture %}
|
||||
{% assign topTerms = topTerms | split: ";" %}
|
||||
{%- endif -%}
|
||||
<div class="card mb-3">
|
||||
{% if include.header %}<{{ include.heading_level | default: 'h2' | strip }} class="card-header h5">{{ include.header }}</{{ include.heading_level | default: 'h2' | strip }}>{% endif %}
|
||||
<div class="card-body">
|
||||
{% if include.title %}<{{ include.heading_level | default: 'h2' | strip }} class="card-title h5">{{ include.title }}</{{ include.heading_level | default: 'h2' | strip }}>{% endif %}
|
||||
<p class="card-text">
|
||||
{% for s in topTerms %}
|
||||
<a class="btn btn-sm btn-{{ include.btn-color | default: 'primary' }} m-1" href="{{ s | strip | url_param_escape | prepend: ':' | prepend: termsField | prepend: '/browse.html#' | relative_url }}">{{ s | strip }}</a>{% endfor %}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
31
_includes/index/time.html
Normal file
31
_includes/index/time.html
Normal file
@@ -0,0 +1,31 @@
|
||||
{% comment %}
|
||||
|
||||
Collection time span.
|
||||
Extracts all content of "date" field, displays the smallest and largest.
|
||||
You may encounter issues if you do not have a correctly ISO formatted "date" field.
|
||||
|
||||
E.G. --> {% include index/time.html %}
|
||||
|
||||
Options:
|
||||
|
||||
- "date_field" - optionally change the field used for date range. Only ISO or year-only dates are supported. (optional, default "date")
|
||||
- "btn-color" - a bootstrap color class to theme the buttons. Can be any bootstrap template color (e.g. info, success) or outline (e.g. outline-info, outline-success), including colors created in config-theme-colors. (optional, default "outline-secondary")
|
||||
- "heading_level" = customize the level of the heading if necessary for accessibility, choose "h1", "h2", "h3", etc (optional, default "h2")
|
||||
|
||||
{%- endcomment -%}
|
||||
{% assign date_field = include.date_field | default: 'date' %}
|
||||
{% if site.data.theme.timeline-child-objects == true %}
|
||||
{%- assign date-items = site.data[site.metadata] | where_exp: 'item','item.objectid' -%}
|
||||
{% else %}
|
||||
{%- assign date-items = site.data[site.metadata] | where_exp: 'item','item.objectid and item.parentid == nil' -%}
|
||||
{% endif %}
|
||||
{%- assign raw-dates = date-items | map: date_field | compact | uniq -%}
|
||||
{%- capture clean-years -%}{% for date in raw-dates %}{% if date contains "-" %}{{ date | strip | split: "-" | first }}{% elsif date contains "/" %}{{ date | strip | split: "/" | last }}{% else %}{{ date | strip }}{% endif %}{% unless forloop.last %};{% endunless %}{%- endfor -%}{%- endcapture -%}
|
||||
{%- assign date-range = clean-years | remove: " " | split: ";" | uniq | sort -%}
|
||||
<div class="card mb-3">
|
||||
<div class="card-body">
|
||||
<{{ include.heading_level | default: 'h2' | strip }} class="card-title h5">Time Span</{{ include.heading_level | default: 'h2' | strip }}>
|
||||
<p class="card-text h5">{{ date-range | first }} to {{ date-range | last }}
|
||||
<br><a href="{{ '/timeline.html' | relative_url }}" class="btn btn-sm btn-{{ include.btn-color | default: 'outline-secondary' }} mt-2">View Timeline</a></p>
|
||||
</div>
|
||||
</div>
|
||||
Reference in New Issue
Block a user