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, src,
alt, alt,
caption, caption,
sizes = '(min-width: 55rem) 820px, 100vw' sizes = '(min-width: 55rem) 880px, 100vw'
) => { ) => {
if (!alt) { if (!alt) {
throw new Error(`Missing \`alt\` on myImage from: ${src}`); throw new Error(`Missing \`alt\` on myImage from: ${src}`);
} }
let metadata = await Image(src, { let metadata = await Image(src, {
widths: [320, 570, 820], widths: [320, 570, 880, 1200],
formats: ['avif', 'webp', 'jpeg'], formats: ['avif', 'webp', 'jpeg'],
urlPath: '/assets/images/', urlPath: '/assets/images/',
outputDir: './dist/assets/images/', outputDir: './dist/assets/images/',
@ -37,31 +37,26 @@ const imageShortcodePlaceholder = async (
} }
return htmlmin.minify( return htmlmin.minify(
`<figure> `<figure class="flow">
<picture> <picture>
${Object.values(metadata) ${Object.values(metadata)
.map(imageFormat => { .map(imageFormat => {
return ` <source type="${imageFormat[0].sourceType}" srcset="${imageFormat return ` <source type="${imageFormat[0].sourceType}" srcset="${imageFormat
.map(entry => entry.srcset) .map(entry => entry.srcset)
.join(', ')}" sizes="${sizes}">`; .join(', ')}" sizes="${sizes}">`;
}) })
.join('\n')} .join('\n')}
<img <img
src="/assets/images/image-placeholder.png" src="/assets/images/image-placeholder.png"
data-src="${lowsrc.url}" data-src="${lowsrc.url}"
width="${lowsrc.width}" width="${lowsrc.width}"
height="${lowsrc.height}" height="${lowsrc.height}"
alt="${alt}" alt="${alt}"
loading = 'lazy' loading = 'lazy'
decoding="async"> decoding="async">
</picture> </picture>
${ ${caption ? `<figcaption>${caption}</figcaption>` : ``}
caption </figure>`,
? `<figcaption class="cluster font-display"><p>${caption}</p>
</figcaption>`
: ``
}
</figure>`,
{collapseWhitespace: true} {collapseWhitespace: true}
); );
}; };