No difference between returned product images (image, small_image, thumbnail)

[deurzen]

Querying a store's products through GraphQL on Magento 2.4, with the latest version of the extension installed (1.18.0), the image URLs returned (image, small_image, thumbnail) are all the same. For example, the following query:

{
  products(filter: {}) {
    items {
      name
      cld_data {
        image
        small_image
        thumbnail
      }
    }
  }
}

Yields the following result:

{
  "data": {
    "products": {
      "items": [
        {
          "name": "<PRODUCT_NAME>",
          "cld_data": {
            "image": "https://res-5.cloudinary.com/<HANDLE>/c_crop,dpr_2.0,g_center,q_auto/v1/<PATH>/<IMAGE>.jpg?_i=AB",
            "small_image": "https://res-5.cloudinary.com/<HANDLE>/c_crop,dpr_2.0,g_center,q_auto/v1/<PATH>/<IMAGE>.jpg?_i=AB",
            "thumbnail": "https://res-5.cloudinary.com/<HANDLE>/c_crop,dpr_2.0,g_center,q_auto/v1/<PATH>/<IMAGE>.jpg?_i=AB"
          }
        }
      ]
    }
  }
}

Is this expected behavior? These queries are made while building a static website using NextJS. The images returned are consequently at their original, unoptimized size of ~8MP. I have a custom thumbnail transformation set up on the Cloudinary side, but there's no way to pass them on through the plugin's configuration in Magento. The only option is to apply a transformation to all product images. What would the recommended workflow be when using Magento only as a headless backend? Thanks.

[wissam-khalili]

Hi @deurzen,

Thank you for the information.

I will review the issue internally and keep you posted.

Regards, Wissam

[atdcloud]

Hi @deurzen,

You may apply an individual transformation(s) to a product catalog in Magento. In Magento Admin, navigate to Catalog > Products. On this Products page, each product should be listed and an option to 'Edit' under Action column. Clicking on 'Edit' should take you to the Product Edit page. Collapse the Cloudinary Section, here is an option to enter Cloudinary transformation in the transformation field. Enter your intended transformation. Note: when using a named transformation prepend the named transformation with a t_<named_transformation> (e.g. t_media_lib_thumb). Let me know if this is what you're looking for.

Regards, Anthony

[deurzen]

Hello Wissam @wissam-khalili and Anthony @atdcloud,

Thank you both for having a look at the issue!

@atdcloud Thanks, that does seem to be a way to do it. The workflow currently would thus entail (1) adding the intended base image a second time (as the first base image should not undergo the thumbnail transformation), (2) labeling it Thumbnail, and then (3) applying a custom transformation to it manually, for each product. Perhaps a nice feature might be the ability to configure 'image', 'small', and 'thumbnail' (and even 'gallery'?) image transformations at a global level. That is, each image type would be given their respective globally-configured transformation automatically, without needing to add it manually for each product.

A few issues seem to be present in this workflow, however:

• Because the base image needs to be duplicated such as to be able to reproduce it as a thumbnail with a custom thumbnail transformation, that duplicated image needs to be tagged 'Hidden' within [Product] > Images and Videos. If it isn't, it appears twice within the gallery. However, when subsequently querying that product through GraphQL, the hidden image pops up as null under cld_data: { thumbnail }.
• Image-specific transformations passed in through [Product] > Cloudinary, as you suggested, @atdcloud, currently are not consolidating. Whereas clicking the Preview button shows the correctly transformed image, saving the product, clearing the caches, and querying it through GraphQL simply returns the URL without the transformation added.

Kind regards, Max

[wissam-khalili]

Hi @deurzen,

Thank you for the additional information.

I am reviewing this issue internally and will keep you posted.

Thanks, Wissam

[deurzen]

@wissam-khalili, that's much appreciated, thank you!

[atdcloud]

Hi @deurzen, can you please send us which GraphQL plug-in (preferably the Packagist link) is installed in your Magento environment?

[deurzen]

Hello @atdcloud,

Inspecting my project's composer.lock file, my Magento 2.4.4 instance (magento/product-community-edition 2.4.4) requires webonyx/graphql-php ~14.11.3. The actual version installed for webonyx/graphql-php (from that same composer.lock file) is currently version 14.11.6 https://packagist.org/packages/webonyx/graphql-php#v14.11.6 (i.e. the last non-dev version at the time of this writing). I'm on version 1.18.0 of cloudinary/cloudinary-magento2.

Thanks, Max

[atdcloud]

Hi @deurzen,

I have yet to mimic your environment but can you query your REST API with the following endpoint (cloudinary/products/:sku/media)? Let me know what is the response. It should be in the following format:

{
    "data": {
        "image": "<cloudinary url>",
        "small_image": "<cloudinary url>",
        "thumbnail": "<cloudinary url>",
        "media_gallery": [
            "<cloudinary url>"
        ]
    }
}

[deurzen]

Hello @atdcloud,

I checked the response on the REST endpoint, as you suggested, and it returned the exact same results as the ones I got from GraphQL: image, small_image, and thumbnail are all equal. Also, any custom transformations passed in through Product > Cloudinary are not propagating (i.e. not showing up as part of the returned URL).

[atdcloud]

Hi @deurzen, After some digging into the source code, querying to get the custom transformation in graphql is not currently implemented on our plug-in. It is currently not defined in the schema graphqls. Sorry for any inconvenience.

[deurzen]

In case anyone else stumbles across this issue looking for access to cloudinary through Magento's GraphQL API, I've solved it as follows:

1. Install the cloudinary_magento2 module;
2. upload product images through Magento using the cloudinary module;
3. query the desired products' image: { label } and media_gallery: { label } fields, which will yield each of the images' public IDs; and
4. construct the desired cloudinary URL client-side on the fly by using the cloudinary-build-url.

For instance:

// assuming `products` contains the resolved result of the query

products.forEach(product => {
  product.image.url = buildImageUrl(product.image.label, {
    cloud: {
      cloudName: process.env.CLOUDINARY_CLOUD_NAME,
    },
    transformations: {
      format: 'auto',
      transformation: 'thumbnail', // any custom transformations you may have
      quality: null,
    },
  });
});

[momoip]

Hi @deurzen, Thank you for sharing your solution.