• action https://github.com/marketplace/actions/bundlewatch-github-action
• app https://service.bundlewatch.io/setup-github

As per:
https://github.com/mayashavin/cloudinary-api/blob/main/packages/url/lib/url.ts#L98

The desired output for the following snippet should be
https://cdn-images.dum.dum/dummy-dum/image/upload/c_scale,w_500,h_500,q_eco,f_auto//image/vm/aedcb538-777e-4564-b422-30eb8dc220d2.png

setConfig({
  cloudName: 'dummy-dum',
  secureDistribution: 'cdn-images.dum.dum'
});

const url = buildUrl('/image/vm/aedcb538-777e-4564-b422-30eb8dc220d2.png', {
  cloud: {
    cloudName: 'dummy-dum',
  },
  transformations: {
    resize: {
      type: 'scale',
      width: 500,
      height: 500,
    },
    quality: "eco"
  }
})

Although, what I am receiving is
https://cdn-images.dum.dum/dummy-dum/image/upload/c_scale,w_500,h_500,q_eco,f_auto//image/vm/aedcb538-777e-4564-b422-30eb8dc220d2.
Notice the .png is removed.

Tried clearing dependency a few times. Has this change been published?

For some reason, lodash's snakeCase is huge. The change-case library export individual modules, including snake-case, and is very tree-shakable if you want to use the whole package for IO transforms.

Anyway, thanks for the awesome project!

the deps are the culprit

here are som links.
@cld-apis/types

cloudinary-build-url

@cld-apis/utils

vue-cli-plugin-cloudinary-api

A few values here were not according to the docs and caused errors when using them.
https://cloudinary.com/documentation/transformation_reference#c_crop_resize

Reproduction showing all problematic resize types: https://codesandbox.io/s/blazing-worker-rdm60?file=/src/index.ts

I opened #30 to fix the types

Hi @mayashavin

I am trying to add a custom color. On the url it would look like this: co_rgb:2A3E51. Using the Java SDK or other SDKs, it would understand that it's not a normal color and add the "_rgb" for me.

How do I do this with your plugin?

Thank you :-)

How can I get the URL for the images stored inside the folder?

This package is working for the images directly stored in Cloudinary, but it not working for those images which are stored in a folder. And this is obvious because I have given cloud name and image name only, but I am curious where can I enter my folder name?

import { buildUrl } from 'cloudinary-build-url'

  const blurURL2 = buildUrl('imageName', {
    cloud: {
      cloudName: 'cloudName'
    },
    transformations: {
      effect: 'blur:1000',
      quality: 1
    }
  })

Value thumbnail should be thumb.

https://cloudinary.com/documentation/image_transformations#thumb

Hi-

A usage of buildUrl such as:

const cloudinaryUrl = buildUrl('u/3dqed6rTAouJ1Gw3ojECe', {
    cloud: { cloudName:'uwhealth', },
});

Returns

https://res.cloudinary.com/uwhealth/image/upload/q_auto,f_auto/f_auto%2Cq_auto/v1/u/3dqed6rTAouJ1Gw3ojECe

Whereby an encoded f_auto%2Cq_auto is generated but seemingly is duplicated; if so, would be unnecessary.

Using this library in an Angular app results in the following errors:

Error: node_modules/cloudinary-build-url/dist/cjs/url.d.ts:1:104 - error TS2307: Cannot find module '@cld-apis/types' or its corresponding type declarations.
    
    1 import type { CloudConfig, TransformerOption, TransformerVideoOption, ResourceType, StorageType } from '@cld-apis/types';
                                                                                                             ~~~~~~~~~~~~~~~~~
    node_modules/cloudinary-build-url/dist/cjs/transformers/index.d.ts:1:37 - error TS2307: Cannot find module '@cld-apis/types' or its corresponding type declarations.
    
    1 import type { Transformation } from '@cld-apis/types';
                                          ~~~~~~~~~~~~~~~~~
    node_modules/cloudinary-build-url/dist/cjs/index.d.ts:1:46 - error TS2307: Cannot find module '@cld-apis/types' or its corresponding type declarations.
    
    1 import type { CldOptions, CloudConfig } from '@cld-apis/types';
                                                   ~~~~~~~~~~~~~~~~~
    node_modules/cloudinary-build-url/dist/cjs/index.d.ts:11:27 - error TS2307: Cannot find module '@cld-apis/types' or its corresponding type declarations.
    
    11     resourceType?: import("@cld-apis/types").ResourceType;
                                 ~~~~~~~~~~~~~~~~~
    node_modules/cloudinary-build-url/dist/cjs/index.d.ts:14:26 - error TS2307: Cannot find module '@cld-apis/types' or its corresponding type declarations.
    
    14     storageType?: import("@cld-apis/types").StorageType;
           

