image.html

{% if include.external %}{% assign img = include.src %}{% assign id = include.src | strip | remove: '.'| remove: '0' | remove: '1' | remove: '2' | remove: '3' | remove: '4' | remove: '5' | remove: '6' | remove: '7' | remove: '8' | remove: '9' | remove: '/' | remove: 'http:' | remove: 'https:' %}{% else %}{% assign img = "/assets/images/" | append: page.collection | append: "/" | append: include.src | relative_url %}{% assign id = include.src | strip | split: '.' %}{% endif %} <figure class="figure {% if include.top == 'true' %} mt-3 {% else %} mt-1 {% endif %}"><img src="{{ img }}" class="figure-img img-fluid rounded w-{{ include.w }}" alt="{{ include.alt }}" title="Click to enlarge" data-bs-target="#{{ id }}-modal" data-bs-toggle="modal"><figcaption class="figure-caption">{{ include.alt }} </figcaption></figure>
<div class="modal fade" id="{{ id }}-modal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true"><div class="modal-dialog modal-xl modal-dialog-centered"><div class="modal-content"><img src="{{ img }}" class="img-fluid" alt="{{ include.alt }}" {% if include.map %} usemap="#{{include.map}}" {% endif %}></div></div></div>