[5.x]: Graph QL Image Transformations Not Applying.

[BenYarrow]

What happened?

Description

Previous image transform method is not returning the transformed image data as expected.

Previous GraphQL on Craft CMS version 4.10.6:

thumbnailImage @transform(transform: "c480x480") {
   ... on contentAssets_Asset {
    altText
    height
    url
    width
  }
}

Would return on Craft CMS version 4.10.6:

"thumbnailImage": [
  {
    "altText": "Globe render",
    "height": 480,
    "url": "https://ca1-pnd.edcdn.com/_c480x480/globe-render.png?v=1701685416",
    "width": 480
  }
]. 

Using this query method on Craft CMS version 5.4.2 returns:

"thumbnailImage": [
  {
    "altText": "Landscape 05",
    "height": 1325,
    "url": "https://ca1-fwk.edcdn.com/example-images/landscape-05.jpg?v=1616415716",
    "width": 2000
  }
]

After some time testing different query formats for the transform, the only way i see, to be able to retrieve a transformed url, width and height on Craft CMS version 5.4.2 is with the following qwury:

thumbnailImage {
  altText
  height @transform(transform: "c480x300")
  url @transform(transform: "c480x300")
  width @transform(transform: "c480x300")
}

Steps to reproduce

1. Add an image to an entry.
2. Define an image transform and save:
   
3. Query that image on that entry using graphQL.

Expected behavior

Return a transformed image url, width and height.

Actual behavior

Returning an untransformed image url, width and height.

Craft CMS version

5.4.2

PHP version

8.2.21

Operating system and version

OS version Darwin 22.5.0

Database type and version

MySQL 8.0.33

Image driver and version

Imagick 3.7.0 (ImageMagick 7.1.1-34)

Installed plugins and versions

Amazon S3 | 2.2.1
Asset Rev | 8.0.0
Cache Manager | 3.1.0
CKEditor | 4.2.0
Elements Panel | 3.0.0
Embedded Assets | 5.1.2
Expanded Singles | 3.0.0
Formie | 3.0.6
Image Resizer | 4.0.1
Maps | 5.0.2
Minify | 5.0.0
Navigation | 3.0.4
Phone Number | 3.0.0-beta.2
Rollbar | 5.0.0
SEO | 5.1.3
Style Inliner | 4.1.1
Table Maker | 5.0.2

[i-just]

Hi, thanks for getting in touch!

I can’t reproduce this behaviour. When I run the query you attached, the image gets transformed as expected.

I assume you tried clearing GQL caches? Could you also try running this query with the safeMode enabled and let me know if that changes anything?

[BenYarrow]

Hi,

Thanks for getting back to me!

I've cleared the caches and enabled safe mode, however i'm still not recieving the transformed image for some reason.

Not sure what else to try!

Appreciate any further help.

Thanks!

[i-just]

Thanks for confirming and for the additional screenshot!
What value is the Base URL for the Filesystem used by the “landscape-05.jpg” image?
Also, do you see a thumbnail of this image when you edit the entry from the screenshot in the control panel?

[BenYarrow]

No problem at all!

The Base URL is set to "https://ca1-fwk.edcdn.com/", and the image is visible on the entry, but only when safe mode is not in use.

Hope this helps.

Thanks!

[i-just]

Thanks again!

the image is visible on the entry, but only when safe mode is not in use

yes, that would make sense since you’re using the AWS S3 plugin (and safe mode disables all plugins and modules)

Any chance you could send your composer.json, composer.lock and database export to [email protected] so we can try to reproduce and dig deeper?

[AmarHuda1]

Hi @BenYarrow, @i-just,

Any updates on this issue?

I just want to confirm something about your thumbnailImage field handle. Is this the original field handle or a renamed one that you changed in the field layout?

I’ve encountered a similar issue with fields where I changed the handle in the field layout. For fields that still use their original handle, the image transform works as expected.

[EnovateBen]

Hi @AmarHuda1,

This is interesting, i hadn't thought of this.

Yes, our thumbnailImage field is renamed from an original and reusable asset field. I've just ran a test and can confirm that i'm experiencing the same behaviour. The original field (in my case 'singleImage') returns the transformed image as expected, however the renamed field ('thumbnailImage') does not.