Compatibility with Gatsby 3 & workaround (☂️ Umbrella Issue)

[YannickMol]

Hi Team,

As the new version of gatsby-image is coming up in the form of the gatsby-plugin-image plugin, I was wondering whether this will be reflected in a new version of the gatsby-background-image plugin. When using the new API and gatsbyImageData in a BackgroundImage component, it gives the following error: Warning: Failed prop type: Invalid prop "fluid" supplied to "BackgroundImage"..

Thanks,
Yannick

[timhagn]

Hi Yannick,

wished I were a team, but I'm flying solo on gbi ; ).
Already looked into the new plugin, see #132, but didn't look into its Types.
Will try to rectify this week - or feel free to open a PR : ).

Best,

Tim.

[timhagn]

Hi @YannickMol,

just looked into it & have to say: Uffz. Quite another paradigm of handling images oO.
Trying to implement a converter function for the new gatsbyImageData Type, but couldn't replicate your error...
Would you be able to give me some sources or (even better) a reproduction repo?
Scratch that, the aspectRatio was missing, as the gatsbyImageData Type directly gives width & height instead of it.

Best,

Tim.

[timhagn]

Hi @YannickMol, again.

As written above, I just worked on a converter function. It isn't completely finished & I'm gonna try adding it to gbi in the upcoming week, but should you want to try it, have a look below : ).

import React from 'react'
import { graphql, useStaticQuery } from 'gatsby'
import { GatsbyImage, getImage } from "gatsby-plugin-image"
import BackgroundImage from "gatsby-background-image"

// ------------------ COPY FROM HERE -------------------------------------------
// Helper functions.
const getBgImageType = imageData => imageData.layout === 'fixed' ? 'fixed' : 'fluid'
const getAspectRatio = imageData => imageData.width / imageData.height
const getPlaceholder = imageData => {
  if (imageData.placeholder) {
    return imageData.placeholder.fallback.includes(`base64`) ?
      { base64: imageData.placeholder.fallback }
      : { tracedSvg: imageData.placeholder.fallback }
  }
  return {}
}

/**
 * Tries to Backport the new `gatsbyImageData` type to the classic `fluid` / `fixed` form.
 *
 * @param imageData   {object}    The image data to convert.
 * @returns {{}}
 */
const convertToBgImage = imageData => {
  if (imageData && imageData.layout) {
    const returnBgObject = {}
    const bgType = getBgImageType(imageData)
    const aspectRatio = getAspectRatio(imageData)
    const placeholder = getPlaceholder(imageData)
    returnBgObject[bgType] = {
      ...imageData.images.fallback,
      ...placeholder,
      aspectRatio,
    }
    return returnBgObject
  }
  return {}
}
// ------------------ TO HERE --------------------------------------------------

const GpiTest = () => {
  const {placeholderImage, oldImage} = useStaticQuery(
    graphql`
      query {
        placeholderImage: file(relativePath: { eq: "gatsby-astronaut.png" }) {
          childImageSharp {
            gatsbyImageData(
              width: 200
              placeholder: BLURRED
              formats: [AUTO, WEBP, AVIF]
            )
          }
        }
      }
    `
  )
  const image = getImage(placeholderImage)

  // Use like this:
  const bgImage = convertToBgImage(image)

  return (
    <BackgroundImage
      Tag="section"
      // Spread bgImage into BackgroundImage:
      {...bgImage}
      preserveStackingContext
    >
      <div style={{minHeight: 1000, minWidth: 1000}}>
        <GatsbyImage image={image} alt={"testimage"}/>
      </div>
    </BackgroundImage>
  )
}
export default GpiTest

WebP (& AVIF) handling is currently missing (& for the latter I have to adapt gbi), but at least at my place it worked like the above. Have phun : )!

Best,

Tim.

P.S.: With this function you could use the new type with the "old" GatsbyImage as well, should you want to ; ).

[github-actions]

Hi there!
As @timhagn momentarily is the main contributor to this package, this issue
has been automatically marked as stale because it has not had
any recent activity.
It will be closed if no further activity occurs, though we're open to
suggestions on how to get more maintainers!
Thank you for your contributions : )!

[rburgst]

I have created a simple wrapper that can be used as a 1:1 replacement for <BackgroundImage> until its fully compatible. Note that I only use fluid images. So you might need to tweak a little bit.

// Helper functions.
import BackgroundImage, { IBackgroundImageProps, IFixedObject, IFluidObject } from 'gatsby-background-image'
import { getImage } from 'gatsby-plugin-image'
import { IGatsbyImageData } from 'gatsby-plugin-image/dist/src/components/gatsby-image.browser'
import React, { CSSProperties } from 'react'
import { FunctionComponent } from 'react'

const getBgImageType = (imageData: IGatsbyImageData) => (imageData.layout === 'fixed' ? 'fixed' : 'fluid')
const getAspectRatio = (imageData: IGatsbyImageData) => imageData.width / imageData.height
const getPlaceholder = (imageData: IGatsbyImageData) => {
  if (imageData.placeholder) {
    return imageData.placeholder!.fallback?.includes(`base64`)
      ? { base64: imageData.placeholder!.fallback }
      : { tracedSVG: imageData.placeholder!.fallback }
  }
  return {}
}

/**
 * Tries to Backport the new `gatsbyImageData` type to the classic `fluid` / `fixed` form.
 *
 * @param imageData   {object}    The image data to convert.
 * @returns {{}}
 */
export function convertToBgImage(imageData: IGatsbyImageData): Partial<IBackgroundImageProps> {
  if (imageData && imageData.layout) {
    const returnBgObject: Partial<IBackgroundImageProps> = {}
    const bgType = getBgImageType(imageData)
    const aspectRatio = getAspectRatio(imageData)
    const placeholder = getPlaceholder(imageData)
    // @ts-ignore
    returnBgObject[bgType] = {
      ...imageData.images.fallback,
      ...placeholder,
      aspectRatio,
    }
    return returnBgObject
  }
  return {}
}

export interface IBgImageProps {
  fluid?: IGatsbyImageData
  className?: string
  onClick?: (e: Event) => void
  tabIndex?: number
  fadeIn?: boolean
  id?: string
  style?: CSSProperties
  role?: string
  preserveStackingContext?: boolean
}

/**
 * This is a temporary stopgap solution until `<BackgroundImage>` natively supports `gatsby-plugin-image`,
 * see [https://github.com/timhagn/gatsby-background-image/issues/141](https://github.com/timhagn/gatsby-background-image/issues/141).
 * @param {React.PropsWithChildren<IBgImageProps>} props
 * @return {JSX.Element}
 * @constructor
 */
export const BgImage: FunctionComponent<IBgImageProps> = (props) => {
  const { fluid, children, ...args } = props
  if (fluid) {
    const image = getImage(fluid)
    const bgImage = image && convertToBgImage(image)
    return (
      <BackgroundImage {...bgImage} {...args}>
        {children}
      </BackgroundImage>
    )
  } else {
    return <div>{children}</div>
  }
}

Depending on which other features you need, you might need to add them to IBgImageProps

[joernroeder]

@timhagn @rburgst The getPlaceholder helper needs to return the traced svg as { tracedSVG: 'svg...' } not tracedSvg.

[mwskwong]

Currently, this workaround is very basic. I'm planning to extend this to support webp and art direction as well.

@timhagn @rburgst, I'm trying to also support avif as well. The original fluid object has srcWebp and srcSetWebp fields, I imagine if I specify srcAvif and srcSetAvif, they will be simply ignored?