Add hero image captions to posts. Commented out for events for now.

src/templates/event.js

@@ -116,9 +116,17 @@ export const EventTemplate = ({
             </div>
           </div>
           {hasFeaturedMedia && (
-            <div className="event-hero_image">
+            <>
-              <Img fluid={featuredMedia.localFile.childImageSharp.fluid} />
+              <div className="event-hero_image">
-            </div>
+                <Img fluid={featuredMedia.localFile.childImageSharp.fluid} />
+              </div>
+              {/* {featuredMedia.caption && (
+                <div
+                  className="event-hero_image-caption"
+                  dangerouslySetInnerHTML={{ __html: featuredMedia.caption }}
+                />
+              )} */}
+            </>
           )}
         </div>
       </div>
@@ -150,7 +158,9 @@ export const EventTemplate = ({
 EventTemplate.propTypes = {
   content: PropTypes.node.isRequired,
   title: PropTypes.string.isRequired,
-  featuredMedia: PropTypes.shape({}),
+  featuredMedia: PropTypes.shape({
+    caption: PropTypes.string,
+  }),
   startTime: PropTypes.string.isRequired,
   endTime: PropTypes.string,
   venue: PropTypes.shape({
@@ -225,6 +235,7 @@ export const eventQuery = graphql`
     price_member
     price_regular
     featured_media {
+      caption
       localFile {
         ...FluidImage
       }

src/templates/post.js

@@ -39,9 +39,18 @@ export const BlogPostTemplate = ({
         </div>
       </div>
       {hasFeaturedMedia && (
-        <div className="post-hero_image">
+        <>
-          <Img fluid={featuredMedia.localFile.childImageSharp.fluid} />
+          <div className="post-hero_image">
-        </div>
+            <Img fluid={featuredMedia.localFile.childImageSharp.fluid} />
+            {featuredMedia.caption && (
+            <div
+              className="post-hero_image-caption"
+              dangerouslySetInnerHTML={{ __html: featuredMedia.caption }}
+            />
+          )}
+          </div>
+
+        </>
       )}
       <div
         className="post-content wp-content"
@@ -55,7 +64,9 @@ BlogPostTemplate.propTypes = {
   content: PropTypes.node.isRequired,
   title: PropTypes.string,
   date: PropTypes.string.isRequired,
-  featuredMedia: PropTypes.shape({}),
+  featuredMedia: PropTypes.shape({
+    caption: PropTypes.string,
+  }),
   author: PropTypes.shape({
     name: PropTypes.string,
     slug: PropTypes.string,
@@ -124,6 +135,7 @@ export const pageQuery = graphql`
         slug
       }
       featured_media {
+        caption
         localFile {
           ...FluidImage
         }