Add support for captioning images in feature row helper

Use `image_caption` YAML front matter to assign a caption to the feature image, Markdown is allowed. Close mmistakes#1440
kkunapuli · May 15, 2018 · f1a7900 · f1a7900
1 parent 10ba959
commit f1a7900
Show file tree

Hide file tree

Showing 6 changed files with 44 additions and 10 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -2,6 +2,7 @@
 
 ### Enhancements
 
+* Add support for captioning images in feature row helper via `image_caption` YAML Front Matter. [#1440](https://github.com/mmistakes/minimal-mistakes/issues/1440)
 * Add [Google Custom Search Engine](https://cse.google.com/cse) support. [#1652](https://github.com/mmistakes/minimal-mistakes/issues/1652)
 * Update Font Awesome to version [`5.0.13`](https://github.com/FortAwesome/Font-Awesome/blob/master/CHANGELOG.md)
 * Add "Pets" sample archive page to documentation site. [#1664](https://github.com/mmistakes/minimal-mistakes/pull/1664)

diff --git a/_includes/feature_row b/_includes/feature_row
@@ -25,6 +25,9 @@
                 "{{ f.image_path | relative_url }}"
               {% endif %}
             alt="{% if f.alt %}{{ f.alt }}{% endif %}">
+            {% if f.image_caption %}
+              <span class="archive__item-caption">{{ f.image_caption | markdownify | remove: "<p>" | remove: "</p>" }}</span>
+            {% endif %}
           </div>
         {% endif %}
 

diff --git a/_sass/minimal-mistakes/_archive.scss b/_sass/minimal-mistakes/_archive.scss
@@ -63,13 +63,40 @@
 }
 
 .archive__item-teaser {
+  position: relative;
   border-radius: $border-radius;
   overflow: hidden;
+
   img {
     width: 100%;
   }
 }
 
+.archive__item-caption {
+  position: absolute;
+  bottom: 0;
+  right: 0;
+  margin: 0 auto;
+  padding: 2px 5px;
+  color: #fff;
+  font-family: $caption-font-family;
+  font-size: $type-size-8;
+  background: #000;
+  text-align: right;
+  z-index: 5;
+  opacity: 0.5;
+  border-radius: $border-radius 0 0 0;
+
+  @include breakpoint($large) {
+    padding: 5px 10px;
+  }
+
+  a {
+    color: #fff;
+    text-decoration: none;
+  }
+}
+
 /*
    List view
    ========================================================================== */

diff --git a/docs/_docs/14-helpers.md b/docs/_docs/14-helpers.md
@@ -30,7 +30,7 @@ feature_row:
   - image_path: /assets/images/unsplash-gallery-image-3-th.jpg
     title: "Placeholder 3"
     excerpt: "This is some sample content that goes here with **Markdown** formatting."
-last_modified_at: 2018-03-20T16:00:09-04:00
+last_modified_at: 2018-05-15T15:36:46-04:00
 toc: true
 toc_label: "Helpers"
 toc_icon: "cogs"
@@ -134,15 +134,16 @@ Designed to compliment the [`splash`]({{ "/docs/layouts/#splash-page-layout" | r
 
 To add a feature row containing three content blocks with text and image, add the following YAML Front Matter
 
-| Name           | Required     | Description | Default |
-| ----           | -----------  | ----------- | ------- |
-| **image_path** | **Required** | Full path to image eg: `/assets/images/filename.jpg`. Use absolute URLS for those hosted externally. | |
-| **alt**        | Optional     | Alternate text for image. | |
-| **title**      | Optional     | Content block title. | |
-| **excerpt**    | Optional     | Content block excerpt text. Markdown is allowed. | |
-| **url**        | Optional     | URL that the button should link to. | |
-| **btn_label**  | Optional     | Button text label. | `more_label` in UI Text data file. |
-| **btn_class**  | Optional     | Button style. See [utility classes]({{ "/docs/utility-classes/#buttons" | relative_url }}) for options. | `btn` |
+| Name              | Required     | Description | Default |
+| ----              | -----------  | ----------- | ------- |
+| **image_path**    | **Required** | Full path to image eg: `/assets/images/filename.jpg`. Use absolute URLS for those hosted externally. | |
+| **image_caption** | Optional     | Caption for image, Markdown is supported eg: `"Image from [Unsplash](https://unsplash.com)" | |
+| **alt**           | Optional     | Alternate text for image. | |
+| **title**         | Optional     | Content block title. | |
+| **excerpt**       | Optional     | Content block excerpt text. Markdown is allowed. | |
+| **url**           | Optional     | URL that the button should link to. | |
+| **btn_label**     | Optional     | Button text label. | `more_label` in UI Text data file. |
+| **btn_class**     | Optional     | Button style. See [utility classes]({{ "/docs/utility-classes/#buttons" | relative_url }}) for options. | `btn` |
 
 ```yaml
 feature_row:

diff --git a/docs/_docs/18-history.md b/docs/_docs/18-history.md
@@ -12,6 +12,7 @@ toc: true
 
 ### Enhancements
 
+* Add support for captioning images in feature row helper via `image_caption` YAML Front Matter. [#1440](https://github.com/mmistakes/minimal-mistakes/issues/1440)
 * Add [Google Custom Search Engine](https://cse.google.com/cse) support. [#1652](https://github.com/mmistakes/minimal-mistakes/issues/1652)
 * Update Font Awesome to version [`5.0.13`](https://github.com/FortAwesome/Font-Awesome/blob/master/CHANGELOG.md)
 * Add "Pets" sample archive page to documentation site. [#1664](https://github.com/mmistakes/minimal-mistakes/pull/1664)

diff --git a/test/_pages/splash-page.md b/test/_pages/splash-page.md
@@ -15,6 +15,7 @@ intro:
   - excerpt: 'Nullam suscipit et nam, tellus velit pellentesque at malesuada, enim eaque. Quis nulla, netus tempor in diam gravida tincidunt, *proin faucibus* voluptate felis id sollicitudin. Centered with `type="center"`'
 feature_row:
   - image_path: assets/images/unsplash-gallery-image-1-th.jpg
+    image_caption: "Image courtesy of [Unsplash](https://unsplash.com/)"
     alt: "placeholder image 1"
     title: "Placeholder 1"
     excerpt: "This is some sample content that goes here with **Markdown** formatting."