tcsenpai/obsidiangarden_netlify
1
0
Fork 0
mirror of https://github.com/tcsenpai/obsidiangarden_netlify.git synced 2025-06-04 12:00:02 +00:00
Code Issues 5 Packages Projects Releases Wiki Activity

Fix for smaller images

Browse Source
This commit is contained in:
Ole Eskild Steensen 2023-05-26 11:18:50 +02:00
parent b216452d7a
commit 4663102ebc
1 changed files with 36 additions and 25 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

61
.eleventy.js
View File

@ -342,12 +342,46 @@ module.exports = function (eleventyConfig) {
return str && parsed.innerHTML;
});
function fillPictureSourceSets(src, cls, alt, meta, t) {
t.tagName = "picture";
let html = `<source
media="(max-width:480px)"
srcset="${meta.webp[0].url}"
type="image/webp"
/>
<source
media="(max-width:480px)"
srcset="${meta.jpeg[0].url}"
/>
`
if (meta.webp && meta.webp[1] && meta.webp[1].url) {
html += `<source
media="(max-width:1920px)"
srcset="${meta.webp[1].url}"
type="image/webp"
/>`
}
if (meta.jpeg && meta.jpeg[1] && meta.jpeg[1].url) {
html += `<source
media="(max-width:1920px)"
srcset="${meta.jpeg[1].url}"
/>`
}
html += `<img
class="${cls.toString()}"
src="${src}"
alt="${alt}"
/>`;
t.innerHTML = html;
}
eleventyConfig.addTransform("picture", function (str) {
const parsed = parse(str);
for (const t of parsed.querySelectorAll(".cm-s-obsidian img")) {
const src = t.getAttribute("src");
if (src && src.startsWith("/") && !src.endsWith(".svg")) {
const cls = t.classList;
const cls = t.classList.value;
const alt = t.getAttribute("alt");
try {
@ -359,30 +393,7 @@ module.exports = function (eleventyConfig) {
);
if (meta) {
t.tagName = "picture";
t.innerHTML = `<source
media="(max-width:480px)"
srcset="${meta.webp[0].url}"
type="image/webp"
/>
<source
media="(max-width:480px)"
srcset="${meta.jpeg[0].url}"
/>
<source
media="(max-width:1920px)"
srcset="${meta.webp[1].url}"
type="image/webp"
/>
<source
media="(max-width:1920px)"
srcset="${meta.jpeg[1].url}"
/>
<img
class="${cls.toString()}"
src="${src}"
alt="${alt}"
/>`;
fillPictureSourceSets(src, cls, alt, meta, t);
}
} catch {
// Make it fault tolarent.