How to implement responsive images for Airwaves

trevormunoz commented 3 years ago

Opening this as an issue to discuss before starting in on a branch …

The Airwaves site incorporates a variety of images. This discussion is about images for exhibits (and not, for example, page images of documents—which are a very different kettle of fish). These images are uploaded via the static CMS interface by exhibit authors so the dimensions and sizes of images can vary a lot. (They end up in /static/images.)

So, on page load, the full size image is downloaded no matter what size the image will have in the final rendered page. See screenshot for the difference in a desktop page—it's more stark for mobile.

It would be great to be able to serve up responsive images that reduce the amount of data loaded to pages and get various other performance features.

The first idea for achieving this functionality would be to use the new Gatsby Image plugin, which we don't use yet on Airwaves.

However, after dipping into the docs, I'm not fully clear on how to proceed because the way we get the image data seems to be different from what Gatsby Image expects.

The query that fetches exhibit data can be seen here: https://github.com/umd-mith/airwaves/blob/01a55f13fc14dd5b0d6cf9cfbaf453bdf750e860/src/components/featured-exhibits-provider.js#L6-L20

Basically, we end up passing relative paths through the frontmatter of the exhibits (which live as markdown), e.g.

        {
          "fileAbsolutePath": "/Users/umd-laptop/Code/airwaves/src/pages/exhibits/poetry-programming-in-the-naeb-collection.md",
          "frontmatter": {
            "visuals": [
              {
                "image": "/images/apf1-07630r.jpg",
                "title": "Alan Simpson, host of *What is Modern Poetry* and Professor of History at the University of Chicago, in 1958. Image courtesy of the University of Chicago Photographic Archive, [[apf1-07630](http://photoarchive.lib.uchicago.edu/db.xqy?one=apf1-07630.xml)], Special Collections Research Center, University of Chicago Library."
              },
              {
                "image": "/images/tuckerman-wikimedia.jpg",
                "title": "The only known surviving image of the poet Frederick Goddard Tuckerman. An engraving, reprinted in Eugene England's 1991 critical biography of Tuckerman entitled Beyond Romanticism (Unknown author, Public domain, [via Wikimedia Commons](https://upload.wikimedia.org/wikipedia/commons/3/31/Engraving_of_Frederick_Goddard_Tuckerman_from_Eugene_Englands_1991_Beyond_Romanticism.jpg))"
              },
              {
                "image": "/images/naeb-b057-f09_0042.jpg",
                "title": "Excerpt from a Rockefeller Foundation proposal for a six-month experiment in broadcasting poetry. Available at [Unlocking the Airwaves](https://mith.umd.edu/airwaves/document/naeb-b057-f09/#42)."
              },
              {
                "image": "/images/poetry-out-loud-competition.jpg",
                "title": "Photo of Florida Champion Zhaedyn Hodge Sigars performing at Poetry Out Loud, Howard W. Blake HS © James Kegley ([from the Poetry Out Loud Photo Gallery](https://www.poetryoutloud.org/about-poetry-out-loud/photo-galleries/))."
              }
            ],
            "title": " Poetry Programming in the NAEB Collection",
            "lede": null
          }
        }

So, I am not sure how to modify the query as the Gatsby Image docs suggest here: https://www.gatsbyjs.com/docs/how-to/images-and-media/using-gatsby-plugin-image/#dynamic-images

Given the way we're handling exhibit images, will we be able to use Gatsby Image to get responsive image behavior for these?

Or, do we need to do something to generate the sets of images we need as a separate pre-processing step?

Thanks for your input @edsu @raffazizzi

edsu commented 3 years ago

I haven't used gatsby-plugin-image before and have mostly avoided Gatsby's image processing because cutting images to particular sizes and styling with CSS has seemed easier. But I can read the documentation and see if I can make some progress on this.

raffazizzi commented 3 years ago

I think you may need to add gatsby-transformer-sharp and gatsby-plugin-sharp to get responsive images, whether you're going to use gatsby-image (for v2) or gatsby-plugin-image (v3).

If those path to the images form the front matter are resolving to the same path loaded by gatsby-source-filesystem, gatsby-transformer-remark should connect the file object (which will contains imageSharp data) to the frontmatter field.

