fix(gatsby-remark-images): update to accept alt as title when no titl…

…e present (#13489)

* Fixes #13448

* Clean up

* update snapshot

* affect only caption

* don't manually bump version

* add basic tests for showCaptions

packages/gatsby-remark-images/README.md

@@ -48,7 +48,7 @@ plugins: [
 | ---------------------- | ------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
 | `maxWidth`             | `650`   | The `maxWidth` in pixels of the div where the markdown will be displayed. This value is used when deciding what the width of the various responsive thumbnails should be.                                                                                                                                                                                                                                                                                                   |
 | `linkImagesToOriginal` | `true`  | Add a link to each image to the original image. Sometimes people want to see a full-sized version of an image e.g. to see extra detail on a part of the image and this is a convenient and common pattern for enabling this. Set this option to false to disable this behavior.                                                                                                                                                                                             |
-| `showCaptions`         | `false` | Add a caption to each image with the contents of the title attribute, when this is not empty. Set this option to true to enable this behavior.                                                                                                                                                                                                                                                                                                                              |
+| `showCaptions`         | `false` | Add a caption to each image with the contents of the title attribute, when this is not empty. If the title attribute is empty but the alt attribute is not, it will be used instead. Set this option to true to enable this behavior.                                                                                                                                                                                                                                       |
 | `sizeByPixelDensity`   | `false` | Analyze images' pixel density to make decisions about target image size. This is what GitHub is doing when embedding images in tickets. This is a useful setting for documentation pages with a lot of screenshots. It can have unintended side effects on high pixel density artworks.<br /><br />Example: A screenshot made on a retina screen with a resolution of 144 (e.g. Macbook) and a width of 100px, will be rendered at 50px.                                    |
 | `wrapperStyle`         |         | Add custom styles to the div wrapping the responsive images. Use the syntax for the style attribute e.g. `margin-bottom:10px; background: red;` or a function returning a style string which receives the information about the image you can use to dynamically set styles based on the aspectRatio for example.                                                                                                                                                           |
 | `backgroundColor`      | `white` | Set the background color of the image to match the background image of your design.                                                                                                                                                                                                                                                                                                                                                                                         |

packages/gatsby-remark-images/src/__tests__/__snapshots__/index.js.snap

@@ -191,3 +191,67 @@ exports[`it uses tracedSVG placeholder when enabled 1`] = `
   </span>
   </a>"
 `;
+
+exports[`showCaptions display alt as caption if title was not found 1`] = `
+"<figure class=\\"gatsby-resp-image-figure\\" style=\\"\\">
+    <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-wrapper\\"
+    style=\\"position: relative; display: block; margin-left: auto; margin-right: auto;  max-width: 300px;\\"
+  >
+    <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\\"
+        style=\\"width:100%;height:100%;margin:0;vertical-align:middle;position:absolute;top:0;left:0;box-shadow:inset 0px 0px 0px 400px white;\\"
+        alt=\\"some alt\\"
+        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\\"
+      />
+  </span>
+  </a>
+    <figcaption class=\\"gatsby-resp-image-figcaption\\">some alt</figcaption>
+  </figure>"
+`;
+
+exports[`showCaptions display title as caption 1`] = `
+"<figure class=\\"gatsby-resp-image-figure\\" style=\\"\\">
+    <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-wrapper\\"
+    style=\\"position: relative; display: block; margin-left: auto; margin-right: auto;  max-width: 300px;\\"
+  >
+    <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\\"
+        style=\\"width:100%;height:100%;margin:0;vertical-align:middle;position:absolute;top:0;left:0;box-shadow:inset 0px 0px 0px 400px white;\\"
+        alt=\\"some alt\\"
+        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\\"
+      />
+  </span>
+  </a>
+    <figcaption class=\\"gatsby-resp-image-figcaption\\">some title</figcaption>
+  </figure>"
+`;

packages/gatsby-remark-images/src/__tests__/index.js

@@ -22,6 +22,7 @@ jest.mock(`gatsby-plugin-sharp`, () => {
 const Remark = require(`remark`)
 const { Potrace } = require(`potrace`)
 const queryString = require(`query-string`)
+const cheerio = require(`cheerio`)
 
 const plugin = require(`../`)
 
@@ -337,3 +338,35 @@ test(`it uses tracedSVG placeholder when enabled`, async () => {
     })
   )
 })
+
+describe(`showCaptions`, () => {
+  it(`display title as caption`, async () => {
+    const imagePath = `images/my-image.jpeg`
+    const content = `![some alt](./${imagePath} "some title")`
+
+    const nodes = await plugin(createPluginOptions(content, imagePath), {
+      showCaptions: true,
+    })
+    expect(nodes.length).toBe(1)
+
+    const node = nodes.pop()
+    const $ = cheerio.load(node.value)
+    expect($(`figcaption`).text()).toEqual(`some title`)
+    expect(node.value).toMatchSnapshot()
+  })
+
+  it(`display alt as caption if title was not found`, async () => {
+    const imagePath = `images/my-image.jpeg`
+    const content = `![some alt](./${imagePath})`
+
+    const nodes = await plugin(createPluginOptions(content, imagePath), {
+      showCaptions: true,
+    })
+    expect(nodes.length).toBe(1)
+
+    const node = nodes.pop()
+    const $ = cheerio.load(node.value)
+    expect($(`figcaption`).text()).toEqual(`some alt`)
+    expect(node.value).toMatchSnapshot()
+  })
+})

packages/gatsby-remark-images/src/index.js

@@ -81,6 +81,15 @@ module.exports = (
     }
   }
 
+  const getNodeTitle = (node, alt) => {
+    if (node.title) {
+      return node.title
+    } else if (alt && alt.length > 0) {
+      return alt
+    }
+    return ``
+  }
+
   // Takes a node and generates the needed images and then returns
   // the needed HTML replacement for the image
   const generateImagesAndUpdateNode = async function(
@@ -241,7 +250,7 @@ module.exports = (
         : options.wrapperStyle
 
     // Construct new image node w/ aspect ratio placeholder
-    const showCaptions = options.showCaptions && node.title
+    const showCaptions = options.showCaptions && getNodeTitle(node, alt)
     let rawHTML = `
   <span
     class="${imageWrapperClass}"
@@ -277,7 +286,10 @@ module.exports = (
       rawHTML = `
   <figure class="gatsby-resp-image-figure" style="${wrapperStyle}">
     ${rawHTML}
-    <figcaption class="gatsby-resp-image-figcaption">${node.title}</figcaption>
+    <figcaption class="gatsby-resp-image-figcaption">${getNodeTitle(
+      node,
+      alt
+    )}</figcaption>
   </figure>
       `.trim()
     }