N-archive/hacks-guide-minimal-mistakes-theme
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

Add support for captioning images in feature row helper

Browse source 
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
Show stats Download patch file Download diff file Expand all files Collapse all files

1
CHANGELOG.md
View file

@ -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)

3
_includes/feature_row
View file

@ -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 %}

27
_sass/minimal-mistakes/_archive.scss
View file

@ -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
========================================================================== */

3
docs/_docs/14-helpers.md
View file

@ -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"
@ -137,6 +137,7 @@ To add a feature row containing three content blocks with text and image, add th
| 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. | |

1
docs/_docs/18-history.md
View file

@ -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)

1
test/_pages/splash-page.md
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"`'
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."