You can see an example in the Scholarly Editing repository.

Markdown file with relative path to an image in the frontmatter:

side: 
- title: "2021 Call for Contributions"
img: "../images/cfp-vt.jpg"

The site's gatsby-config loads sharp plugins and source images from the filesystem

The result from this query on markdown will include data fro the image cfp-vt.jpg

query MyQuery {
allMarkdownRemark {
nodes {
  frontmatter {
    side {
      img {
        childrenImageSharp {
          gatsbyImageData
        }
      }
    }
  }
}
}
}

{
  "data": {
    "allMarkdownRemark": {
      "nodes": [
        {
          "frontmatter": {
            "side": null
          }
        },
        {
          "frontmatter": {
            "side": null
          }
        },
        {
          "frontmatter": {
            "side": [
              {
                "img": {
                  "childrenImageSharp": [
                    {
                      "gatsbyImageData": {
                        "layout": "constrained",
                        "backgroundColor": "#a8a898",
                        "images": {
                          "fallback": {
                            "src": "/static/a31d4d24055d6bf9e23dc87c3c28b937/0fdf4/cfp-vt.jpg",
                            "srcSet": "/static/a31d4d24055d6bf9e23dc87c3c28b937/91a6d/cfp-vt.jpg 75w,\n/static/a31d4d24055d6bf9e23dc87c3c28b937/96deb/cfp-vt.jpg 150w,\n/static/a31d4d24055d6bf9e23dc87c3c28b937/0fdf4/cfp-vt.jpg 300w",
                            "sizes": "(min-width: 300px) 300px, 100vw"
                          },
                          "sources": [
                            {
                              "srcSet": "/static/a31d4d24055d6bf9e23dc87c3c28b937/18188/cfp-vt.webp 75w,\n/static/a31d4d24055d6bf9e23dc87c3c28b937/c65bc/cfp-vt.webp 150w,\n/static/a31d4d24055d6bf9e23dc87c3c28b937/078c3/cfp-vt.webp 300w",
                              "type": "image/webp",
                              "sizes": "(min-width: 300px) 300px, 100vw"
                            }
                          ]
                        },
                        "width": 300,
                        "height": 300
                      }
                    }
                  ]
                }
              }
            ]
          }
        }
      ]
    }
  },
  "extensions": {}
}

trevormunoz commented 3 years ago

Thanks @raffazizzi. I think this:

If those path to the images form the front matter are resolving to the same path loaded by gatsby-source-filesystem, gatsby-transformer-remark should connect the file object (which will contains imageSharp data) to the frontmatter field.

was the dot that didn't connect for me when I was looking into this before.

The "Getting Started" docs for the new image plugin do include both gatsby-plugin-sharp and gatsby-transformer-sharp so we should be good if we go that way.

edsu commented 3 years ago

I guess all I needed to do was take this issue?

raffazizzi commented 3 years ago

@edsu your answer did bring this to my gmail inbox lol

trevormunoz commented 3 years ago

I'm still not able to get the childrenImageSharp component in my query and I'm wondering if it might be related to how the paths in the frontmatter relate to where the images live?

The exhibit files live in /src/pages/exhibits/ the images get referenced in the frontmatter as e.g., /images/naeb-b057-f09_0042.jpg and that file actually lives at /static/images and it gets consumed in the component like so: https://github.com/umd-mith/airwaves/blob/main/src/components/exhibit-summary.js#L14

raffazizzi commented 3 years ago

I think the path in the frontmatter needs to either be relative from the md file location, so from /src/pages/exhibits/ you'd need ../../../static/images/naeb-b057-f09_0042.jpg. Maybe an "absolute" path may work too, have you tried /static/images/naeb-b057-f09_0042.jpg?

trevormunoz commented 3 years ago

Turns out it's the quoting of the string that makes a difference. ~Can be either relative or "absolute" at that point.~ (Update: the paths need to be relative)

We had image: /images/howsfamily.png Needed to have image: "/static/images/howsfamily.png"

trevormunoz commented 3 years ago

Closed by #12

umd-mith / airwaves

How to implement responsive images for Airwaves #10