Fix image scaling

This commit is contained in:
Ole Eskild Steensen 2023-05-26 11:25:13 +02:00
parent 4663102ebc
commit 0a067cc87f

View File

@ -342,8 +342,8 @@ module.exports = function (eleventyConfig) {
return str && parsed.innerHTML; return str && parsed.innerHTML;
}); });
function fillPictureSourceSets(src, cls, alt, meta, t) { function fillPictureSourceSets(src, cls, alt, meta, width, imageTag) {
t.tagName = "picture"; imageTag.tagName = "picture";
let html = `<source let html = `<source
media="(max-width:480px)" media="(max-width:480px)"
srcset="${meta.webp[0].url}" srcset="${meta.webp[0].url}"
@ -371,29 +371,31 @@ module.exports = function (eleventyConfig) {
class="${cls.toString()}" class="${cls.toString()}"
src="${src}" src="${src}"
alt="${alt}" alt="${alt}"
width="${width}"
/>`; />`;
t.innerHTML = html; imageTag.innerHTML = html;
} }
eleventyConfig.addTransform("picture", function (str) { eleventyConfig.addTransform("picture", function (str) {
const parsed = parse(str); const parsed = parse(str);
for (const t of parsed.querySelectorAll(".cm-s-obsidian img")) { for (const imageTag of parsed.querySelectorAll(".cm-s-obsidian img")) {
const src = t.getAttribute("src"); const src = imageTag.getAttribute("src");
if (src && src.startsWith("/") && !src.endsWith(".svg")) { if (src && src.startsWith("/") && !src.endsWith(".svg")) {
const cls = t.classList.value; const cls = imageTag.classList.value;
const alt = t.getAttribute("alt"); const alt = imageTag.getAttribute("alt");
const width = imageTag.getAttribute("width") || '';
try { try {
const meta = transformImage( const meta = transformImage(
"./src/site" + decodeURI(t.getAttribute("src")), "./src/site" + decodeURI(imageTag.getAttribute("src")),
cls.toString(), cls.toString(),
alt, alt,
["(max-width: 480px)", "(max-width: 1024px)"] ["(max-width: 480px)", "(max-width: 1024px)"]
); );
if (meta) { if (meta) {
fillPictureSourceSets(src, cls, alt, meta, t); fillPictureSourceSets(src, cls, alt, meta, width, imageTag);
} }
} catch { } catch {
// Make it fault tolarent. // Make it fault tolarent.