mirror of https://gitlab.com/curben/blog
fix(cloudinary): include more sizes
This commit is contained in:
parent
4baa40a641
commit
7436391bc6
|
@ -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"
|
||||
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}">
|
||||
<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"
|
||||
(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,
|
||||
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"
|
||||
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>`
|
||||
}
|
||||
})
|
||||
|
|
Loading…
Reference in New Issue