diff --git a/packages/gatsby-theme-blog-core/gatsby-node.js b/packages/gatsby-theme-blog-core/gatsby-node.js
index ac40baa1..a298640b 100644
--- a/packages/gatsby-theme-blog-core/gatsby-node.js
+++ b/packages/gatsby-theme-blog-core/gatsby-node.js
@@ -59,6 +59,8 @@ exports.createSchemaCustomization = ({ actions, schema }, themeOptions) => {
excerpt: String!
image: File
imageAlt: String
+ imageCaptionText: String
+ imageCaptionLink: String
socialImage: File
}`)
@@ -98,6 +100,12 @@ exports.createSchemaCustomization = ({ actions, schema }, themeOptions) => {
imageAlt: {
type: `String`,
},
+ imageCaptionText: {
+ type: `String`,
+ },
+ imageCaptionLink: {
+ type: `String`,
+ },
socialImage: {
type: `File`,
resolve: async (source, args, context, info) => {
@@ -199,6 +207,8 @@ exports.onCreateNode = async (
date: node.frontmatter.date,
image: node.frontmatter.image,
imageAlt: node.frontmatter.imageAlt,
+ imageCaptionText: node.frontmatter.imageCaptionText,
+ imageCaptionLink: node.frontmatter.imageCaptionLink,
socialImage: node.frontmatter.socialImage,
}
diff --git a/packages/gatsby-theme-blog-core/src/templates/post-query.js b/packages/gatsby-theme-blog-core/src/templates/post-query.js
index fc8dd317..0713a42c 100644
--- a/packages/gatsby-theme-blog-core/src/templates/post-query.js
+++ b/packages/gatsby-theme-blog-core/src/templates/post-query.js
@@ -36,6 +36,8 @@ export const query = graphql`
}
}
imageAlt
+ imageCaptionText
+ imageCaptionLink
socialImage {
childImageSharp {
fluid {
diff --git a/packages/gatsby-theme-blog/src/components/post-hero-caption.js b/packages/gatsby-theme-blog/src/components/post-hero-caption.js
new file mode 100644
index 00000000..69c6d887
--- /dev/null
+++ b/packages/gatsby-theme-blog/src/components/post-hero-caption.js
@@ -0,0 +1,27 @@
+import React from "react"
+import { Styled, css, Flex } from "theme-ui"
+
+const PostHeroCaption = ({ text, url }) => {
+ console.log(__filename, `text`, { text, url })
+ return (
+ <>
+ {text && (
+
+ {url ? (
+
+ {text}
+
+ ) : (
+ {text}
+ )}
+
+ )}
+ >
+ )
+}
+
+export default PostHeroCaption
diff --git a/packages/gatsby-theme-blog/src/components/post-hero.js b/packages/gatsby-theme-blog/src/components/post-hero.js
index 91077fdb..52c65846 100644
--- a/packages/gatsby-theme-blog/src/components/post-hero.js
+++ b/packages/gatsby-theme-blog/src/components/post-hero.js
@@ -1,13 +1,21 @@
import React from "react"
import Image from "gatsby-image"
+import PostHeroCaption from "./post-hero-caption"
+
const PostHero = ({ post }) => (
<>
{post?.image?.childImageSharp && (
-
+ <>
+
+
+ >
)}
>
)
diff --git a/starters/theme/content/posts/hello-world.mdx b/starters/theme/content/posts/hello-world.mdx
index b6a9d699..5507b95c 100644
--- a/starters/theme/content/posts/hello-world.mdx
+++ b/starters/theme/content/posts/hello-world.mdx
@@ -2,6 +2,8 @@
title: Hello World
date: 2019-04-15
image: https://images.unsplash.com/photo-1546488979-08680803296d?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=2562&q=80
+imageCaptionText: 'Photo by John Kappa ツ on Unsplash'
+imageCaptionLink: 'https://unsplash.com/@johnkappa?utm_source=gatsby-blog-starter&utm_medium=referral'
---
Hello, world! This is a demo post for `gatsby-theme-blog`.
diff --git a/starters/theme/content/posts/my-second-post/index.mdx b/starters/theme/content/posts/my-second-post/index.mdx
index 3c9768c5..8d82094f 100644
--- a/starters/theme/content/posts/my-second-post/index.mdx
+++ b/starters/theme/content/posts/my-second-post/index.mdx
@@ -2,6 +2,7 @@
title: My Second Post!
date: 2019-05-15
image: ./computer.jpeg
+imageCaptionText: 'Photo by John Kappa ツ on Unsplash'
---
Wow! I love blogging so much already.