From 648254b2b5abf5ea200df792bd207bd262f2727b Mon Sep 17 00:00:00 2001 From: Michael Rose Date: Tue, 15 May 2018 15:41:45 -0400 Subject: [PATCH] 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 #1440 --- CHANGELOG.md | 1 + _includes/feature_row | 3 +++ _sass/minimal-mistakes/_archive.scss | 27 +++++++++++++++++++++++++++ docs/_docs/14-helpers.md | 21 +++++++++++---------- docs/_docs/18-history.md | 1 + test/_pages/splash-page.md | 1 + 6 files changed, 44 insertions(+), 10 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index 0e3aedf6b71e..5ffc69da5114 100644 --- 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 index e953cd0674b4..89dfc1b4738b 100644 --- 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 %} + {{ f.image_caption | markdownify | remove: "

" | remove: "

" }} + {% endif %} {% endif %} diff --git a/_sass/minimal-mistakes/_archive.scss b/_sass/minimal-mistakes/_archive.scss index 88076a9acd26..40d156e28cfa 100644 --- 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 index 408ebebcb551..c8d4d6e5a361 100644 --- 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 index f8312d90cf30..9344fc8a03cb 100644 --- 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 index f0cd57b04a5a..f05b81a6afc7 100644 --- 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."