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

simplify image shortcode, split class in container and img

Browse source
This commit is contained in:
madrilene 2025-01-09 14:04:50 +01:00
parent ce5326dfe8
commit 4a23681839
1 changed files with 15 additions and 50 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

65
src/_config/shortcodes/image.js
View file

@ -1,12 +1,6 @@
import Image from '@11ty/eleventy-img'; import Image from '@11ty/eleventy-img';
import path from 'node:path'; import path from 'node:path';
import htmlmin from 'html-minifier-terser';
/**
* Converts an attribute map object to a string of HTML attributes.
* @param {Object} attributeMap - The attribute map object.
* @returns {string} - The string of HTML attributes.
*/
const stringifyAttributes = attributeMap => { const stringifyAttributes = attributeMap => {
return Object.entries(attributeMap) return Object.entries(attributeMap)
.map(([attribute, value]) => { .map(([attribute, value]) => {
@ -16,26 +10,15 @@ const stringifyAttributes = attributeMap => {
.join(' '); .join(' ');
}; };
/**
* Generates an HTML image element with responsive images and optional caption.
* @param {string} src - The path to the image source file.
* @param {string} [alt=''] - The alternative text for the image.
* @param {string} [caption=''] - The caption for the image.
* @param {string} [loading='lazy'] - The loading attribute for the image.
* @param {string} [className] - The CSS class name for the image element.
* @param {string} [sizes='90vw'] - The sizes attribute for the image.
* @param {number[]} [widths=[440, 650, 960, 1200]] - The widths for generating responsive images.
* @param {string[]} [formats=['avif', 'webp', 'jpeg']] - The formats for generating responsive images.
* @returns {string} - The HTML image element.
*/
export const imageShortcode = async ( export const imageShortcode = async (
src, src,
alt = '', alt = '',
caption = '', caption = '',
loading = 'lazy', loading = 'lazy',
className, containerClass,
sizes = '90vw', imageClass,
widths = [440, 650, 960, 1200], sizes = '100vw',
widths = [650, 960, 1200],
formats = ['avif', 'webp', 'jpeg'] formats = ['avif', 'webp', 'jpeg']
) => { ) => {
const metadata = await Image(src, { const metadata = await Image(src, {
@ -52,15 +35,6 @@ export const imageShortcode = async (
const lowsrc = metadata.jpeg[metadata.jpeg.length - 1]; 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) const imageSources = Object.values(metadata)
.map(imageFormat => { .map(imageFormat => {
return ` <source type="${imageFormat[0].sourceType}" srcset="${imageFormat return ` <source type="${imageFormat[0].sourceType}" srcset="${imageFormat
@ -69,29 +43,20 @@ export const imageShortcode = async (
}) })
.join('\n'); .join('\n');
const imgageAttributes = stringifyAttributes({ const imageAttributes = stringifyAttributes({
src: lowsrc.url, 'src': lowsrc.url,
width: lowsrc.width, 'width': lowsrc.width,
height: lowsrc.height, 'height': lowsrc.height,
alt, alt,
loading, loading,
decoding: loading === 'eager' ? 'sync' : 'async' 'decoding': loading === 'eager' ? 'sync' : 'async',
...(imageClass && {class: imageClass}),
'eleventy:ignore': ''
}); });
const imageElement = caption const pictureElement = `<picture> ${imageSources}<img ${imageAttributes}></picture>`;
? `<figure slot="image" class="flow ${className ? `${className}` : ''}">
<picture>
${imageSources}
<img
${imgageAttributes}>
</picture>
<figcaption>${caption}</figcaption>
</figure>`
: `<picture slot="image" class="flow ${className ? `${className}` : ''}">
${imageSources}
<img
${imgageAttributes}>
</picture>`;
return htmlmin.minify(imageElement, {collapseWhitespace: true}); return caption
? `<figure slot="image"${containerClass ? ` class="${containerClass}"` : ''}>${pictureElement}<figcaption>${caption}</figcaption></figure>`
: `<picture slot="image"${containerClass ? ` class="${containerClass}"` : ''}>${imageSources}<img ${imageAttributes}></picture>`;
}; };