Skip to content

[5.x]: GraphQL product image format WebP not working #15572

@MatthiasBrodelet

Description

@MatthiasBrodelet

What happened?

Description

I'm not 100% if this issue should be posted here or in the CMS repository. Feel free to move it.

I am trying to fetch the product images with GraphQL using an image transform where I need each image in the original format and the WebP format.
Since I have 2 product types I guess I need to define this twice.

{
  products {
    id
    title
    slug
    url
    defaultPriceAsCurrency
    ... on coinsAndGoldBars_Product {
      images {
        url: url @transform (transform: "productThumbnail")
        webpUrl: url @transform (transform: "productThumbnail", format: "webp")
      }
    }
    ... on otherProducts_Product {
      images {
        url: url @transform (transform: "productThumbnail")
        webpUrl: url @transform (transform: "productThumbnail", format: "webp")
      }
    }
    variants {
      id
      title
      sku
      price
      stock
    }
  }
}

The query does not fail and the transform works but the WebP format is not working.
It just gives the same URL as the normal non WebP URL.

It also seems to return a slightly different path than when I do this with twig.

GraphQL image URL => https://the-house.lndo.site/uploads/products/_productThumbnail/1_4oz-Krugerrand2-Medium.png
Twig image URL => https://the-house.lndo.site/uploads/products/_400x400_fit_center-center_none/1_4oz-Krugerrand2-Medium.png

The working Twig WebP transform also seems to add a product ID in the URL.

Steps to reproduce

  1. Use the query above

Expected behavior

It should return the path to the WebP version of this image.

Actual behavior

It just returns the original image format.

Craft CMS version

5.3.4

Craft Commerce version

5.0.16.2

PHP version

8.2

Operating system and version

No response

Database type and version

No response

Image driver and version

No response

Installed plugins and versions

Metadata

Metadata

Assignees

Type

No type

Projects

No projects

Milestone

No milestone

Relationships

None yet

Development

No branches or pull requests

Issue actions