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
parent
bcde2d76ea
commit
648254b2b5
|
|
@ -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)
|
||||
|
|
|
|||
|
|
@ -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 %}
|
||||
|
||||
|
|
|
|||
|
|
@ -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
|
||||
========================================================================== */
|
||||
|
|
|
|||
|
|
@ -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:
|
||||
|
|
|
|||
|
|
@ -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)
|
||||
|
|
|
|||
|
|
@ -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."
|
||||
|
|
|
|||
Loading…
Reference in a new issue