cdransf/coryd.dev-eleventy
Archived
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

feat: crop images before optimizing them to ensure proper aspect ratio

Browse source
This commit is contained in:
Cory Dransfeldt 2024-02-05 11:52:08 -08:00
parent 7a3a7d65e4
commit 605baf5836
No known key found for this signature in database
4 changed files with 94 additions and 28 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

116
config/shortcodes/index.js
View file

@ -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) =>
`<source type="${imageFormat[0].sourceType}" srcset="${imageFormat
.map((entry) => entry.srcset)
.join(', ')}" sizes="${sizes}">`
)
.join('\n');
)
.join('\n');
const imageAttributes = stringifyAttributes({
src: resizedImageSrc,
width: resizedWidth,
height: resizedHeight,
alt,
class: className,
loading,
decoding: 'async',
});
const imageElement = `<picture>${imageSources}<img ${imageAttributes} /></picture>`;
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) =>
`<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,
class: className,
loading,
decoding: 'async',
});
const imageElement = `<picture>${imageSources}<img ${imgageAttributes} /></picture>`;
const imageElement = `<picture>${imageSources}<img ${imgageAttributes} /></picture>`;
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()));
};

2
package.json
View file

@ -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": {

2
src/_includes/partials/webmentions/comments.liquid
View file

@ -8,7 +8,7 @@
<div class="avatar__wrapper flex--centered">
{% 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 %}
</div>
</a>
<div class="comment">

2
src/_includes/partials/webmentions/interaction.liquid
View file

@ -13,7 +13,7 @@
<div class="avatar__wrapper flex--centered">
{% 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 %}
</div>
</a>
{% endfor %}