Use Eleventy Image Transform plugin for images

helenclx · Jul 19, 2024 · 6c7e916 · 6c7e916
1 parent a941e18
commit 6c7e916
Show file tree

Hide file tree

Showing 4 changed files with 12 additions and 23 deletions.
diff --git a/eleventy.config.images.js b/eleventy.config.images.js
@@ -1,23 +1,12 @@
-import eleventyImage, { generateHTML } from "@11ty/eleventy-img";
-
-async function imageShortcode(src, alt, sizes) {
-    let metadata = await eleventyImage(`./src${src}`, {
-        widths: [300, 800, null],
-        formats: ["avif", "jpeg"],
-        urlPath: "/assets/images/",
-        outputDir: "./_site/assets/images/"
-    });
-
-    let imageAttributes = {
-        alt,
-        sizes,
-        loading: "lazy",
-        decoding: "async"
-    };
-
-    return generateHTML(metadata, imageAttributes);
-}
+import { eleventyImageTransformPlugin } from "@11ty/eleventy-img";
 
 export default function(eleventyConfig) {
-    eleventyConfig.addNunjucksAsyncShortcode("EleventyImage", imageShortcode);
+    eleventyConfig.addPlugin(eleventyImageTransformPlugin, {
+		extensions: "html",
+		formats: ["avif", "jpeg"],
+		defaultAttributes: {
+			loading: "lazy",
+			decoding: "async",
+		},
+	});
 }
diff --git a/src/_includes/main/profile.njk b/src/_includes/main/profile.njk
@@ -1,7 +1,7 @@
 <section class="profile">
     <h2 class="visually-hidden">Introduction</h2>
     <div class="profile__image-wrapper">
-        <img fetchpriority="high" src="/assets/images/profile/avatar-helen-chong.avif" alt="Helen Chong, Front-End Developer">
+        <img fetchpriority="high" src="/assets/images/profile/avatar-helen-chong.avif" alt="Helen Chong, Front-End Developer" loading="">
     </div>
     <div class="profile__card">
         <p class="profile__text">Hi! I am <span class="profile__text--highlight">Helen</span>, a graphic designer turned software developer from Malaysia.</p>

diff --git a/src/_includes/main/project-card.njk b/src/_includes/main/project-card.njk
@@ -5,7 +5,7 @@
 
 <article class="project-card">
     <div class="project-card__image-wrapper">
-        {% EleventyImage project.data.image, project.data.imageAlt, "(min-width: 30em) 50vw, 100vw" %}
+        <img src="{{ project.data.image }}" alt="{{ project.data.imageAlt }}">
     </div>
     <div class="project-card__body">
         <div class="project-card__tags">

diff --git a/src/_includes/main/project.njk b/src/_includes/main/project.njk
@@ -11,7 +11,7 @@ hasBreadcrumbs: true
 
     <article class="project">
         <div class="project__image-wrapper">
-            {% EleventyImage image, imageAlt, "(min-width: 30em) 50vw, 100vw" %}
+            <img src="{{ image }}" alt="{{ imageAlt }}">
         </div>
         <div class="project__content prose">
             <h2>Project links</h2>