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 && ( - {post.imageAlt + <> + {post.imageAlt + + )} ) 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.