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>
|
||||
Reference in New Issue
Block a user