From b2f237a9227024822d7e43d43fe4ff5b7a13a663 Mon Sep 17 00:00:00 2001
From: "Nick Curran [SSW]" <132531112+ncn-ssw@users.noreply.github.com>
Date: Wed, 16 Oct 2024 08:47:05 +1000
Subject: [PATCH] Refactors carousel to use NextJS' Image component.

---
 components/blocks/CarouselFeature.tsx | 7 ++++++-
 1 file changed, 6 insertions(+), 1 deletion(-)

diff --git a/components/blocks/CarouselFeature.tsx b/components/blocks/CarouselFeature.tsx
index 7b5e4dd27..936393d9e 100644
--- a/components/blocks/CarouselFeature.tsx
+++ b/components/blocks/CarouselFeature.tsx
@@ -1,3 +1,4 @@
+import Image from 'next/image';
 import React, { useEffect, useRef, useState } from 'react';
 import { tinaField } from 'tinacms/dist/react';
 import { sanitizeLabel } from 'utils/sanitizeLabel';
@@ -170,12 +171,16 @@ export function CarouselFeatureBlock({ data, index }) {
     const fileExtension = fullVideoUrl.split('.').pop();
 
     if (fileExtension === 'gif') {
+      // Width and height values *must* be provided to NextJS's Image component to build,
+      // but they will not determine the rendered size of the image in this case.
       return (
         <div className="flex justify-center items-center">
-          <img
+          <Image
             key={index}
             src={fullVideoUrl}
             alt={`Media item ${index}`}
+            width={1200}
+            height={800}
             className="w-full h-auto mt-10 lg:mt-0 rounded-xl shadow-lg"
           />
         </div>