From 41a9bdab756528e02260ebbc8ac57389c89937d1 Mon Sep 17 00:00:00 2001
From: "David A. Hannasch" <David.A.Hannasch@gmail.com>
Date: Sat, 16 May 2020 08:15:23 -0600
Subject: [PATCH] If a title is explicitly provided, display it as a caption
 centered under the image.

---
 content/posts/2018-09-29-a-post-with-images/index.md | 2 ++
 gatsby-config.js                                     | 1 +
 src/components/Content.js                            | 4 ++++
 3 files changed, 7 insertions(+)

diff --git a/content/posts/2018-09-29-a-post-with-images/index.md b/content/posts/2018-09-29-a-post-with-images/index.md
index 1ded91733..35eba77c5 100644
--- a/content/posts/2018-09-29-a-post-with-images/index.md
+++ b/content/posts/2018-09-29-a-post-with-images/index.md
@@ -16,3 +16,5 @@ tags:
 
 ![a funny gif](./git-push-force.gif)
 
+![a funny gif](./cover.jpg "gatsby-config.js is set to only display a caption if a title is explicitly provided, rather than default to the alt-text. But if a title is provided, it will be centered under the image.")
+
diff --git a/gatsby-config.js b/gatsby-config.js
index 634bd767c..9e7befb08 100644
--- a/gatsby-config.js
+++ b/gatsby-config.js
@@ -51,6 +51,7 @@ module.exports = {
               maxWidth: 590,
               linkImagesToOriginal: false,
               withWebp: true,
+              showCaptions: ['title'],
             },
           },
           { resolve: 'gatsby-remark-prismjs' },
diff --git a/src/components/Content.js b/src/components/Content.js
index c20a9f459..108ab1cdb 100644
--- a/src/components/Content.js
+++ b/src/components/Content.js
@@ -74,6 +74,10 @@ const ContentBody = styled.div`
     font-style: italic;
   }
 
+  & .gatsby-resp-image-figcaption {
+    text-align: center;
+  }
+
   & .gatsby-highlight {
     border-radius: 5px;
     font-size: 15px;