-
Notifications
You must be signed in to change notification settings - Fork 114
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Image component for markdown components #427
Changes from 3 commits
4761c9a
6f06093
53057ec
1f17610
9798fca
b2d0272
4f03954
f94be6a
cfa2601
6c153c4
a81ae5e
File filter
Filter by extension
Conversations
Jump to
Diff view
Diff view
There are no files selected for viewing
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -1,32 +1,18 @@ | ||
import React from 'react'; | ||
import { useStaticQuery, graphql } from 'gatsby'; | ||
import Img from 'gatsby-image'; | ||
import PropTypes from 'prop-types'; | ||
|
||
/* | ||
* This component is built using `gatsby-image` to automatically serve optimized | ||
* images with lazy loading and reduced file sizes. The image is loaded using a | ||
* `useStaticQuery`, which allows us to load the image from directly within this | ||
* component, rather than having to pass the image data down from pages. | ||
* | ||
* For more information, see the docs: | ||
* - `gatsby-image`: https://gatsby.dev/gatsby-image | ||
* - `useStaticQuery`: https://www.gatsbyjs.org/docs/use-static-query/ | ||
*/ | ||
const Image = ({ src, alt, width }) => { | ||
return <img src={src} alt={alt} width={width} />; | ||
}; | ||
|
||
const Image = () => { | ||
const data = useStaticQuery(graphql` | ||
query { | ||
placeholderImage: file(relativePath: { eq: "gatsby-astronaut.png" }) { | ||
childImageSharp { | ||
fluid(maxWidth: 300) { | ||
...GatsbyImageSharpFluid | ||
} | ||
} | ||
} | ||
} | ||
`); | ||
Image.propTypes = { | ||
src: PropTypes.string.isRequired, | ||
alt: PropTypes.string, | ||
width: PropTypes.number, | ||
}; | ||
|
||
return <Img fluid={data.placeholderImage.childImageSharp.fluid} />; | ||
Image.defaultProps = { | ||
width: 1200, | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. Would it make more sense to make this width There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. Great point 😄 . I'll be curious to see what the others say . There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. Images that are too large in the vertical dimension make it hard to follow the flow of the page. For example: In contrast, images that take the full width of the page can be fine as long as they're not too tall. For example: My suggest is to 1) set a max-height of 400px for images, 2) let the width be up to 100% while respecting the aspect ratio of the image, 3) left align images so they follow the shape of the text. There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. Okay! thank you for those suggestions @djsauble |
||
}; | ||
|
||
export default Image; |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
when I try to do this, i get a linting error because the linter wants there to be an alt prop, so I think i'm just going to keep it in the structure that I currently have it in
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
@caylahamann You can get around the lint error and apply @zstix's suggestion by destructuring the
alt
prop and spreading the rest of them like this: