Fix image caption generated by pandoc with fancybox enabled

next-theme · Aug 28, 2021 · c377515 · c377515
1 parent e410399
commit c377515
Show file tree

Hide file tree

Showing 2 changed files with 6 additions and 2 deletions.
diff --git a/source/css/_common/components/post/post-body.styl b/source/css/_common/components/post/post-body.styl
@@ -45,7 +45,8 @@
     margin-left: 4px;
   }
 
-  .image-caption, .figure .caption {
+  // For fancybox and pandoc
+  .image-caption, img + figcaption, .fancybox + figcaption {
     color: $grey-dark;
     font-size: $font-size-small;
     font-weight: bold;

diff --git a/source/js/utils.js b/source/js/utils.js
@@ -49,7 +49,10 @@ NexT.utils = {
 
       const imageTitle = $image.attr('title') || $image.attr('alt');
       if (imageTitle) {
-        $imageWrapLink.append(`<p class="image-caption">${imageTitle}</p>`);
+        // Do not append image-caption if pandoc has already created a figcaption
+        if (!$imageWrapLink.next('figcaption').length) {
+          $imageWrapLink.append(`<p class="image-caption">${imageTitle}</p>`);
+        }
         // Make sure img title tag will show correctly in fancybox
         $imageWrapLink.attr('title', imageTitle).attr('data-caption', imageTitle);
       }