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!

_includes/figure-gallery.html

@@ -0,0 +1,29 @@
+<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>

_includes/figure-image.html

@@ -1,25 +1,14 @@
-<figure
-    {% if include.float %}
-        style="float: {{include.float}};"
-    {% else %}
-        style="float: none; width:100%"
-    {% endif %}>
+{% if include.float %}
+<figure class="figure-float" style="float:{{ include.float }};">
+{% else %}
+<figure class="figure-image">
+{% endif %}
 
-{% assign srcs = include.src | split: ' ' %}
 {% capture path %}/images/{{page.path | split: '/' | last | split: '.' | first }}{% endcapture %}
+{% capture alt %}{{ include.caption | markdownify | strip_html }} {{ include.alt }}{% endcapture %}
 
-    <div class="figure-contents">
-{% for src in srcs %}
-    {% capture img %} {{path}}/{{src}} {% endcapture %}
-        <a href="{{ img | remove: "-small" }}"> <img
-            src="{{ img }}"
-        {% if include.caption %}
-            alt="{{ include.caption | markdownify | strip_html }}"
-        {% else %}
-            alt="{{ include.alt }}"
-        {% endif %}> </a>
-{% endfor %}
-    </div>
+{% capture src %}{{ path }}/{{ include.src }}{% endcapture %}
+{% include image.html src=src alt=alt %}
 
 {% if include.caption %}
     <figcaption>

_includes/image.html

@@ -0,0 +1,4 @@
+<a href="{{ include.src | remove: "-small" }}"> <img
+    src="{{ include.src}}"
+    alt="{{ include.alt }}">
+</a>