68 lines
1.7 KiB
JavaScript
68 lines
1.7 KiB
JavaScript
import outdent from 'outdent'
|
|
import Image from '@11ty/eleventy-img'
|
|
|
|
export const img = async (
|
|
src,
|
|
alt,
|
|
className = undefined,
|
|
loading = 'lazy',
|
|
widths = [75, 150, 300, 600, 900, 1200],
|
|
formats = ['webp', 'jpeg'],
|
|
sizes = '100vw'
|
|
) => {
|
|
const imageMetadata = await Image(src, {
|
|
widths: [...widths, null],
|
|
formats: [...formats, null],
|
|
outputDir: './_site/assets/img/cache/',
|
|
urlPath: '/assets/img/cache/',
|
|
})
|
|
|
|
const stringifyAttributes = (attributeMap) => {
|
|
return Object.entries(attributeMap)
|
|
.map(([attribute, value]) => {
|
|
if (typeof value === 'undefined') return ''
|
|
return `${attribute}="${value}"`
|
|
})
|
|
.join(' ')
|
|
}
|
|
|
|
const sourceHtmlString = Object.values(imageMetadata)
|
|
.map((images) => {
|
|
const { sourceType } = images[0]
|
|
const sourceAttributes = stringifyAttributes({
|
|
type: sourceType,
|
|
srcset: images.map((image) => image.srcset).join(', '),
|
|
sizes,
|
|
})
|
|
|
|
return `<source ${sourceAttributes}>`
|
|
})
|
|
.join('\n')
|
|
|
|
const getLargestImage = (format) => {
|
|
const images = imageMetadata[format]
|
|
return images[images.length - 1]
|
|
}
|
|
|
|
const largestUnoptimizedImg = getLargestImage(formats[0])
|
|
const imgAttributes = stringifyAttributes({
|
|
src: largestUnoptimizedImg.url,
|
|
width: largestUnoptimizedImg.width,
|
|
height: largestUnoptimizedImg.height,
|
|
alt,
|
|
loading,
|
|
decoding: 'async',
|
|
})
|
|
|
|
const imgHtmlString = `<img ${imgAttributes}>`
|
|
const pictureAttributes = stringifyAttributes({
|
|
class: className,
|
|
})
|
|
|
|
const picture = `<picture ${pictureAttributes}>
|
|
${sourceHtmlString}
|
|
${imgHtmlString}
|
|
</picture>`
|
|
|
|
return outdent`${picture}`
|
|
}
|