fix(gatsby-remark-images): Allow alt to be returned as caption (#16518)

gatsbyjs · Aug 11, 2019 · f09e82f · f09e82f
1 parent 67bace7
commit f09e82f
Show file tree

Hide file tree

Showing 3 changed files with 54 additions and 5 deletions.
diff --git a/packages/gatsby-remark-images/src/__tests__/__snapshots__/index.js.snap b/packages/gatsby-remark-images/src/__tests__/__snapshots__/index.js.snap
@@ -248,6 +248,37 @@ exports[`showCaptions display alt as caption if specified in showCaptions array
   </figure>"
 `;
 
+exports[`showCaptions display alt as caption if specified in showCaptions array, even if it matches filename 1`] = `
+"<figure class=\\"gatsby-resp-image-figure\\" style=\\"\\">
+    <span
+      class=\\"gatsby-resp-image-wrapper\\"
+      style=\\"position: relative; display: block; margin-left: auto; margin-right: auto;  max-width: 300px;\\"
+    >
+      <a
+    class=\\"gatsby-resp-image-link\\"
+    href=\\"not-a-real-dir/images/my-image.jpeg\\"
+    style=\\"display: block\\"
+    target=\\"_blank\\"
+    rel=\\"noopener\\"
+  >
+    <span
+    class=\\"gatsby-resp-image-background-image\\"
+    style=\\"padding-bottom: 133.33333333333331%; position: relative; bottom: 0; left: 0; background-image: url('data:image/png;base64,iVBORw'); background-size: cover; display: block;\\"
+  ></span>
+  <img
+        class=\\"gatsby-resp-image-image\\"
+        alt=\\"my image\\"
+        title=\\"some title\\"
+        src=\\"not-a-real-dir/images/my-image.jpeg\\"
+        srcset=\\"not-a-real-dir/images/my-image.jpeg, not-a-real-dir/images/my-image.jpeg\\"
+        sizes=\\"(max-width: 650px) 100vw, 650px\\"
+      />
+  </a>
+    </span>
+    <figcaption class=\\"gatsby-resp-image-figcaption\\">my image</figcaption>
+  </figure>"
+`;
+
 exports[`showCaptions display alt as caption if title was not found and showCaptions === true 1`] = `
 "<figure class=\\"gatsby-resp-image-figure\\" style=\\"\\">
     <span

diff --git a/packages/gatsby-remark-images/src/__tests__/index.js b/packages/gatsby-remark-images/src/__tests__/index.js
@@ -516,4 +516,19 @@ describe(`showCaptions`, () => {
     const $ = cheerio.load(node.value)
     expect($(`figcaption`).length).toBe(0)
   })
+
+  it(`display alt as caption if specified in showCaptions array, even if it matches filename`, async () => {
+    const imagePath = `images/my-image.jpeg`
+    const content = `![my image](./${imagePath} "some title")`
+
+    const nodes = await plugin(createPluginOptions(content, imagePath), {
+      showCaptions: [`alt`],
+    })
+    expect(nodes.length).toBe(1)
+
+    const node = nodes.pop()
+    const $ = cheerio.load(node.value)
+    expect($(`figcaption`).html()).toEqual(`my image`)
+    expect(node.value).toMatchSnapshot()
+  })
 })
diff --git a/packages/gatsby-remark-images/src/index.js b/packages/gatsby-remark-images/src/index.js
@@ -71,7 +71,7 @@ module.exports = (
     }
   }
 
-  const getImageCaption = (node, alt, defaultAlt) => {
+  const getImageCaption = (node, overWrites) => {
     const captionOptions = Array.isArray(options.showCaptions)
       ? options.showCaptions
       : options.showCaptions === true
@@ -87,8 +87,11 @@ module.exports = (
             }
             break
           case `alt`:
-            if (alt && alt !== defaultAlt) {
-              return alt
+            if (overWrites.alt) {
+              return overWrites.alt
+            }
+            if (node.alt) {
+              return node.alt
             }
             break
         }
@@ -153,7 +156,7 @@ module.exports = (
       overWrites.alt ? overWrites.alt : node.alt ? node.alt : defaultAlt
     )
 
-    const title = node.title ? node.title : alt
+    const title = node.title ? _.escape(node.title) : alt
 
     // Create our base image tag
     let imageTag = `
@@ -243,7 +246,7 @@ module.exports = (
 
     // Construct new image node w/ aspect ratio placeholder
     const imageCaption =
-      options.showCaptions && getImageCaption(node, alt, defaultAlt)
+      options.showCaptions && _.escape(getImageCaption(node, overWrites))
 
     let rawHTML = `
   <span