From eedf838d1f1f35116d9ad80abf6d5838f2f38e52 Mon Sep 17 00:00:00 2001 From: Fernando Ribeiro Date: Fri, 7 Oct 2016 21:45:59 +0100 Subject: [PATCH 1/6] add image helper for easier image insertion in posts --- _includes/image | 14 ++++++++++++++ 1 file changed, 14 insertions(+) create mode 100644 _includes/image diff --git a/_includes/image b/_includes/image new file mode 100644 index 00000000..1c619bd7 --- /dev/null +++ b/_includes/image @@ -0,0 +1,14 @@ +{% include base_path %} + +
+ {% if include.alt %}{{ include.alt }}{% endif %} + {% if include.caption %} +
{{ include.caption | markdownify | remove: "

" | remove: "

" }}
+ {% endif %} +
From 37d4eb8807465f964046680417dce9bd10060610 Mon Sep 17 00:00:00 2001 From: Fernando Ribeiro Date: Sat, 5 Nov 2016 21:27:59 +0000 Subject: [PATCH 2/6] Update image --- _includes/image | 4 +--- 1 file changed, 1 insertion(+), 3 deletions(-) diff --git a/_includes/image b/_includes/image index 1c619bd7..fb8d9d23 100644 --- a/_includes/image +++ b/_includes/image @@ -1,11 +1,9 @@ -{% include base_path %} -
{% if include.alt %}{{ include.alt }}{% endif %} {% if include.caption %} From 637e5d99343cceeae9bd93cb0ea7231be5dcd10e Mon Sep 17 00:00:00 2001 From: Fernando Ribeiro Date: Sat, 5 Nov 2016 21:46:02 +0000 Subject: [PATCH 3/6] Replace base_path with `absolute_url` filter --- _includes/image | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/_includes/image b/_includes/image index fb8d9d23..63fe593d 100644 --- a/_includes/image +++ b/_includes/image @@ -3,7 +3,7 @@ {% if include.image_path contains "://" %} "{{ include.image_path }}" {% else %} - "{{ include.image_path | prepend: "/assets/images/" | prepend: absolute_url }}" + "{{ include.image_path | prepend: "/assets/images/" | absolute_url }}" {% endif %} alt="{% if include.alt %}{{ include.alt }}{% endif %}"> {% if include.caption %} From da9525974307e85bae3f4f676f7d20fc79541cfc Mon Sep 17 00:00:00 2001 From: Fernando Ribeiro Date: Tue, 8 Nov 2016 20:15:41 +0000 Subject: [PATCH 4/6] Do not assume images would be placed in `/assets/images/` In order to add an image to a post, just use the following syntax: {% include image image_path="/full/path/to/MyPostImage.png" caption="The optional image caption" %} or {% include image image_path="https://example.com/images/MyPostImage.png" caption="The optional image caption" alt="The optional alt text" %} --- _includes/image | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/_includes/image b/_includes/image index 63fe593d..da829e48 100644 --- a/_includes/image +++ b/_includes/image @@ -3,7 +3,7 @@ {% if include.image_path contains "://" %} "{{ include.image_path }}" {% else %} - "{{ include.image_path | prepend: "/assets/images/" | absolute_url }}" + "{{ include.image_path | absolute_url }}" {% endif %} alt="{% if include.alt %}{{ include.alt }}{% endif %}"> {% if include.caption %} From 749c780736b20922b86a8a2fdabd1f80f9d2cd2c Mon Sep 17 00:00:00 2001 From: Michael Rose Date: Tue, 15 Nov 2016 12:12:14 -0500 Subject: [PATCH 5/6] Rename image helper to figure --- _includes/{image => figure} | 0 docs/_includes/figure | 12 ++++++++++++ 2 files changed, 12 insertions(+) rename _includes/{image => figure} (100%) create mode 100644 docs/_includes/figure diff --git a/_includes/image b/_includes/figure similarity index 100% rename from _includes/image rename to _includes/figure diff --git a/docs/_includes/figure b/docs/_includes/figure new file mode 100644 index 00000000..da829e48 --- /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 %} +
From 554e8477a87819dfdb8053842b5ebc75e2ff8df5 Mon Sep 17 00:00:00 2001 From: Michael Rose Date: Tue, 15 Nov 2016 12:12:27 -0500 Subject: [PATCH 6/6] Document figure helper --- docs/_docs/14-helpers.md | 33 ++++++++++++++++++++++++++++++--- 1 file changed, 30 insertions(+), 3 deletions(-) diff --git a/docs/_docs/14-helpers.md b/docs/_docs/14-helpers.md index f30141b4..325b8b9b 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. | |