From 6c7e91699d35f895c78e91d2eb5467da8bc8f7c4 Mon Sep 17 00:00:00 2001
From: Helen Chong <119173961+helenclx@users.noreply.github.com>
Date: Fri, 19 Jul 2024 14:04:54 +0800
Subject: [PATCH] Use Eleventy Image Transform plugin for images

---
 eleventy.config.images.js           | 29 +++++++++--------------------
 src/_includes/main/profile.njk      |  2 +-
 src/_includes/main/project-card.njk |  2 +-
 src/_includes/main/project.njk      |  2 +-
 4 files changed, 12 insertions(+), 23 deletions(-)

diff --git a/eleventy.config.images.js b/eleventy.config.images.js
index 8c24a82d..2149e8ac 100644
--- 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",
+		},
+	});
 }
\ No newline at end of file
diff --git a/src/_includes/main/profile.njk b/src/_includes/main/profile.njk
index d838c8f8..56c5c54f 100644
--- 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
index 06c37962..83a2e2b7 100644
--- 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
index a6d8870b..19a86357 100644
--- 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>