curben
/
blog
mirror of https://gitlab.com/curben/blog
1
0
Fork 0
Code Issues Releases Wiki Activity

fix(cloudinary): include more sizes

This commit is contained in:
curben 2019-08-25 17:15:44 +09:30
parent 4baa40a641
commit 7436391bc6
No known key found for this signature in database
GPG Key ID: 5D9DB57A25D34EE3
1 changed files with 39 additions and 19 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

58
scripts/cloudinary.js
View File

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