blog/scripts/cloudinary.js

62 lines
1.9 KiB
JavaScript
Raw Normal View History

2019-08-09 13:02:51 +00:00
'use strict'
/* global hexo */
2018-10-01 02:24:11 +00:00
/*
* Put {% cloudinary 'folder/filename.jpg' 'description' %} in your post.
* Change the username in 'user' variable
2018-10-01 02:24:11 +00:00
* More info:
* https://cloudinary.com/blog/responsive_images_with_srcset_sizes_and_cloudinary
2018-10-01 02:24:11 +00:00
*/
2019-08-25 07:45:44 +00:00
hexo.extend.tag.register('cloudinary', (args) => {
const user = 'curben'
const fileName = args[0]
2019-07-10 11:47:17 +00:00
const alt = args[1] || ''
let modern = ''
let legacy = ''
2019-08-25 20:48:09 +00:00
const cloudinary = 'https://cdn.statically.io/img/res.cloudinary.com/' + user +
'/image/upload/q_auto'
const original = 'https://cdn.statically.io/img/res.cloudinary.com/' + user + '/' + fileName
if (fileName.endsWith('.png')) {
modern = fileName.replace(/\.png$/, '.webp')
legacy = fileName
} else if (fileName.endsWith('.webp')) {
modern = fileName
legacy = fileName.replace(/\.webp$/, '.gif')
} else {
legacy = fileName
}
const img = `<img
srcset="${cloudinary}/c_limit,w_320/${legacy} 320w,
${cloudinary}/c_limit,w_468/${legacy} 468w,
${cloudinary}/c_limit,w_768/${legacy} 768w,
${cloudinary}/${legacy} 800w"
sizes="(max-width: 320px) 320px,
(max-width: 468px) 468px,
(max-width: 768px) 768px,
800px">
src="${cloudinary}w_768/${legacy}"
alt="${alt}">`
if (fileName.endsWith('.png') || fileName.endsWith('.webp')) {
2019-08-25 20:48:09 +00:00
return `<a href="${original}">
<picture>
<source type="image/webp"
srcset="${cloudinary}/c_limit,w_320/${modern} 320w,
${cloudinary}/c_limit,w_468/${modern} 468w,
${cloudinary}/c_limit,w_768/${modern} 768w,
${cloudinary}/${modern} 800w"
sizes="(max-width: 320px) 320px,
(max-width: 468px) 468px,
(max-width: 768px) 768px,
800px">
${img}
</picture></a>`
} else {
2019-08-25 20:48:09 +00:00
return `<a href="${original}">
${img}</a>`
}
})