drewcassidy.me/_includes/figure-gallery.html
drewcassidy 6ea805ee50 Finish image includes
• Finish the image-gallery
• Add Figure-Image with a single image, which can be floated to the left
or right, or fill the entire document width
• Publish the first real blog post!
2023-04-19 01:16:57 -07:00

30 lines
822 B
HTML

<figure class="figure-gallery">
{% assign rows = include.src | split: ':' %}
{% capture path %}/images/{{page.path | split: '/' | last | split: '.' | first }}{% endcapture %}
{% capture alt %}{{ include.caption | markdownify | strip_html }} {{ include.alt }}{% endcapture %}
{% for row in rows %}
{% assign imgs = row | split: ' ' %}
{% if imgs.size == 1 %}
<div class="gallery-solo">
{% else %}
<div class="gallery-grid">
{% endif %}
{% for img in imgs %}
{% capture src %}{{ path }}/{{ img }}{% endcapture %}
{% include image.html src=src alt=alt %}
{% endfor %}
</div>
{% endfor %}
{% if include.caption %}
<figcaption>
{{ include.caption | markdownify | remove: '<p>' | remove: '</p>' }}
</figcaption>
{% endif %}
</figure>