diff --git a/_includes/figure b/_includes/figure new file mode 100644 index 000000000000..da829e48fad7 --- /dev/null +++ b/_includes/figure @@ -0,0 +1,12 @@ +
+ {% if include.alt %}{{ include.alt }}{% endif %} + {% if include.caption %} +
{{ include.caption | markdownify | remove: "

" | remove: "

" }}
+ {% endif %} +
diff --git a/docs/_docs/14-helpers.md b/docs/_docs/14-helpers.md index f30141b439fc..325b8b9bca9e 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." -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 `
` 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 +
+ this is a placeholder image +
This is a figure caption.
+
+``` + ## Gallery Generate a `
` 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. | | diff --git a/docs/_includes/figure b/docs/_includes/figure new file mode 100644 index 000000000000..da829e48fad7 --- /dev/null +++ b/docs/_includes/figure @@ -0,0 +1,12 @@ +
+ {% if include.alt %}{{ include.alt }}{% endif %} + {% if include.caption %} +
{{ include.caption | markdownify | remove: "

" | remove: "

" }}
+ {% endif %} +