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

Update image shortcode

Browse source
This commit is contained in:
madrilene 2023-10-30 16:51:00 +01:00
parent 3d10b122ea
commit 95bd4cd960
1 changed files with 22 additions and 27 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -6,14 +6,14 @@ const imageShortcodePlaceholder = async (
src,
alt,
caption,
sizes = '(min-width: 55rem) 820px, 100vw'
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, 820],
widths: [320, 570, 880, 1200],
formats: ['avif', 'webp', 'jpeg'],
urlPath: '/assets/images/',
outputDir: './dist/assets/images/',
@ -37,31 +37,26 @@ const imageShortcodePlaceholder = async (
}
return htmlmin.minify(
`<figure>
<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="/assets/images/image-placeholder.png"
data-src="${lowsrc.url}"
width="${lowsrc.width}"
height="${lowsrc.height}"
alt="${alt}"
loading = 'lazy'
decoding="async">
</picture>
${
caption
? `<figcaption class="cluster font-display"><p>${caption}</p>
</figcaption>`
: ``
}
</figure>`,
`<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="/assets/images/image-placeholder.png"
data-src="${lowsrc.url}"
width="${lowsrc.width}"
height="${lowsrc.height}"
alt="${alt}"
loading = 'lazy'
decoding="async">
</picture>
${caption ? `<figcaption>${caption}</figcaption>` : ``}
</figure>`,
{collapseWhitespace: true}
);
};