Guest User

Untitled

a guest
Mar 22nd, 2018
96
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 1.32 KB | None | 0 0
  1. //Converting a normal image to a gatsby-image is quite the same process for images pulled in from an external source.
  2. //In this case I am pulling data from WordPress, but change around the filenames and queries to suit your needs.
  3.  
  4. //The query below must be in a "page", "layout" or "template" file query.
  5. //What is returned is then passed down as a prop to the component.
  6.  
  7. //query in Blog "Template"
  8. export const pageQuery = graphql`
  9. query blogPageQuery {
  10. allWordpressPost {
  11. edges{
  12. node {
  13. featured_media {
  14. localFile {
  15. childImageSharp {
  16. sizes(maxWidth:500){
  17. ...GatsbyImageSharpSizes
  18. }
  19. }
  20. }
  21. }
  22. }
  23. }
  24. }
  25. }
  26. `
  27.  
  28. //Passing Image down to the "BlogCard" Component in Blog "Template" File
  29.  
  30. class SingleBlog extends React.Component {
  31. render() {
  32. const posts = this.props.data.allWordpressPost.edges;
  33. return (
  34. <div>
  35. {posts.map(({node}) => {
  36. return (
  37. <BlogCard key={node.id} postImage={node.featured_media.localFile} />
  38. )
  39. })}
  40. </div>
  41. )
  42. }
  43. }
  44.  
  45. //Inside the BlogCard Component
  46. import Img from 'gatsby-image';
  47.  
  48. const BlogCard = (props) => (
  49. <div>
  50. <Img sizes={props.postImage.childImageSharp.sizes}/>
  51. </div>
  52. );
Add Comment
Please, Sign In to add comment