Merge pull request #283 from rootwork/allow-empty-imagecaps

4 files changed, 45 insertions, 15 deletions

diff --git a/assets/js/index.js b/assets/js/index.js
index 6a1c0c1..007daf2 100644
--- a/assets/js/index.js
+++ b/assets/js/index.js
@@ -258,30 +258,48 @@ function fileClosure(){
         modifyClass(figure, 'inline');
       }
 
-      // Figure numbering
-      let captionText = image.title.trim().length ? image.title.trim() : alt;
+      // Image captions
+      let addCaption = true
+      let captionText = ''
 
-      if (captionText.length && !containsClass(image, 'alt' && !isInline)) {
-        imagePosition += 1;
-        image.dataset.pos = imagePosition;
-        const showImagePosition = showingImagePosition();
+      if(image.title.trim().length) {
+        captionText = image.title.trim()
+      } else {
+        if(image.title === " ") {
+          addCaption = false
+        } else {
+          captionText = alt
+        }
+      }
 
+      // Don't add a caption for featured images, inline images, or empty text
+      if(
+        image.matches(`.${featuredImageClass}`) ||
+        containsClass(image, 'alt' && !isInline) ||
+        !captionText.length
+      ) {
+        addCaption = false
+      }
+
+      if (addCaption) {
         let desc = document.createElement('figcaption');
         desc.classList.add(imageAltClass);
 
+        // Add figure numbering
+        imagePosition += 1;
+        image.dataset.pos = imagePosition;
+        const showImagePosition = showingImagePosition();
         const thisImgPos = image.dataset.pos;
-        // modify image caption is necessary
         captionText = showImagePosition ? `${showImagePositionLabel} ${thisImgPos}: ${captionText}` : captionText;
         desc.textContent = captionText;
 
-        if(!image.matches(`.${featuredImageClass}`)) {
-          // add a caption below image only if the image isn't a featured image
-          if(image.nextElementSibling) {
-            // check if a caption exist already and remove it
-            image.nextElementSibling.remove();
-          }
-          image.insertAdjacentHTML('afterend', desc.outerHTML);
+        // If a caption exists, remove it
+        if(image.nextElementSibling) {
+          image.nextElementSibling.remove();
         }
+
+        // Insert caption
+        image.insertAdjacentHTML('afterend', desc.outerHTML);
       }
     });
 
diff --git a/exampleSite/content/post/markdown-syntax.md b/exampleSite/content/post/markdown-syntax.md
index 9ad37cf..4e9245b 100644
--- a/exampleSite/content/post/markdown-syntax.md
+++ b/exampleSite/content/post/markdown-syntax.md
@@ -54,6 +54,12 @@ The following image is loaded from a remote URL. The alt text is the same (for s
 
 ![Jane Doe](https://raw.githubusercontent.com/chipzoller/hugo-clarity/master/exampleSite/static/images/jane-doe.png "This is Jane Doe")
 
+### Image with alt text and no caption
+
+Alt text is always recommended for SEO, accessibility and in cases when images don't load. However, you don't necessarily always want an image to have a caption. In that case, use a title with one space:
+
+![A building](/images/building.png " ")
+
 ## Blockquotes
 
 The blockquote element represents content that is quoted from another source, optionally with a citation which must be within a `footer` or `cite` element, and optionally with in-line changes such as annotations and abbreviations.
diff --git a/exampleSite/content/post/markdown-syntax.pt.md b/exampleSite/content/post/markdown-syntax.pt.md
index 1c480ae..74a6293 100644
--- a/exampleSite/content/post/markdown-syntax.pt.md
+++ b/exampleSite/content/post/markdown-syntax.pt.md
@@ -59,6 +59,12 @@ The following image is loaded from a remote URL. The alt text is the same (for s
 
 ![Jane Doe](https://raw.githubusercontent.com/chipzoller/hugo-clarity/master/exampleSite/static/images/jane-doe.png "This is Jane Doe")
 
+### Image with alt text and no caption
+
+Alt text is always recommended for SEO, accessibility and in cases when images don't load. However, you don't necessarily always want an image to have a caption. In that case, use a title with one space:
+
+![A building](/images/building.png " ")
+
 ## Blockquotes
 
 The blockquote element represents content that is quoted from another source, optionally with a citation which must be within a `footer` or `cite` element, and optionally with in-line changes such as annotations and abbreviations.
diff --git a/layouts/partials/figure.html b/layouts/partials/figure.html
index 163af57..3d797e2 100644
--- a/layouts/partials/figure.html
+++ b/layouts/partials/figure.html
@@ -55,7 +55,7 @@
     />
 
     {{/* Provide caption based on image title, if it is set. */}}
-    {{- with $cap -}}
+    {{- if not (eq $cap " ") -}}
       <figcaption>{{ $cap | safeHTML }}</figcaption>
     {{- end -}}