Outline
We've used a similar image component a few different times already, so let's just extract that into its own file.
Create a new file under src/components called BannerImageFluid.js. Copy the component we made in the last video, paste it in, and export it. We'll also need to add imports for Gatsby Image and styled-components. The code will look like this:
// src/components/BannerImageFluid.js
import Image from "gatsby-image"
import styled from "styled-components"
export default styled(Image)`
border-radius: 10px;
max-width: 400px;
margin-top: 20px;
`
Now, in both index.js and event-layout.js, we can import this file:
import BannerImageFluid from "../components/BannerImageFluid"
Finally, we can replace both image components with BannerImageFluid. In index.js, it will look like this:
// src/pages/index.js
export default ({ data }) => (
<Layout>
<BannerImageFluid fluid={data.file.childImageSharp.fluid} alt="Lodge" />
<p>Welcome to {data.site.siteMetadata.title}!</p>
</Layout>
)
In event-layout.js, it will look like this:
// src/pages/event-layout.js
export default ({ data: { mdx } }) => {
return (
<Layout>
{mdx.frontmatter.banner && (
<BannerImageFluid
fluid={mdx.frontmatter.banner.childImageSharp.fluid}
alt="Banner Image"
/>
)}
<h3>Name: {mdx.frontmatter.title}</h3>
<h3>Date: {mdx.frontmatter.date}</h3>
<h3>Category: {mdx.frontmatter.category}</h3>
<MDXRenderer>{mdx.body}</MDXRenderer>
</Layout>
)
}
That's it! Now, let's learn how we can add inline images in our Markdown files.