From 7436391bc6a76a00469662ee4657c6045bedc8ba Mon Sep 17 00:00:00 2001
From: curben <2809763-curben@users.noreply.gitlab.com>
Date: Sun, 25 Aug 2019 17:15:44 +0930
Subject: [PATCH] fix(cloudinary): include more sizes

---
 scripts/cloudinary.js | 58 +++++++++++++++++++++++++++++--------------
 1 file changed, 39 insertions(+), 19 deletions(-)

diff --git a/scripts/cloudinary.js b/scripts/cloudinary.js
index 771949c..63fc389 100644
--- a/scripts/cloudinary.js
+++ b/scripts/cloudinary.js
@@ -11,11 +11,13 @@
 *  https://hexo.io/api/tag
 *  https://cloudinary.com/documentation/responsive_images
 */
+
 hexo.extend.tag.register('cloudinary', (args) => {
   const fileName = args[0]
   const alt = args[1] || ''
   let modern = ''
   let legacy = ''
+  const cloudinary = 'https://res.cloudinary.com/curben/image/upload/w_auto,f_auto,q_auto,c_scale/c_limit,'
 
   if (fileName.endsWith('.png')) {
     modern = fileName.replace(/\.png$/, '.webp')
@@ -29,33 +31,51 @@ hexo.extend.tag.register('cloudinary', (args) => {
     return `<a href="https://res.cloudinary.com/curben/${fileName}">
       <picture>
       <source type="image/webp"
-      srcset="https://res.cloudinary.com/curben/image/upload/w_auto,f_auto,q_auto,c_scale/c_limit,w_300,h_400/${modern} 300w,
-        https://res.cloudinary.com/curben/image/upload/w_auto,f_auto,q_auto,c_scale/c_limit,w_450,h_400/${modern} 450w,
-        https://res.cloudinary.com/curben/image/upload/w_auto,f_auto,q_auto,c_scale/c_limit,w_600,h_400/${modern} 600w"
-      sizes="(max-width: 300px) 280px,
-            (max-width: 450px) 430px,
-            600px"
-      src="https://res.cloudinary.com/curben/image/upload/w_auto,f_auto,q_auto,c_scale/c_limit,w_600,h_400/${legacy}">
-      <img srcset="https://res.cloudinary.com/curben/image/upload/w_auto,f_auto,q_auto,c_scale/c_limit,w_300,h_400/${legacy} 300w,
-        https://res.cloudinary.com/curben/image/upload/w_auto,f_auto,q_auto,c_scale/c_limit,w_450,h_400/${legacy} 450w,
-        https://res.cloudinary.com/curben/image/upload/w_auto,f_auto,q_auto,c_scale/c_limit,w_600,h_400/${legacy} 600w"
+        srcset="${cloudinary}w_300/${modern} 300w,
+              ${cloudinary}w_450/${modern} 450w,
+              ${cloudinary}w_600/${modern} 600w,
+              ${cloudinary}w_900/${modern} 900w,
+              ${cloudinary}w_1200/${modern} 1200w,
+              ${cloudinary}w_1500/${modern} 1500w"
         sizes="(max-width: 300px) 280px,
               (max-width: 450px) 430px,
-              600px"
-        src="https://res.cloudinary.com/curben/image/upload/w_auto,f_auto,q_auto,c_scale/c_limit,w_600,h_400/${legacy}"
+              (max-width: 600px) 580px,
+              (max-width: 900px) 880px,
+              (max-width: 1200px) 1180px,
+              1500px">
+      <img
+        srcset="${cloudinary}w_300/${legacy} 300w,
+              ${cloudinary}w_450/${legacy} 450w,
+              ${cloudinary}w_600/${legacy} 600w,
+              ${cloudinary}w_900/${legacy} 900w,
+              ${cloudinary}w_1200/${legacy} 1200w,
+              ${cloudinary}w_1500/${legacy} 1500w"
+        sizes="(max-width: 300px) 280px,
+              (max-width: 450px) 430px,
+              (max-width: 600px) 580px,
+              (max-width: 900px) 880px,
+              (max-width: 1200px) 1180px,
+              1500px"
+        src="${cloudinary}w_600/${legacy}"
         alt="${alt}">
       </picture></a>`
   } else {
     return `<a href="https://res.cloudinary.com/curben/${fileName}">
-      <picture>
-      <img srcset="https://res.cloudinary.com/curben/image/upload/w_auto,f_auto,q_auto,c_scale/c_limit,w_300,h_400/${fileName} 300w,
-        https://res.cloudinary.com/curben/image/upload/w_auto,f_auto,q_auto,c_scale/c_limit,w_450,h_400/${fileName} 450w,
-        https://res.cloudinary.com/curben/image/upload/w_auto,f_auto,q_auto,c_scale/c_limit,w_600,h_400/${fileName} 600w"
+      <img
+        srcset="${cloudinary}w_300/${fileName} 300w,
+              ${cloudinary}w_450/${fileName} 450w,
+              ${cloudinary}w_600/${fileName} 600w,
+              ${cloudinary}w_900/${fileName} 900w,
+              ${cloudinary}w_1200/${fileName} 1200w,
+              ${cloudinary}w_1500/${fileName} 1500w"
         sizes="(max-width: 300px) 280px,
               (max-width: 450px) 430px,
-              600px"
-        src="https://res.cloudinary.com/curben/image/upload/w_auto,f_auto,q_auto,c_scale/c_limit,w_600,h_400/${fileName}"
+              (max-width: 600px) 580px,
+              (max-width: 900px) 880px,
+              (max-width: 1200px) 1180px,
+              1500px"
+        src="${cloudinary}w_600/${fileName}"
         alt="${alt}">
-      </picture></a>`
+      </a>`
   }
 })