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
This commit is contained in:
Michael Rose 2018-05-15 15:41:45 -04:00
parent bcde2d76ea
commit 648254b2b5
6 changed files with 44 additions and 10 deletions

View file

@ -2,6 +2,7 @@
### Enhancements ### 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) * 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) * 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) * Add "Pets" sample archive page to documentation site. [#1664](https://github.com/mmistakes/minimal-mistakes/pull/1664)

View file

@ -25,6 +25,9 @@
"{{ f.image_path | relative_url }}" "{{ f.image_path | relative_url }}"
{% endif %} {% endif %}
alt="{% if f.alt %}{{ f.alt }}{% 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> </div>
{% endif %} {% endif %}

View file

@ -63,13 +63,40 @@
} }
.archive__item-teaser { .archive__item-teaser {
position: relative;
border-radius: $border-radius; border-radius: $border-radius;
overflow: hidden; overflow: hidden;
img { img {
width: 100%; 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 List view
========================================================================== */ ========================================================================== */

View file

@ -30,7 +30,7 @@ feature_row:
- image_path: /assets/images/unsplash-gallery-image-3-th.jpg - image_path: /assets/images/unsplash-gallery-image-3-th.jpg
title: "Placeholder 3" title: "Placeholder 3"
excerpt: "This is some sample content that goes here with **Markdown** formatting." 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: true
toc_label: "Helpers" toc_label: "Helpers"
toc_icon: "cogs" 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 To add a feature row containing three content blocks with text and image, add the following YAML Front Matter
| Name | Required | Description | Default | | Name | Required | Description | Default |
| ---- | ----------- | ----------- | ------- | | ---- | ----------- | ----------- | ------- |
| **image_path** | **Required** | Full path to image eg: `/assets/images/filename.jpg`. Use absolute URLS for those hosted externally. | | | **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. | | | **image_caption** | Optional | Caption for image, Markdown is supported eg: `"Image from [Unsplash](https://unsplash.com)" | |
| **title** | Optional | Content block title. | | | **alt** | Optional | Alternate text for image. | |
| **excerpt** | Optional | Content block excerpt text. Markdown is allowed. | | | **title** | Optional | Content block title. | |
| **url** | Optional | URL that the button should link to. | | | **excerpt** | Optional | Content block excerpt text. Markdown is allowed. | |
| **btn_label** | Optional | Button text label. | `more_label` in UI Text data file. | | **url** | Optional | URL that the button should link to. | |
| **btn_class** | Optional | Button style. See [utility classes]({{ "/docs/utility-classes/#buttons" | relative_url }}) for options. | `btn` | | **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 ```yaml
feature_row: feature_row:

View file

@ -12,6 +12,7 @@ toc: true
### Enhancements ### 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) * 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) * 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) * Add "Pets" sample archive page to documentation site. [#1664](https://github.com/mmistakes/minimal-mistakes/pull/1664)

View file

@ -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"`' - 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: feature_row:
- image_path: assets/images/unsplash-gallery-image-1-th.jpg - image_path: assets/images/unsplash-gallery-image-1-th.jpg
image_caption: "Image courtesy of [Unsplash](https://unsplash.com/)"
alt: "placeholder image 1" alt: "placeholder image 1"
title: "Placeholder 1" title: "Placeholder 1"
excerpt: "This is some sample content that goes here with **Markdown** formatting." excerpt: "This is some sample content that goes here with **Markdown** formatting."