fix(cloudinary): handle blur modifier correctly (#985)

nuxt · Sep 29, 2023 · a5fe841 · a5fe841
1 parent adbdff3
commit a5fe841
Show file tree

Hide file tree

Showing 2 changed files with 23 additions and 2 deletions.
diff --git a/src/runtime/providers/cloudinary.ts b/src/runtime/providers/cloudinary.ts
@@ -29,7 +29,8 @@ const operationsGenerator = createOperationsGenerator({
     colorSpace: 'cs',
     customFunc: 'fn',
     density: 'dn',
-    aspectRatio: 'ar'
+    aspectRatio: 'ar',
+    blur: 'e_blur'
   },
   valueMap: {
     fit: {
@@ -73,7 +74,7 @@ const operationsGenerator = createOperationsGenerator({
     }
   },
   joinWith: ',',
-  formatter: (key, value) => `${key}_${value}`
+  formatter: (key, value) => key.includes('_') ? `${key}:${value}` : `${key}_${value}`
 })
 
 const defaultModifiers = {

diff --git a/test/unit/providers.test.ts b/test/unit/providers.test.ts
@@ -113,6 +113,26 @@ describe('Providers', () => {
     })
   })
 
+  it('cloudinary blur param', () => {
+    const providerOptions = {
+      baseURL: 'https://res.cloudinary.com/demo/image/fetch/'
+    }
+    // see: https://cloudinary.com/documentation/fetch_remote_images#remote_image_fetch_url
+    const remoteUrl = 'https://upload.wikimedia.org/wikipedia/commons/1/13/Benedict_Cumberbatch_2011.png'
+    const generated = cloudinary.getImage(
+      remoteUrl,
+      {
+        modifiers: {
+          blur: 100
+        },
+        ...providerOptions
+      }, emptyContext
+    )
+    expect(generated).toMatchObject({
+      url: `https://res.cloudinary.com/demo/image/fetch/f_auto,q_auto,e_blur:100/${remoteUrl}`
+    })
+  })
+
   it('cloudinary upload', () => {
     const providerOptions = {
       baseURL: 'https://res.cloudinary.com/demo/image/upload/remote'