74 lines
2.1 KiB
JavaScript
74 lines
2.1 KiB
JavaScript
const m = require('mithril')
|
|
|
|
export function generatePictureSource(item, cover) {
|
|
if (!item || !item.media_alt_prefix) return null
|
|
|
|
return {
|
|
fallback: item.media_alt_prefix + '_small.jpg',
|
|
jpeg: item.media_alt_prefix + '_small.jpg' + ' 720w, '
|
|
+ item.media_alt_prefix + '_medium.jpg' + ' 1300w, '
|
|
+ item.media_alt_prefix + '_large.jpg 1920w',
|
|
avif: item.media_alt_prefix + '_small.avif' + ' 720w, '
|
|
+ item.media_alt_prefix + '_medium.avif' + ' 1300w, '
|
|
+ item.media_alt_prefix + '_large.avif 1920w',
|
|
cover: cover,
|
|
preview: item.media_avif_preview,
|
|
}
|
|
}
|
|
|
|
export function getBannerImage(item, prefix) {
|
|
if (!item || !item.banner_alt_prefix) return null
|
|
|
|
let out = {
|
|
path: prefix + item.path,
|
|
name: item.name,
|
|
original: item.banner_path,
|
|
banner: item.banner_alt_prefix,
|
|
preview: item.banner_avif_preview,
|
|
}
|
|
|
|
var deviceWidth = window.innerWidth
|
|
var pixelRatio = window.devicePixelRatio || 1
|
|
if ((deviceWidth < 720 && pixelRatio <= 1)
|
|
|| (deviceWidth < 360 && pixelRatio <= 2)) {
|
|
out.banner += '_small'
|
|
} else if ((deviceWidth < 1300 && pixelRatio <= 1)
|
|
|| (deviceWidth < 650 && pixelRatio <= 2)) {
|
|
out.banner += '_medium'
|
|
} else {
|
|
out.banner += '_large'
|
|
}
|
|
if (window.supportsavif) {
|
|
out.banner += '.avif'
|
|
} else {
|
|
out.banner += '.jpg'
|
|
}
|
|
|
|
return out
|
|
}
|
|
|
|
export function getArticlePicture(pictureData, useRouteLink, path, altText, fallback) {
|
|
if (!pictureData) return fallback || null
|
|
|
|
return m(useRouteLink ? m.route.Link : 'a', {
|
|
class: 'cover ' + (pictureData.preview && window.supportsavif ? 'haspreview' : ''),
|
|
rel: useRouteLink ? null : 'noopener',
|
|
target: useRouteLink ? null : '_blank',
|
|
href: path,
|
|
}, [
|
|
pictureData.preview && window.supportsavif ? m('img', { src: pictureData.preview }) : null,
|
|
m('picture', [
|
|
m('source', {
|
|
srcset: pictureData.avif,
|
|
sizes: pictureData.cover,
|
|
type: 'image/avif',
|
|
}),
|
|
m('img', {
|
|
srcset: pictureData.jpeg,
|
|
sizes: pictureData.cover,
|
|
alt: altText,
|
|
src: pictureData.fallback,
|
|
}),
|
|
])
|
|
])
|
|
} |