From 605baf5836cba5e5b6dc5379b54a2b3035d48fab Mon Sep 17 00:00:00 2001 From: Cory Dransfeldt Date: Mon, 5 Feb 2024 11:52:08 -0800 Subject: [PATCH] feat: crop images before optimizing them to ensure proper aspect ratio --- config/shortcodes/index.js | 116 ++++++++++++++---- package.json | 2 +- .../partials/webmentions/comments.liquid | 2 +- .../partials/webmentions/interaction.liquid | 2 +- 4 files changed, 94 insertions(+), 28 deletions(-) diff --git a/config/shortcodes/index.js b/config/shortcodes/index.js index fd770162..d41d1f92 100644 --- a/config/shortcodes/index.js +++ b/config/shortcodes/index.js @@ -1,18 +1,59 @@ import Image from '@11ty/eleventy-img'; import path from 'path'; +import Sharp from 'sharp'; import htmlmin from 'html-minifier-terser'; -const stringifyAttributes = (attributeMap) => +const stringifyAttributes = attributeMap => Object.entries(attributeMap) - .map(([attribute, value]) => (value === undefined ? '' : `${attribute}="${value}"`)) + .map(([attribute, value]) => + value === undefined + ? '' + : `${attribute}="${typeof value === 'object' ? value.value : value}"` + ) .join(' '); +const resizeImage = async (src, width, height, mode, shape) => { + const commonOptions = { + fit: mode, + position: 'center', + background: { r: 255, g: 255, b: 255, alpha: 1 }, + }; + + if (shape === 'square') { + const buffer = await Sharp(src) + .resize({ + width: Math.min(width, height), + height: Math.min(width, height), + ...commonOptions, + }) + .toBuffer(); + + return { buffer, width: Math.min(width, height), height: Math.min(width, height) }; + } else if (shape === 'vertical') { + const aspectRatio = 2 / 3; + const targetWidth = Math.min(Math.floor(height * aspectRatio), width); + const buffer = await Sharp(src) + .resize({ + width: targetWidth, + height: Math.floor(targetWidth / aspectRatio), + ...commonOptions, + }) + .toBuffer(); + + return { buffer, width: targetWidth, height: Math.floor(targetWidth / aspectRatio) }; + } else { + const buffer = await Sharp(src).toBuffer(); + + return { buffer, width, height }; + } +}; + export const img = async ( src, alt = '', className, loading = 'lazy', - shape = 'square', + shape = '', icon, maxWidth = 1248, sizes = '90vw', @@ -21,13 +62,11 @@ export const img = async ( const isLocal = src.includes('src/assets'); const imageExists = async () => { try { - const isOk = await fetch(src, { method: 'HEAD' }).then((res) => res.ok); - return isOk; + return await fetch(src, { method: 'HEAD' }).then(res => res.ok); } catch { return false; } }; - const generateImage = async () => { const widths = [320, 570, 880, 1024, 1248]; const metadata = await Image(src, { @@ -40,31 +79,58 @@ export const img = async ( return `${name}-${width}w.${format}`; }, }); - const lowsrc = metadata.jpeg[metadata.jpeg.length - 1]; - const imageSources = Object.values(metadata) - .map( - (imageFormat) => + if (shape === 'square' || shape === 'vertical') { + const { buffer, width: resizedWidth, height: resizedHeight } = await resizeImage( + `./_site/${lowsrc.url}`, + lowsrc.width, + lowsrc.height, + 'cover', + shape + ); + const resizedImageBase64 = buffer.toString('base64'); + const resizedImageSrc = `data:image/${lowsrc.format};base64,${resizedImageBase64}`; + const imageSources = Object.values(metadata) + .map((imageFormat) => `` - ) - .join('\n'); + ) + .join('\n'); + const imageAttributes = stringifyAttributes({ + src: resizedImageSrc, + width: resizedWidth, + height: resizedHeight, + alt, + class: className, + loading, + decoding: 'async', + }); + const imageElement = `${imageSources}`; - const imgageAttributes = stringifyAttributes({ - src: lowsrc.url, - width: lowsrc.width, - height: lowsrc.height, - alt, - class: className, - loading, - decoding: 'async', - }); + return htmlmin.minify(imageElement, { collapseWhitespace: true }); + } else { + const imageSources = Object.values(metadata) + .map((imageFormat) => + `` + ) + .join('\n'); + const imgageAttributes = stringifyAttributes({ + src: lowsrc.url, + width: lowsrc.width, + height: lowsrc.height, + alt, + class: className, + loading, + decoding: 'async', + }); + const imageElement = `${imageSources}`; - const imageElement = `${imageSources}`; - - return htmlmin.minify(imageElement, { collapseWhitespace: true }); + return htmlmin.minify(imageElement, { collapseWhitespace: true }); + } }; const generatePlaceholder = async () => { @@ -72,5 +138,5 @@ export const img = async ( return htmlmin.minify(placeholderElement, { collapseWhitespace: true }); }; - return isLocal ? await generateImage() : await imageExists().then(async (exists) => (exists ? await generateImage() : await generatePlaceholder())); + return isLocal ? await generateImage() : await imageExists().then(async exists => (exists ? await generateImage() : await generatePlaceholder())); }; \ No newline at end of file diff --git a/package.json b/package.json index ec228315..69f6dbad 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "coryd.dev", - "version": "5.3.13", + "version": "5.4.13", "description": "The source for my personal site. Built using 11ty and hosted on Netlify.", "type": "module", "scripts": { diff --git a/src/_includes/partials/webmentions/comments.liquid b/src/_includes/partials/webmentions/comments.liquid index 8d1b853c..5c76ab51 100644 --- a/src/_includes/partials/webmentions/comments.liquid +++ b/src/_includes/partials/webmentions/comments.liquid @@ -8,7 +8,7 @@
{% capture authorAlt %}{{ mention.author.name | escape }}{% endcapture %} {% capture fallbackIcon %}{% tablericon "user" authorAlt %}{% endcapture %} - {% image mention.author.photo, authorAlt, 'avatar__image', 'lazy', 'rounded', fallbackIcon %} + {% image mention.author.photo, authorAlt, 'avatar__image', 'lazy', 'square', fallbackIcon %}
diff --git a/src/_includes/partials/webmentions/interaction.liquid b/src/_includes/partials/webmentions/interaction.liquid index 8c13fc3f..fff52b47 100644 --- a/src/_includes/partials/webmentions/interaction.liquid +++ b/src/_includes/partials/webmentions/interaction.liquid @@ -13,7 +13,7 @@
{% capture authorAlt %}{{ mention.author.name | escape }}{% endcapture %} {% capture fallbackIcon %}{% tablericon "user" authorAlt %}{% endcapture %} - {% image mention.author.photo, authorAlt, 'avatar__image', 'lazy', 'rounded', fallbackIcon %} + {% image mention.author.photo, authorAlt, 'avatar__image', 'lazy', 'square', fallbackIcon %}
{% endfor %}