Skip to content
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

Merged
merged 11 commits into from
Jul 14, 2020
Merged
36 changes: 11 additions & 25 deletions src/components/Image.js
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} />;
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Suggested change
const Image = ({ src, alt, width }) => {
return <img src={src} alt={alt} width={width} />;
const Image = (props) => {
return <img {...props} />;

Copy link
Contributor Author

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

Copy link
Contributor

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:

const Image ({ alt, ...props }) => (
  <img alt={alt} {...props} />
)

};

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,
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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?

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

So my understanding of the ticket was that we wanted to standardize the size of the images (?) @mmfred @djsauble what are your thoughts on this?

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Great point 😄 . I'll be curious to see what the others say .

Copy link
Contributor

Choose a reason for hiding this comment

The 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:

Screen Shot 2020-07-13 at 10 52 14 AM

In contrast, images that take the full width of the page can be fine as long as they're not too tall. For example:

Screen Shot 2020-07-13 at 10 56 14 AM

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.

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Okay! thank you for those suggestions @djsauble

};

export default Image;
2 changes: 2 additions & 0 deletions src/components/MDXContainer.js
Original file line number Diff line number Diff line change
Expand Up @@ -12,6 +12,7 @@ import Important from './Important';
import Tip from './Tip';
import Intro from './Intro';
import MDXCodeBlock from './MDXCodeBlock';
import Image from './Image';

import styles from './MDXContainer.module.scss';

Expand All @@ -23,6 +24,7 @@ const components = {
Important,
Tip,
Intro,
Image,
code: MDXCodeBlock,
pre: (props) => props.children,
};
Expand Down
2 changes: 1 addition & 1 deletion src/markdown-pages/build-apps/build-hello-world-app.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -121,7 +121,7 @@ If you followed all the steps in the CLI wizard, you now have files under a new

When the browser opens, click the new launcher for your application. Here's an example where we inserted a leaf icon:

![The customized nerdlet launcher](../../images/create-hello-world/hello-world-launcher.png)
<Image src="../../images/create-hello-world/hello-world-launcher.png" alt="The customized nerdlet launcher" />


After you click the new launcher, your "Hello, World!" appears:
Expand Down