From b1483d8f7068c28a8862947087b436ad1762772a Mon Sep 17 00:00:00 2001
From: Leo <liaoyuan@gmail.com>
Date: Wed, 28 Oct 2020 11:43:09 -0700
Subject: [PATCH] Fix closing tag of figures without captions in lists (#2697)

When the figure helper is used in a list, which can be either ordered or
unordered, and no caption is specified, a line with text "</figure>"
will be shown below the figure on the rendered page.

This is because, if the '{% if include.caption %}' evaluates to false,
the lines between that 'if' statement and '{% endif %}' will be emptied,
not removed, so the block will be filled by empty lines.

HTML ignores redundant empty lines, but Markdown takes them seriously.
In addition, Markdown expects proper indentation of lines inside lists,
and the closing '</figure>' tag is not indented.  When combined, the
empty space and absence of indentation cause Markdown to process the
'</figure>' tag as a separate paragraph instead of an HTML tag, thus the
text for the tag is directly rendered on the page.

The fix for this issue is very simple: remove the empty space when
'include.caption' is false.  As described in
<https://shopify.github.io/liquid/basics/whitespace/>, this can be done
by adding hyphens to the 'if' and 'endif' tags.
---
 _includes/figure | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/_includes/figure b/_includes/figure
index f1ce1ebcc110..dacc668d1006 100644
--- a/_includes/figure
+++ b/_includes/figure
@@ -1,9 +1,9 @@
 <figure class="{{ include.class }}">
   <img src="{{ include.image_path | relative_url }}"
        alt="{% if include.alt %}{{ include.alt }}{% endif %}">
-  {% if include.caption %}
+  {%- if include.caption -%}
     <figcaption>
       {{ include.caption | markdownify | remove: "<p>" | remove: "</p>" }}
     </figcaption>
-  {% endif %}
+  {%- endif -%}
 </figure>