wires/hypnagaga_old
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

new image shortcode

Browse source
This commit is contained in:
madrilene 2024-01-30 18:34:13 +01:00
parent bc072cbdd4
commit 14c760670a
2 changed files with 82 additions and 63 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

82
config/shortcodes/image/index.js Normal file
View file

@ -0,0 +1,82 @@
const Image = require('@11ty/eleventy-img');
const path = require('path');
const htmlmin = require('html-minifier-terser');
const stringifyAttributes = attributeMap => {
return Object.entries(attributeMap)
.map(([attribute, value]) => {
if (typeof value === 'undefined') return '';
return `${attribute}="${value}"`;
})
.join(' ');
};
const imageShortcode = async (
src,
alt = '',
caption,
loading = 'lazy',
className,
sizes = '90vw',
widths = [320, 570, 880, 1024, 1248],
formats = ['avif', 'webp', 'jpeg']
) => {
const metadata = await Image(src, {
widths: [...widths],
formats: [...formats],
urlPath: '/assets/images/',
outputDir: './dist/assets/images/',
filenameFormat: (id, src, width, format, options) => {
const extension = path.extname(src);
const name = path.basename(src, extension);
return `${name}-${width}w.${format}`;
}
});
const lowsrc = metadata.jpeg[metadata.jpeg.length - 1];
// Getting the URL to use
let imgSrc = src;
if (!imgSrc.startsWith('.')) {
const inputPath = this.page.inputPath;
const pathParts = inputPath.split('/');
pathParts.pop();
imgSrc = `${pathParts.join('/')}/${src}`;
}
const imageSources = Object.values(metadata)
.map(imageFormat => {
return ` <source type="${imageFormat[0].sourceType}" srcset="${imageFormat
.map(entry => entry.srcset)
.join(', ')}" sizes="${sizes}">`;
})
.join('\n');
const imgageAttributes = stringifyAttributes({
src: lowsrc.url,
width: lowsrc.width,
height: lowsrc.height,
alt,
loading,
decoding: 'async'
});
const imageElement = caption
? `<figure class="flow ${className ? `${className}` : ''}">
<picture>
${imageSources}
<img
${imgageAttributes}>
</picture>
<figcaption>${caption}</figcaption>
</figure>`
: `<picture class="flow ${className ? `${className}` : ''}">
${imageSources}
<img
${imgageAttributes}>
</picture>`;
return htmlmin.minify(imageElement, {collapseWhitespace: true});
};
module.exports = imageShortcode;

63
config/shortcodes/imagePlaceholder/index.js
View file

@ -1,63 +0,0 @@
const Image = require('@11ty/eleventy-img');
const path = require('path');
const htmlmin = require('html-minifier-terser');
const imageShortcodePlaceholder = async (
src,
alt,
caption,
sizes = '(min-width: 55rem) 880px, 100vw'
) => {
if (!alt) {
throw new Error(`Missing \`alt\` on myImage from: ${src}`);
}
let metadata = await Image(src, {
widths: [320, 570, 880, 1200],
formats: ['avif', 'webp', 'jpeg'],
urlPath: '/assets/images/',
outputDir: './dist/assets/images/',
filenameFormat: function (id, src, width, format, options) {
const extension = path.extname(src);
const name = path.basename(src, extension);
return `${name}-${width}w.${format}`;
}
});
let lowsrc = metadata.jpeg[metadata.jpeg.length - 1];
// getting the url to use
let imgSrc = src;
if (!imgSrc.startsWith('.')) {
const inputPath = this.page.inputPath;
const pathParts = inputPath.split('/');
pathParts.pop();
imgSrc = pathParts.join('/') + '/' + src;
}
return htmlmin.minify(
`<figure class="flow">
<picture>
${Object.values(metadata)
.map(imageFormat => {
return ` <source type="${imageFormat[0].sourceType}" srcset="${imageFormat
.map(entry => entry.srcset)
.join(', ')}" sizes="${sizes}">`;
})
.join('\n')}
<img
src="${lowsrc.url}"
width="${lowsrc.width}"
height="${lowsrc.height}"
alt="${alt}"
loading = 'lazy'
decoding="async">
</picture>
${caption ? `<figcaption>${caption}</figcaption>` : ``}
</figure>`,
{collapseWhitespace: true}
);
};
module.exports = imageShortcodePlaceholder;