Merge pull request #467 from sylhare/aligner-2

Fix Aligner with caption on multiple image

_includes/aligner.html

@@ -6,19 +6,19 @@
 {% assign column = 100.0 | divided_by: include.column %}
 {% endif %}
 
-<div class="row">
-    <figure>
-        {% for image in images %}
-        <div {% if column %} style="flex: {{ column }}%" {% else %} class="column" {% endif %}  >
-            <img {% if images.size == 1 %}class="single"{% endif %}
-                 src="{{ image | prepend: 'assets/img/' | relative_url }}"
-                 alt="{{ image | prepend: '/' | split: '/' | last }}">
-        </div>
-        {% endfor %}
-        {% if include.caption %}
-        <figcaption class="caption-style">{{ include.caption }}</figcaption>
-        {% endif %}
-    </figure>
-</div>
+
+<figure class="row">
+    {% for image in images %}
+    <div class="column">
+        <img {% if images.size== 1 %}class="single" {% endif %}
+             src="{{ image | prepend: 'assets/img/' | relative_url }}"
+             alt="{{ image | prepend: '/' | split: '/' | last }}">
+    </div>
+    {% endfor %}
+    {% if include.caption %}
+    {% endif %}
+    <figcaption class="caption-style">{{ include.caption }}</figcaption>
+</figure>
+
 
 {% assign column = false %}

_posts/2018-10-29-feature-images.md

@@ -27,11 +27,11 @@ It by default look into `assets/img/` so give the path from there, example:
 
 {% highlight ruby %}
 {% raw %}
-{% include aligner.html images="pexels/book-glass.jpeg,triangle.png" %}
+{% include aligner.html images="pexels/book-glass.jpeg,triangle.png" caption="A caption under the images" %}
 {% endraw %}
 {% endhighlight %}
 
-{% include aligner.html images="pexels/book-glass.jpeg,feature-img/desk-messy.jpeg" %}
+{% include aligner.html images="pexels/book-glass.jpeg,feature-img/desk-messy.jpeg" caption="A caption under the images" %}
 
 
 Here you have two images side by side, but you can set more and set the amount per columns 
@@ -50,9 +50,9 @@ However you can just use the Markdown way of doing it to get the image normal si
 
 {% highlight ruby %}
 {% raw %}
-# Markdown way (bigger)
+# Markdown way
 ![Travel]({{ "/assets/img/pexels/computer.jpeg" | relative_url}})
-# Aligner with only One (50% of width)
+# Aligner with only one image
 {% include aligner.html images="pexels/computer.jpeg" %}
 {% endraw %}
 {% endhighlight %}

_sass/base/_global.scss

@@ -281,14 +281,4 @@ details {
     padding-top: 2em;
     max-width: 100%;
   }
-}
-
-.caption-style {
-  font-style: italic;
-  font-size: 0.8em;
-  text-align: center;
-  color: var(--meta);
-  font-weight: 200;
-  padding-bottom: 5px;
-  padding-top: 5px;
 }

_sass/includes/_aligner.scss

@@ -0,0 +1,33 @@
+/* --- Aligner --- */
+
+.row {
+  display: flex;
+  flex-wrap: wrap;
+  flex-direction: row;
+  padding: 0.9% 0 1.5% 0;
+}
+
+.caption-style {
+  order: 1;
+  flex: 1 1 100%;
+  display: block;
+  font-style: italic;
+  font-size: 0.8em;
+  text-align: center;
+  color: var(--meta);
+  font-weight: 200;
+  padding-bottom: 5px;
+  padding-top: 5px;
+}
+
+.column {
+  flex: 1 0;
+
+  img {
+    min-width: 250px;
+  }
+  .single {
+    width: 100%;
+    display: block;
+  }
+}

_sass/layouts/_page.scss

@@ -13,29 +13,3 @@ h1.title {
   margin-top: 5px;
   text-shadow: 1px 1px 2px var(--text-shadow);
 }
-
-//Shared css in _post.scss
-
-
-/* --- Aligner --- */
-/* within page/posts */
-
-.row {
-  display: flex;
-  flex-wrap: wrap;
-  padding: 0.9% 0 1.5% 0;
-}
-
-.column {
-  flex: 50%;
-
-  img {
-    width: 100%;
-    min-width: 250px;
-  }
-
-  .single {
-    width: 50%;
-    display: block;
-  }
-}

_sass/type-on-strap.scss

@@ -27,6 +27,7 @@
 @import 'includes/blog_nav';
 @import 'includes/gallery';
 @import 'includes/portfolio';
+@import 'includes/aligner';
 
 /* Posts */
 // Linked with the html in the _layouts folder