search

octue / planex-site

The octue website front end
https://planex-site.vercel.app
0 stars 0 forks source link

Querying multiple images with gatsby-image #25

Closed AndyClifton closed 3 years ago

AndyClifton commented 3 years ago

PR #24 provides a framework for using gatsby-image in the components in planex-site.

Problem

However, this is a brute-force solution; each image is named and referenced individually, e.g.,

query {
      defaultPanel: file(
        relativePath: { eq: "stock/people-in-classy-office.jpeg" }
      ) {
        childImageSharp {
          fluid(quality: 90, maxWidth: 1920) {
            ...GatsbyImageSharpFluid_withWebp
          }
        }
      }
      topLeftPanel: file(
        relativePath: { eq: "stock/people-in-classy-office.jpeg" }
      ) {
        childImageSharp {
          fluid(quality: 90, maxWidth: 1920) {
            ...GatsbyImageSharpFluid_withWebp
          }
        }
      }
...

Affects

This can be found in the following files...

Solution

A potential solution is outlined in this stackoverflow question

thclark commented 3 years ago

We're now using a later version of gatsby image, plus we've discovered that page queries, rather than static queries, are less limited so we can query for a lot at once; so will close this down as 'didn't solve but moved past'