AB#9474 Use NextImage instead of Image (#247)

Sitecore · Nov 5, 2024 · 446fd39 · 446fd39
1 parent bf038f9
commit 446fd39
Show file tree

Hide file tree

Showing 30 changed files with 160 additions and 92 deletions.
diff --git a/...roject/Verticals/Financial/Home page/Carousels/Default/finance-default-carousel-image.yml b/...roject/Verticals/Financial/Home page/Carousels/Default/finance-default-carousel-image.yml
diff --git a/src/sxastarter/next.config.js b/src/sxastarter/next.config.js
@@ -56,7 +56,8 @@ const nextConfig = {
         hostname: 'feaas*.blob.core.windows.net',
         port: '',
       },
-    ]
+    ],
+    dangerouslyAllowSVG: true,
   },
 
   async rewrites() {

diff --git a/src/sxastarter/src/components/Navigation/Footer.tsx b/src/sxastarter/src/components/Navigation/Footer.tsx
@@ -2,12 +2,12 @@ import React from 'react';
 import {
   Field,
   ImageField,
-  Image,
   LinkField,
   Link,
   Text,
   RichTextField,
   RichText,
+  NextImage,
 } from '@sitecore-jss/sitecore-jss-nextjs';
 
 interface Fields {
@@ -48,7 +48,12 @@ export const Default = (props: FooterProps): JSX.Element => {
       <div className="container">
         <div className="content">
           <div className="logo">
-            <Image field={props.fields?.Image1} height={' '} className="img-fluid" />
+            <NextImage
+              field={props.fields?.Image1}
+              width={200}
+              height={200}
+              className="img-fluid"
+            />
           </div>
           <div className="row row-cols-1 row-cols-sm-2 row-cols-xl-4 row-gap-5 gx-5">
             <div className="col">
@@ -109,7 +114,12 @@ export const WithSocials = (props: FooterProps): JSX.Element => {
       <div className="container">
         <div className="content">
           <div className="logo">
-            <Image field={props.fields?.Image1} height={' '} className="img-fluid" />
+            <NextImage
+              field={props.fields?.Image1}
+              width={200}
+              height={200}
+              className="img-fluid"
+            />
           </div>
           <div className="row row-cols-1 row-cols-md-3 row-gap-5 gx-5">
             <div className="col">
@@ -134,13 +144,13 @@ export const WithSocials = (props: FooterProps): JSX.Element => {
               </div>
               <div className="links links-socials">
                 <Link field={props.fields?.SocialLink1}>
-                  <Image field={props.fields?.SocialIcon1} />
+                  <NextImage field={props.fields?.SocialIcon1} width={16} height={16} />
                 </Link>
                 <Link field={props.fields?.SocialLink2}>
-                  <Image field={props.fields?.SocialIcon2} />
+                  <NextImage field={props.fields?.SocialIcon2} width={16} height={16} />
                 </Link>
                 <Link field={props.fields?.SocialLink3}>
-                  <Image field={props.fields?.SocialIcon3} />
+                  <NextImage field={props.fields?.SocialIcon3} width={16} height={16} />
                 </Link>
               </div>
             </div>

diff --git a/src/sxastarter/src/components/Navigation/Header.tsx b/src/sxastarter/src/components/Navigation/Header.tsx
@@ -1,4 +1,4 @@
-import { Image, ImageField, Placeholder } from '@sitecore-jss/sitecore-jss-nextjs';
+import { ImageField, NextImage, Placeholder } from '@sitecore-jss/sitecore-jss-nextjs';
 import { ComponentProps } from 'lib/component-props';
 import React from 'react';
 
@@ -35,7 +35,7 @@ export const WithLogoImage = (props: WithImageProps): JSX.Element => {
       <div className={`container container-${props.params?.ContainerWidth?.toLowerCase()}-fluid`}>
         <div className="row align-items-center">
           <div className="col-auto">
-            <Image field={props.fields.LogoImage} />
+            <NextImage field={props.fields.LogoImage} width={200} height={50} />
           </div>
           <div className="col">
             <Placeholder name="header-right" rendering={props.rendering} />

diff --git a/src/sxastarter/src/components/NonSitecore/IconAccent.tsx b/src/sxastarter/src/components/NonSitecore/IconAccent.tsx
@@ -1,4 +1,4 @@
-import { ImageField, Image } from '@sitecore-jss/sitecore-jss-nextjs';
+import { ImageField, NextImage } from '@sitecore-jss/sitecore-jss-nextjs';
 
 export const IconAccent = ({
   image,
@@ -9,7 +9,7 @@ export const IconAccent = ({
 }): JSX.Element => {
   return (
     <div className={`icon-accent ${inverted ? 'inverted' : ''}`}>
-      <Image field={image} />
+      <NextImage field={image} width={32} height={32} />
     </div>
   );
 };
diff --git a/src/sxastarter/src/components/PageContent/Accordion.tsx b/src/sxastarter/src/components/PageContent/Accordion.tsx
@@ -1,5 +1,5 @@
 import React, { useState } from 'react';
-import { Field, Image, ImageField, RichText, Text } from '@sitecore-jss/sitecore-jss-nextjs';
+import { Field, ImageField, NextImage, RichText, Text } from '@sitecore-jss/sitecore-jss-nextjs';
 
 interface AccordionItemFields {
   Icon: ImageField;
@@ -30,7 +30,7 @@ const AccordionItem = ({ item }: { item: AccordionItemProps }): JSX.Element => {
         className={`button-clear-appearance ${isExpanded ? 'expanded' : ''}`}
       >
         <div className="icon-wrapper">
-          <Image field={item.fields.Icon} />
+          <NextImage field={item.fields.Icon} width={32} height={32} />
         </div>
         <h3 className="display-6 fw-bold mb-0">
           <Text field={item.fields.Title} />

diff --git a/src/sxastarter/src/components/PageContent/AppPromo.tsx b/src/sxastarter/src/components/PageContent/AppPromo.tsx
@@ -2,11 +2,11 @@ import React from 'react';
 import {
   Field,
   ImageField,
-  Image,
   RichTextField,
   Text,
   RichText,
   useSitecoreContext,
+  NextImage,
 } from '@sitecore-jss/sitecore-jss-nextjs';
 import { useParallax } from 'react-scroll-parallax';
 
@@ -45,14 +45,17 @@ export const Default = (props: AppPromoProps): JSX.Element => {
             </div>
           </div>
           <div className="col-md-10 mx-auto col-lg-6 image-wrapper">
-            <Image
+            <NextImage
               field={props.fields.Image}
               className={`${isPageEditing ? 'd-block' : 'd-none'} mx-lg-auto img-fluid`}
-            ></Image>
+              width={700}
+              height={700}
+            />
             <img
               src={props.fields.Image.value?.src}
               alt={props.fields.Image.value?.alt as string}
               ref={parallaxImg.ref}
+              loading="lazy"
               className={`${isPageEditing ? 'd-none' : 'd-block'} mx-lg-auto img-fluid`}
               style={{ transformOrigin: 'bottom' }}
             ></img>

diff --git a/src/sxastarter/src/components/PageContent/ArticleDetails.tsx b/src/sxastarter/src/components/PageContent/ArticleDetails.tsx
@@ -4,9 +4,9 @@ import {
   ImageField,
   Placeholder,
   Text,
-  Image,
   RichText,
   RichTextField,
+  NextImage,
 } from '@sitecore-jss/sitecore-jss-nextjs';
 import { ComponentProps } from 'lib/component-props';
 import { ParallaxBackgroundImage } from 'components/NonSitecore/ParallaxBackgroundImage';
@@ -45,7 +45,12 @@ export const Default = (props: PageBackgroundProps): JSX.Element => {
             <div className="article-content">
               <div className="row row-gap-4 gx-5">
                 <div className="col-12 col-lg-6">
-                  <Image field={props.fields.Thumbnail} className="article-img img-fluid" />
+                  <NextImage
+                    field={props.fields.Thumbnail}
+                    className="article-img img-fluid"
+                    width={600}
+                    height={400}
+                  />
                 </div>
                 <div className="col-12 col-lg-6">
                   <div className="row">
@@ -87,7 +92,12 @@ export const Simple = (props: PageBackgroundProps): JSX.Element => {
         </h1>
       </div>
       <div className="container container-widest-fluid">
-        <Image field={props.fields.Thumbnail} className="article-img img-fluid" />
+        <NextImage
+          field={props.fields.Thumbnail}
+          className="article-img img-fluid"
+          width={1650}
+          height={750}
+        />
       </div>
       <div className="container">
         <div className="article-content">

diff --git a/src/sxastarter/src/components/PageContent/ArticleList.tsx b/src/sxastarter/src/components/PageContent/ArticleList.tsx
@@ -4,10 +4,10 @@ import {
   ComponentRendering,
   Field,
   ImageField,
-  Image,
   Text,
   RichTextField,
   withDatasourceCheck,
+  NextImage,
 } from '@sitecore-jss/sitecore-jss-nextjs';
 import Link from 'next/link';
 import { useI18n } from 'next-localization';
@@ -67,7 +67,7 @@ const ArticleListDefault = (props: ArticleListComponentProps): JSX.Element => {
                 }`}
               >
                 <div className="col-lg-4">
-                  <Image field={item.fields.Thumbnail} />
+                  <NextImage field={item.fields.Thumbnail} width={400} height={300} />
                 </div>
 
                 <div className="col-lg-8">
@@ -107,7 +107,7 @@ const ArticleListThreeColumn = (props: ArticleListComponentProps): JSX.Element =
           {newsItems?.map((item) => (
             <div className="col-lg-4" key={item.url}>
               <Link href={item.url} className="wrapper-link">
-                <Image field={item.fields.Thumbnail} />
+                <NextImage field={item.fields.Thumbnail} width={400} height={300} />
                 <h3 className="fs-4 mt-3">
                   <Text field={item.fields.Title}></Text>
                 </h3>
@@ -148,7 +148,7 @@ const ArticleListSimplified = (props: ArticleListComponentProps): JSX.Element =>
             <React.Fragment key={item.url}>
               <div className="row gx-5 row-gap-3 align-items-center">
                 <div className="col-lg-4">
-                  <Image field={item.fields.Thumbnail} />
+                  <NextImage field={item.fields.Thumbnail} width={400} height={300} />
                 </div>
 
                 <div className="col-lg-6">
@@ -186,7 +186,7 @@ const ArticleListGrid = (props: ArticleListComponentProps): JSX.Element => {
           {newsItems?.map((item) => (
             <div className="article-grid-item" key={item.url}>
               <Link href={item.url} className="wrapper-link">
-                <Image field={item.fields.Thumbnail} />
+                <NextImage field={item.fields.Thumbnail} width={800} height={400} />
                 <h3 className="fs-4 mt-3">
                   <Text field={item.fields.Title}></Text>
                 </h3>

diff --git a/src/sxastarter/src/components/PageContent/AuthorDetails.tsx b/src/sxastarter/src/components/PageContent/AuthorDetails.tsx
@@ -4,9 +4,9 @@ import {
   ImageField,
   Placeholder,
   Text,
-  Image,
   RichText,
   RichTextField,
+  NextImage,
 } from '@sitecore-jss/sitecore-jss-nextjs';
 import { ComponentProps } from 'lib/component-props';
 import { ParallaxBackgroundImage } from 'components/NonSitecore/ParallaxBackgroundImage';
@@ -42,7 +42,12 @@ export const Default = (props: PageBackgroundProps): JSX.Element => {
             <div className="">
               <div className="row row-gap-4 gx-5">
                 <div className="col-12 col-lg-5">
-                  <Image field={props.fields.Photo} className="author-img" />
+                  <NextImage
+                    field={props.fields.Photo}
+                    className="author-img"
+                    width={500}
+                    height={500}
+                  />
                 </div>
                 <div className="col-12 col-lg-7">
                   <h1 className="author-name display-5 fw-bold">
@@ -91,7 +96,12 @@ export const Simple = (props: PageBackgroundProps): JSX.Element => {
             </div>
           </div>
           <div className="img-col col-lg-4">
-            <Image field={props.fields.Photo} className="author-img img-fluid" />
+            <NextImage
+              field={props.fields.Photo}
+              className="author-img img-fluid"
+              width={500}
+              height={500}
+            />
           </div>
         </div>
       </div>

diff --git a/src/sxastarter/src/components/PageContent/AuthorList.tsx b/src/sxastarter/src/components/PageContent/AuthorList.tsx
@@ -4,12 +4,12 @@ import {
   ComponentRendering,
   Field,
   ImageField,
-  Image,
   Text,
   withDatasourceCheck,
   RichTextField,
   RichText,
   useSitecoreContext,
+  NextImage,
 } from '@sitecore-jss/sitecore-jss-nextjs';
 import Link from 'next/link';
 import { useI18n } from 'next-localization';
@@ -59,7 +59,7 @@ const AuthorListDefault = (props: AuthorListComponentProps): JSX.Element => {
                 }`}
               >
                 <div className="col-lg-4">
-                  <Image field={author.fields.Photo} />
+                  <NextImage field={author.fields.Photo} width={400} height={300} />
                 </div>
                 <div className="col-lg-8">
                   <h3 className="fs-3 mb-0">
@@ -121,7 +121,7 @@ const AuthorListSlider = (props: AuthorListComponentProps): JSX.Element => {
           {authors?.map((author) => (
             <SwiperSlide key={author.url}>
               <Link href={author.url} className="wrapper-link">
-                <Image field={author.fields.Photo} />
+                <NextImage field={author.fields.Photo} width={300} height={300} />
                 <h3 className="fs-4 mt-4">
                   <Text field={author.fields.Name}></Text>
                 </h3>
@@ -154,7 +154,7 @@ const AuthorListSimple = (props: AuthorListComponentProps): JSX.Element => {
           {authors?.map((author) => (
             <div key={author.url} className="col-sm-5 col-lg-3">
               <div>
-                <Image field={author.fields.Photo} />
+                <NextImage field={author.fields.Photo} width={300} height={300} />
               </div>
               <div>
                 <h3 className="fs-4 mt-4 mb-1">

diff --git a/src/sxastarter/src/components/PageContent/AuthorWidget.tsx b/src/sxastarter/src/components/PageContent/AuthorWidget.tsx
@@ -2,13 +2,13 @@ import React from 'react';
 import {
   Field,
   ImageField,
-  Image,
   Text,
   withDatasourceCheck,
   ComponentParams,
   ComponentRendering,
   LinkField,
   Link,
+  NextImage,
 } from '@sitecore-jss/sitecore-jss-nextjs';
 
 interface Fields {
@@ -39,7 +39,7 @@ const AuthorWidgetDefault = (props: AuthorWidgetProps): JSX.Element => {
     >
       <div className="author-card row g-0">
         <div className="col-auto">
-          <Image field={props.fields.Photo} className="author-img" />
+          <NextImage field={props.fields.Photo} className="author-img" width={48} height={48} />
         </div>
         <div className="col">
           <h6 className="author-name">
@@ -64,7 +64,7 @@ const AuthorWidgetWithSocials = (props: AuthorWidgetProps): JSX.Element => {
     >
       <div className="author-card row g-0">
         <div className="col-auto">
-          <Image field={props.fields.Photo} className="author-img" />
+          <NextImage field={props.fields.Photo} className="author-img" width={80} height={80} />
         </div>
         <div className="col">
           <h6 className="author-name">
@@ -77,13 +77,13 @@ const AuthorWidgetWithSocials = (props: AuthorWidgetProps): JSX.Element => {
         <div className="col-12 col-md-auto">
           <div className="social-links">
             <Link field={props.fields?.SocialLink1}>
-              <Image field={props.fields?.SocialIcon1} />
+              <NextImage field={props.fields?.SocialIcon1} width={16} height={16} />
             </Link>
             <Link field={props.fields?.SocialLink2}>
-              <Image field={props.fields?.SocialIcon2} />
+              <NextImage field={props.fields?.SocialIcon2} width={16} height={16} />
             </Link>
             <Link field={props.fields?.SocialLink3}>
-              <Image field={props.fields?.SocialIcon3} />
+              <NextImage field={props.fields?.SocialIcon3} width={16} height={16} />
             </Link>
           </div>
         </div>

diff --git a/src/sxastarter/src/components/PageContent/Carousel.tsx b/src/sxastarter/src/components/PageContent/Carousel.tsx
@@ -4,13 +4,13 @@ import {
   ComponentRendering,
   Field,
   ImageField,
-  Image,
   RichTextField,
   LinkField,
   Text,
   Link,
   RichText,
   useSitecoreContext,
+  NextImage,
 } from '@sitecore-jss/sitecore-jss-nextjs';
 
 interface Fields {
@@ -69,11 +69,12 @@ export const Default = (props: CarouselComponentProps): JSX.Element => {
                 <source src={item.fields.Video.value.src} type="video/webm" />
               </video>
             ) : (
-              <Image
+              <NextImage
                 field={item.fields.Image}
                 className="object-fit-cover d-block w-100 h-100"
-                height={' '}
-              ></Image>
+                width={1920}
+                height={800}
+              />
             )}
 
             <div className="side-content">