Merge pull request #454 from sylhare/caption-image

Add Caption under image with aligner
sylhare · Aug 8, 2024 · 6689ef0 · 6689ef0
2 parents e6c13a3 + 75bee2e
commit 6689ef0
Show file tree

Hide file tree

Showing 4 changed files with 23 additions and 8 deletions.
diff --git a/README.md b/README.md
@@ -380,6 +380,7 @@ Use it in any markdown file. There are two fields in the _include_ you need to l
     - default is 2 columns
     - `column=3` set 3 columns
     - `column="auto"` makes as many columns as images
+  - _caption_: (OPTIONAL) Add a caption to the images
 
 #### Code highlight
 

diff --git a/_includes/aligner.html b/_includes/aligner.html
@@ -7,13 +7,18 @@
 {% endif %}
 
 <div class="row">
-    {% 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 %}
+    <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>
 
 {% assign column = false %}
diff --git a/_posts/2019-06-30-sample-post.md b/_posts/2019-06-30-sample-post.md
@@ -18,7 +18,7 @@ Ut turpis felis, pulvinar a semper sed, adipiscing id dolor. Pellentesque auctor
 
 Nunc diam velit, adipiscing ut tristique vitae, sagittis vel odio. Maecenas convallis ullamcorper ultricies. Curabitur ornare, ligula *semper consectetur sagittis*, nisi diam iaculis velit, id fringilla sem nunc vel mi. Nam dictum, odio nec pretium volutpat, arcu ante placerat erat, non tristique elit urna et turpis. Quisque mi metus, ornare sit amet fermentum et, tincidunt et orci. Fusce eget orci a orci congue vestibulum.
 
-{% include aligner.html images="pexels/travel.jpeg" column=1 %}
+{% include aligner.html images="pexels/travel.jpeg" column=1 caption="A relaxing image illustrating the content" %}
 
 Ut dolor diam, elementum et vestibulum eu, porttitor vel elit. Curabitur venenatis pulvinar tellus gravida ornare. Sed et erat faucibus nunc euismod ultricies ut id justo. Nullam cursus suscipit nisi, et ultrices justo sodales nec. Fusce venenatis facilisis lectus ac semper. Aliquam at massa ipsum. Quisque bibendum purus convallis nulla ultrices ultricies. Nullam aliquam, mi eu aliquam tincidunt, purus velit laoreet tortor, viverra pretium nisi quam vitae mi. Fusce vel volutpat elit. Nam sagittis nisi dui.
 

diff --git a/_sass/base/_global.scss b/_sass/base/_global.scss
@@ -283,3 +283,12 @@ details {
   }
 }
 
+.caption-style {
+  font-style: italic;
+  font-size: 0.8em;
+  text-align: center;
+  color: var(--meta);
+  font-weight: 200;
+  padding-bottom: 5px;
+  padding-top: 5px;
+}