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://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,
|
||||||
|
${cloudinary}w_900/${modern} 900w,
|
||||||
|
${cloudinary}w_1200/${modern} 1200w,
|
||||||
|
${cloudinary}w_1500/${modern} 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/${legacy}">
|
(max-width: 900px) 880px,
|
||||||
<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,
|
(max-width: 1200px) 1180px,
|
||||||
https://res.cloudinary.com/curben/image/upload/w_auto,f_auto,q_auto,c_scale/c_limit,w_450,h_400/${legacy} 450w,
|
1500px">
|
||||||
https://res.cloudinary.com/curben/image/upload/w_auto,f_auto,q_auto,c_scale/c_limit,w_600,h_400/${legacy} 600w"
|
<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,
|
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"
|
||||||
|
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>`
|
||||||
}
|
}
|
||||||
})
|
})
|
||||||
|
|
Loading…
Reference in New Issue