Move the video transformations to the video directory and implement them if needed.

For example:
Cloudinary url: https://res.cloudinary.com/demo/image/fetch/v1605729699/https://images.prismic.io/important-sm-images/0c1acf72-dbfa-442a-8a64-ab8c84d41263_jZ4rJ0yLyrs.jpg%3Fw%3D120%26h%3D120

Expected: https://images.prismic.io/important-sm-images/0c1acf72-dbfa-442a-8a64-ab8c84d41263_jZ4rJ0yLyrs.jpg%3Fw%3D120%26h%3D120
Actual: https://images

Hello,

I noticed a weird behaviour when using the extractPublicId function, let's say we upload a file named TestÀ.png, we would get an url like this, with the special character encoded:

https://res.cloudinary.com/XXXXXX/image/upload/photos/TestA%C3%8C_XXXXX.png

Now if I check the public id in cloudinary I have photos/TestAÌ_XXXXX while with the extractPublicId function I get photos/TestA%C3%8C_XXXXX, so it's still encoded and different from the correct one.

This is not a big deal since I can decode the public ID pretty easily after I get it, but I was asking myself if it makes sense to include the decoding directly into the extract function, or if there is any downside on doing that.

Public IDs containing multiple dots before the extension are getting truncated. For example, in 0.2.4 https://res.cloudinary.com/xyz/image/upload/v111111111/Folder/Name.With.Multiple.Dots.png is extracted as Folder/Name instead of Folder/Name.With.Multiple.Dots.

It looks like it's an issue with the extractPublicId regex assuming everything after the first . is the extension.

Related to #22 I think

Hi it would be great to release a new version containing the fix to the issue #22 , I would love to help if needed.

I can't see any reference to this in the documentation. Is it possible to use the e_loop param with this package, or is there a way to include custom sections of URL?

Hi @mayashavin

Great library! Well done. Made my day as it's currently the only way of passing dynamic variables. cl-image doesn't support that yet.

I am trying to compile my Angular library that uses the buildImageUrl. It's failing during compilation:

✖ Compiling TypeScript sources through NGC
ERROR: node_modules/@cld-apis/types/lib/index.d.ts:38:23 - error TS2307: Cannot find module './asset/Asset' or its corresponding type declarations.

38 export { Asset } from './asset/Asset'
                         ~~~~~~~~~~~~~~~

An unhandled exception occurred: node_modules/@cld-apis/types/lib/index.d.ts:38:23 - error TS2307: Cannot find module './asset/Asset' or its corresponding type declarations.

38 export { Asset } from './asset/Asset'
                         ~~~~~~~~~~~~~~~

By looking in index.d.ts you can see that there is no asset directory nor an Asset class.

https://cloudinary.com/documentation/user_defined_variables

https://cloudinary.com/documentation/conditional_transformations

expression only accepts array, thus https://cloudinary-build-url.netlify.app/transformations/basic#condition needs a slight tweak:

import { buildImageUrl } from "cloudinary-build-url";

const url = buildImageUrl("example", {
  cloud: {
    cloudName: "demo",
  },
  transformations: {
    condition: {
      if: {
        expression: [{
          characteristic: "width",
          operator: "greaterThan",
          value: 300
        }],
        transformations: [{
          effect: {
            name: "e_oil_paint",
          }
        }]
      }
    },
  },
});

Noted some odd bug with an image ID containing a dot (i.e., "."):

Sample image URL:

https://res.cloudinary.com/adacmkv/image/upload/f_auto,q_auto/v1608641937/ADAC%20Klassik/2021/Events/AEC/RS134993_RS129423_8.1_v7gpvg.jpg

Sample transformation:

buildUrl(encodePublicId, {
  transformations: {
    format: "auto",
    quality: "auto",
    resize: {
      width: 1024,
      height: 600,
      type: "fill",
    },
  },
});

Observed

• The image url created is invalid (part ".1_v7gpvg" is replaced with "q_auto"

Is there a way with cloudinary-api to return a custom filename when downloading the file?

With url params, there seems to be fl_attachment:custom-name something like: https://res.cloudinary.com/[cloud_name]/video/upload/fl_attachment:[new_filename]/[public_id].mp4

I'm wondering if this helper library supports this?

Input:

• originalSize {width, height} : Size
• publicId : string
• transformations : TransformationOption

Output

• src
• srcSets : string[]