fix(cloudinary): fit types, auto format & quality (nuxt#76)

procrates · Nov 13, 2020 · f24d66d · f24d66d
1 parent a4d9ef1
commit f24d66d
Show file tree

Hide file tree

Showing 3 changed files with 29 additions and 11 deletions.
diff --git a/src/providers/cloudinary/runtime.ts b/src/providers/cloudinary/runtime.ts
@@ -6,27 +6,45 @@ const operationsGenerator = createOperationsGenerator({
     fit: 'c',
     width: 'w',
     height: 'h',
-    format: 'f'
+    format: 'f',
+    quality: 'q'
   },
   valueMap: {
     fit: {
       fill: 'fill',
       inside: 'pad',
       outside: 'lpad',
       cover: 'fit',
-      contain: 'scale'
+      contain: 'scale',
+      minCover: 'mfit',
+      minInside: 'mpad',
+      thumbnail: 'thumb',
+      cropping: 'crop',
+      coverLimit: 'limit'
     }
   },
   joinWith: ',',
   formatter: (key, value) => `${key}_${value}`
 })
 
+const defaultModifiers = {
+  format: 'auto',
+  quality: 'auto'
+}
+
 export default <RuntimeProvider> {
   getImage (src: string, modifiers: ImageModifiers, options: any) {
-    const operations = operationsGenerator(modifiers)
+    const mergeModifiers = {
+      ...modifiers,
+      format: modifiers.format || defaultModifiers.format,
+      quality: modifiers.quality || defaultModifiers.quality
+    }
+
+    const srcWithoutExtension = src.replace(/\.[^/.]+$/, '')
+    const operations = operationsGenerator(mergeModifiers as ImageModifiers)
 
     return {
-      url: cleanDoubleSlashes(options.baseURL + '/' + operations + src)
+      url: cleanDoubleSlashes(options.baseURL + '/' + operations + srcWithoutExtension)
     }
   }
 }
diff --git a/test/unit/plugin.test.ts b/test/unit/plugin.test.ts
@@ -50,7 +50,7 @@ describe('Plugin', () => {
 
   test('Generate Circle Image with Cloudinary', () => {
     const image = nuxtContext.$img('cloudinary+circle:/test.png', {})
-    expect(image.url).toEqual('https://res.cloudinary.com/nuxt/image/upload/r_100/test.png')
+    expect(image.url).toEqual('https://res.cloudinary.com/nuxt/image/upload/r_100,f_auto,q_auto/test')
   })
 
   test('Deny undefined provider', () => {

diff --git a/test/unit/providers.test.ts b/test/unit/providers.test.ts
@@ -9,47 +9,47 @@ const images = [
   {
     args: ['/test.png', {}],
     local: { isStatic: true, url: '/_image/ipx/local/_/_/test.png' },
-    cloudinary: { url: '/test.png' },
+    cloudinary: { url: '/f_auto,q_auto/test' },
     twicpics: { url: '/test.png?twic=v1/' },
     fastly: { url: '/test.png?' },
     imgix: { url: '/test.png?' }
   },
   {
     args: ['/test.png', { width: 200 }],
     local: { isStatic: true, url: '/_image/ipx/local/_/w_200/test.png' },
-    cloudinary: { url: '/w_200/test.png' },
+    cloudinary: { url: '/w_200,f_auto,q_auto/test' },
     twicpics: { url: '/test.png?twic=v1/cover=200x-' },
     fastly: { url: '/test.png?width=200' },
     imgix: { url: '/test.png?w=200' }
   },
   {
     args: ['/test.png', { height: 200 }],
     local: { isStatic: true, url: '/_image/ipx/local/_/h_200/test.png' },
-    cloudinary: { url: '/h_200/test.png' },
+    cloudinary: { url: '/h_200,f_auto,q_auto/test' },
     twicpics: { url: '/test.png?twic=v1/cover=-x200' },
     fastly: { url: '/test.png?height=200' },
     imgix: { url: '/test.png?h=200' }
   },
   {
     args: ['/test.png', { width: 200, height: 200 }],
     local: { isStatic: true, url: '/_image/ipx/local/_/s_200_200/test.png' },
-    cloudinary: { url: '/w_200,h_200/test.png' },
+    cloudinary: { url: '/w_200,h_200,f_auto,q_auto/test' },
     twicpics: { url: '/test.png?twic=v1/cover=200x200' },
     fastly: { url: '/test.png?width=200&height=200' },
     imgix: { url: '/test.png?w=200&h=200' }
   },
   {
     args: ['/test.png', { width: 200, height: 200, fit: 'contain' }],
     local: { isStatic: true, url: '/_image/ipx/local/_/s_200_200_contain/test.png' },
-    cloudinary: { url: '/w_200,h_200,c_scale/test.png' },
+    cloudinary: { url: '/w_200,h_200,c_scale,f_auto,q_auto/test' },
     twicpics: { url: '/test.png?twic=v1/contain=200x200' },
     fastly: { url: '/test.png?width=200&height=200&fit=bounds' },
     imgix: { url: '/test.png?w=200&h=200&fit=fill' }
   },
   {
     args: ['/test.png', { width: 200, height: 200, fit: 'contain', format: 'jpeg' }],
     local: { isStatic: true, url: '/_image/ipx/local/jpeg/s_200_200_contain/test.png' },
-    cloudinary: { url: '/w_200,h_200,c_scale,f_jpeg/test.png' },
+    cloudinary: { url: '/w_200,h_200,c_scale,f_jpeg,q_auto/test' },
     twicpics: { url: '/test.png?twic=v1/format=jpeg/contain=200x200' },
     fastly: { url: '/test.png?width=200&height=200&fit=bounds&format=jpeg' },
     imgix: { url: '/test.png?w=200&h=200&fit=fill&fm=jpeg' }