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

Merge branch 'feature/image-helper' into develop

Browse source
This commit is contained in:
Michael Rose 2016-11-15 12:12:54 -05:00
commit c4252b09af
3 changed files with 54 additions and 3 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

12
_includes/figure Normal file
View file

@ -0,0 +1,12 @@
<figure class="{{ include.class }}">
<img src=
{% if include.image_path contains "://" %}
"{{ include.image_path }}"
{% else %}
"{{ include.image_path | absolute_url }}"
{% endif %}
alt="{% if include.alt %}{{ include.alt }}{% endif %}">
{% if include.caption %}
<figcaption>{{ include.caption | markdownify | remove: "<p>" | remove: "</p>" }}</figcaption>
{% endif %}
</figure>

33
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."
modified: 2016-11-03T11:15:48-04:00
modified: 2016-11-15T12:11:48-05:00
---
{% include toc icon="gears" title="Helpers" %}
@ -64,6 +64,33 @@ The Liquid based taxonomy archives found amongst the demo pages rely on this hel
[tag-array]: https://github.com/{{ site.repository }}/blob/master/docs/_pages/tag-archive.html
[tag-array-demo]: {{ "/tags/" | absolute_url }}
## Figure
Generate a `<figure>` element with a single image and caption.
| Include Parameter | Required | Description |
| ---- | -------- | ----------- |
| **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. |
| **caption** | Optional | Figure caption text. Markdown is allowed. |
Using the `figure` include like so:
```liquid
{% raw %}{% include figure image_path="/assets/images/unsplash-image-10.jpg" alt="this is a placeholder image" caption="This is a figure caption." %}{% endraw %}
```
Will output the following:
{% include figure image_path="/assets/images/unsplash-image-10.jpg" alt="this is a placeholder image" caption="This is a figure caption." %}
```html
<figure>
<img src="/assets/images/unsplash-image-10.jpg" alt="this is a placeholder image">
<figcaption>This is a figure caption.</figcaption>
</figure>
```
## Gallery
Generate a `<figure>` element with optional caption of arrays with two or more images.
@ -73,7 +100,7 @@ To place a gallery add the necessary YAML Front Matter.
| Name | Required | Description |
| ---- | -------- | ----------- |
| **url** | Optional | URL to link gallery image to (eg. a larger detail image). |
| **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. |
| **title** | Optional | Title text for image. Will display as a caption in a Magnific Popup overlay when linked to a larger image with `url`. |
@ -120,7 +147,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_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. | |

12
docs/_includes/figure Normal file
View file

@ -0,0 +1,12 @@
<figure class="{{ include.class }}">
<img src=
{% if include.image_path contains "://" %}
"{{ include.image_path }}"
{% else %}
"{{ include.image_path | absolute_url }}"
{% endif %}
alt="{% if include.alt %}{{ include.alt }}{% endif %}">
{% if include.caption %}
<figcaption>{{ include.caption | markdownify | remove: "<p>" | remove: "</p>" }}</figcaption>
{% endif %}
</figure>