Image component for markdown components #427
Conversation
src/components/Image.js
Outdated
| const Image = ({ src, alt, width }) => { | ||
| return <img src={src} alt={alt} width={width} />; |
There was a problem hiding this comment.
| const Image = ({ src, alt, width }) => { | |
| return <img src={src} alt={alt} width={width} />; | |
| const Image = (props) => { | |
| return <img {...props} />; |
There was a problem hiding this comment.
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.
@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:
const Image ({ alt, ...props }) => (
<img alt={alt} {...props} />
)
src/components/Image.js
Outdated
|
|
||
| return <Img fluid={data.placeholderImage.childImageSharp.fluid} />; | ||
| Image.defaultProps = { | ||
| width: 1200, |
There was a problem hiding this comment.
Would it make more sense to make this width auto by default? Seems weird we'd want to specify a hard width for all images rather than let theme be their natural size until someone configures it otherwise. Thoughts?
There was a problem hiding this comment.
Great point 😄 . I'll be curious to see what the others say .
There was a problem hiding this comment.
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.
Okay! thank you for those suggestions @djsauble
caylahamann
added
enhancement
|
🎉 This PR is included in version 1.5.0 🎉 The release is available on GitHub release Your semantic-release bot 📦🚀 |
Description
This PR creates an image component for markdown components. It provides the same functionality as
![]syntax, but the hope is that we can expand on this to standardize our images"Reviewer Notes
I replaced one component in one guide to demonstrate the difference. If you look at "Create a 'Hello, World!' application guide underneath the Build Apps section.
Related Issue(s) / Ticket(s)
Closes #328