mirror of https://gitlab.com/curben/blog
refactor: use native responsive image function
* https://developer.mozilla.org/en-US/docs/Learn/HTML/Multimedia_and_embedding/Responsive_images * https://cloudinary.com/blog/responsive_images_with_srcset_sizes_and_cloudinary * https://www.html5rocks.com/en/tutorials/responsive/picture-element/ * https://alligator.io/html/picture-element/ * https://www.smashingmagazine.com/2014/05/responsive-images-done-right-guide-picture-srcset/
This commit is contained in:
parent
35daa88cfb
commit
4baa40a641
|
@ -14,6 +14,48 @@
|
|||
hexo.extend.tag.register('cloudinary', (args) => {
|
||||
const fileName = args[0]
|
||||
const alt = args[1] || ''
|
||||
let modern = ''
|
||||
let legacy = ''
|
||||
|
||||
return '<a href="https://res.cloudinary.com/curben/' + fileName + '"><img class="cld-responsive" data-src="https://res.cloudinary.com/curben/image/upload/w_auto,f_auto,q_auto,c_scale/c_limit,w_600,h_400/' + fileName + '" src="/svg/loading.svg" alt="' + alt + '"></a>'
|
||||
if (fileName.endsWith('.png')) {
|
||||
modern = fileName.replace(/\.png$/, '.webp')
|
||||
legacy = fileName
|
||||
} else if (fileName.endsWith('.webp')) {
|
||||
modern = fileName
|
||||
legacy = fileName.replace(/\.webp$/, '.gif')
|
||||
}
|
||||
|
||||
if (fileName.endsWith('.png') || fileName.endsWith('.webp')) {
|
||||
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"
|
||||
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}"
|
||||
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"
|
||||
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}"
|
||||
alt="${alt}">
|
||||
</picture></a>`
|
||||
}
|
||||
})
|
||||
|
|
|
@ -13,6 +13,7 @@
|
|||
|
||||
const moment = require('moment')
|
||||
const { escapeHTML, htmlTag, stripHTML } = require('hexo-util')
|
||||
const micromatch = require('micromatch')
|
||||
|
||||
function meta (name, content, escape) {
|
||||
if (escape !== false && typeof content === 'string') {
|
||||
|
@ -70,9 +71,12 @@ function openGraphHelper (options = {}) {
|
|||
|
||||
// https://github.com/hexojs/hexo/pull/3680
|
||||
let img
|
||||
const imgPattern = /<img [^>]*src=['"]([^'"]+)([^>]*>)/gi
|
||||
const imgPattern = /<a [^>]*href=['"]([^'"]+)([^>]*>)/gi
|
||||
while ((img = imgPattern.exec(content)) !== null) {
|
||||
if (!img[1].endsWith('.svg')) images.push(img[1])
|
||||
const imgExt = ['*.jpg', '*.png', '*.webp']
|
||||
if (micromatch.isMatch(img[1], imgExt, { basename: true })) {
|
||||
images.push(img[1])
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
@ -2,7 +2,5 @@
|
|||
<script src="https://cdnjs.cloudflare.com/ajax/libs/clipboard.js/2.0.4/clipboard.min.js" data-sri-fallback="/js/clipboard.min.js" integrity="sha384-8CYhPwYlLELodlcQV713V9ZikA3DlCVaXFDpjHfP8Z36gpddf/Vrt47XmKDsCttu" crossorigin="anonymous"></script>
|
||||
<% } %>
|
||||
|
||||
<script src="https://cdnjs.cloudflare.com/ajax/libs/cloudinary-core/2.6.3/cloudinary-core-shrinkwrap.min.js" data-sri-fallback="/js/cloudinary-core-shrinkwrap.min.js" integrity="sha384-AtUi14V2IZNnJArkg9+Z7S73y5MplnidfGOr3uLWrW2VTnQKUnJnRZl0IdvfTueI" crossorigin="anonymous"></script>
|
||||
|
||||
<%/* javascript of Typing theme */%>
|
||||
<%- js('js/typing') %>
|
||||
|
|
File diff suppressed because one or more lines are too long
|
@ -8,7 +8,7 @@ document.getElementById('searchClickMob').addEventListener('click', () => {
|
|||
}, false)
|
||||
|
||||
/*
|
||||
* Copy button and Cloudinary functions.
|
||||
* Copy button
|
||||
* Following functions only execute after
|
||||
* the 'document' is ready or
|
||||
* <script src> is executed.
|
||||
|
@ -36,8 +36,4 @@ document.addEventListener('DOMContentLoaded', () => {
|
|||
event.trigger.textContent = 'Copy'
|
||||
}, 2000)
|
||||
})
|
||||
|
||||
// Initialize Cloudinary responsive function
|
||||
const cl = cloudinary.Cloudinary.new({ cloud_name: 'curben' })
|
||||
cl.responsive()
|
||||
}, false)
|
||||
|
|
Loading…
Reference in New Issue