Simplify image inclusion and styles

[jfrank-nih]

Issue description

We currently have multiple different image inclusion methods.

• image-with-caption: ImageWithCaption
• image-with-class: ImageWithClass
• picture-with-quotes: PictureWithQuotes
• responsive-image: ResponsiveImage

I'd like to simplify this to:

• As few tags as possible
• The least markup possible (ideally just the markdown itself whenever we can)

We'll create a documentation page on how to use them in combination with each other to get the results we want. Changes we make should look substantially similar to current formats but don't have to be identical.

We should also move off of gatsby-image, which is deprecated, to gatsby-plugin-image. See also #219.

What's the proposed change?

• image-with-caption: gatsby-remark-images plugin has attributes showCaptions and markdownCaptions that can take a title input and use it as the caption. (Docs, example) We'd just need to style the caption to match current code. Then we could just use the markdown in the content.

• image-with-class: We could either...

  • Replace this with just documentation to wrap a <div class="X/Y/Z"> around the markdown image tag, or
  • Update <image-with-class> to have the className attribute but instead of src and alt it would just wrap around the standard markdown syntax. That would allow it to be used with the caption syntax easily as well.

  <image-with-class className="X">
  ![Alt](/path/to/img.jpg “image title”)
  </image-with-class>

• picture-with-quotes is only used in a few early blogs. Can we somehow use the other styles to replicate it? Maybe an <image-with-class> tag and a markdown caption combined? The look does not have to be exactly what we currently have.

• responsive-image: No real way to replicate this with other tags leave as-is. But are we able to remove the <div> around it without introducing any problems?

[erikscottmeyer]

responsive-image: No real way to replicate this with other tags leave as-is. But are we able to remove the

around it without introducing any problems? Yes, it seems to work fine. Just did that locally.

[erikscottmeyer]

image-with-caption: these changes should be fine

[erikscottmeyer]

image-with-class: I'd say use the second option (pdate to have the className attribute but instead of src and alt it would just wrap around the standard markdown syntax. )

[erikscottmeyer]

picture-with-quotes : we could rig something like this up; obviously it would be easier if we didn't need it to replicate what this does and simplified rendering

[jfrank-nih]

Closing because PCP has moved to the digital platform.