Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- //Converting a normal image to a gatsby-image is quite the same process for images pulled in from an external source.
- //In this case I am pulling data from WordPress, but change around the filenames and queries to suit your needs.
- //The query below must be in a "page", "layout" or "template" file query.
- //What is returned is then passed down as a prop to the component.
- //query in Blog "Template"
- export const pageQuery = graphql`
- query blogPageQuery {
- allWordpressPost {
- edges{
- node {
- featured_media {
- localFile {
- childImageSharp {
- sizes(maxWidth:500){
- ...GatsbyImageSharpSizes
- }
- }
- }
- }
- }
- }
- }
- }
- `
- //Passing Image down to the "BlogCard" Component in Blog "Template" File
- class SingleBlog extends React.Component {
- render() {
- const posts = this.props.data.allWordpressPost.edges;
- return (
- <div>
- {posts.map(({node}) => {
- return (
- <BlogCard key={node.id} postImage={node.featured_media.localFile} />
- )
- })}
- </div>
- )
- }
- }
- //Inside the BlogCard Component
- import Img from 'gatsby-image';
- const BlogCard = (props) => (
- <div>
- <Img sizes={props.postImage.childImageSharp.sizes}/>
- </div>
- );
Add Comment
Please, Sign In to add comment