Skip to content

Commit 3d0d653

Browse files
adoprogadoprog
authored
Merge pull request #248 from Sitecore/develop
AB#9474 Use NextImage instead of Image (#247)
2 parents ed4d501 + 446fd39 commit 3d0d653

30 files changed

+160
-92
lines changed

‎src/items/sxa-media/Project/Verticals/Financial/Home page/Carousels/Default/finance-default-carousel-image.yml

+7-7
Large diffs are not rendered by default.

‎src/sxastarter/next.config.js

+2-1
Original file line numberDiff line numberDiff line change
@@ -56,7 +56,8 @@ const nextConfig = {
5656
hostname: 'feaas*.blob.core.windows.net',
5757
port: '',
5858
},
59-
]
59+
],
60+
dangerouslyAllowSVG: true,
6061
},
6162

6263
async rewrites() {

‎src/sxastarter/src/components/Navigation/Footer.tsx

+16-6
Original file line numberDiff line numberDiff line change
@@ -2,12 +2,12 @@ import React from 'react';
22
import {
33
Field,
44
ImageField,
5-
Image,
65
LinkField,
76
Link,
87
Text,
98
RichTextField,
109
RichText,
10+
NextImage,
1111
} from '@sitecore-jss/sitecore-jss-nextjs';
1212

1313
interface Fields {
@@ -48,7 +48,12 @@ export const Default = (props: FooterProps): JSX.Element => {
4848
<div className="container">
4949
<div className="content">
5050
<div className="logo">
51-
<Image field={props.fields?.Image1} height={' '} className="img-fluid" />
51+
<NextImage
52+
field={props.fields?.Image1}
53+
width={200}
54+
height={200}
55+
className="img-fluid"
56+
/>
5257
</div>
5358
<div className="row row-cols-1 row-cols-sm-2 row-cols-xl-4 row-gap-5 gx-5">
5459
<div className="col">
@@ -109,7 +114,12 @@ export const WithSocials = (props: FooterProps): JSX.Element => {
109114
<div className="container">
110115
<div className="content">
111116
<div className="logo">
112-
<Image field={props.fields?.Image1} height={' '} className="img-fluid" />
117+
<NextImage
118+
field={props.fields?.Image1}
119+
width={200}
120+
height={200}
121+
className="img-fluid"
122+
/>
113123
</div>
114124
<div className="row row-cols-1 row-cols-md-3 row-gap-5 gx-5">
115125
<div className="col">
@@ -134,13 +144,13 @@ export const WithSocials = (props: FooterProps): JSX.Element => {
134144
</div>
135145
<div className="links links-socials">
136146
<Link field={props.fields?.SocialLink1}>
137-
<Image field={props.fields?.SocialIcon1} />
147+
<NextImage field={props.fields?.SocialIcon1} width={16} height={16} />
138148
</Link>
139149
<Link field={props.fields?.SocialLink2}>
140-
<Image field={props.fields?.SocialIcon2} />
150+
<NextImage field={props.fields?.SocialIcon2} width={16} height={16} />
141151
</Link>
142152
<Link field={props.fields?.SocialLink3}>
143-
<Image field={props.fields?.SocialIcon3} />
153+
<NextImage field={props.fields?.SocialIcon3} width={16} height={16} />
144154
</Link>
145155
</div>
146156
</div>

‎src/sxastarter/src/components/Navigation/Header.tsx

+2-2
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import { Image, ImageField, Placeholder } from '@sitecore-jss/sitecore-jss-nextjs';
1+
import { ImageField, NextImage, Placeholder } from '@sitecore-jss/sitecore-jss-nextjs';
22
import { ComponentProps } from 'lib/component-props';
33
import React from 'react';
44

@@ -35,7 +35,7 @@ export const WithLogoImage = (props: WithImageProps): JSX.Element => {
3535
<div className={`container container-${props.params?.ContainerWidth?.toLowerCase()}-fluid`}>
3636
<div className="row align-items-center">
3737
<div className="col-auto">
38-
<Image field={props.fields.LogoImage} />
38+
<NextImage field={props.fields.LogoImage} width={200} height={50} />
3939
</div>
4040
<div className="col">
4141
<Placeholder name="header-right" rendering={props.rendering} />

‎src/sxastarter/src/components/NonSitecore/IconAccent.tsx

+2-2
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import { ImageField, Image } from '@sitecore-jss/sitecore-jss-nextjs';
1+
import { ImageField, NextImage } from '@sitecore-jss/sitecore-jss-nextjs';
22

33
export const IconAccent = ({
44
image,
@@ -9,7 +9,7 @@ export const IconAccent = ({
99
}): JSX.Element => {
1010
return (
1111
<div className={`icon-accent ${inverted ? 'inverted' : ''}`}>
12-
<Image field={image} />
12+
<NextImage field={image} width={32} height={32} />
1313
</div>
1414
);
1515
};

‎src/sxastarter/src/components/PageContent/Accordion.tsx

+2-2
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
import React, { useState } from 'react';
2-
import { Field, Image, ImageField, RichText, Text } from '@sitecore-jss/sitecore-jss-nextjs';
2+
import { Field, ImageField, NextImage, RichText, Text } from '@sitecore-jss/sitecore-jss-nextjs';
33

44
interface AccordionItemFields {
55
Icon: ImageField;
@@ -30,7 +30,7 @@ const AccordionItem = ({ item }: { item: AccordionItemProps }): JSX.Element => {
3030
className={`button-clear-appearance ${isExpanded ? 'expanded' : ''}`}
3131
>
3232
<div className="icon-wrapper">
33-
<Image field={item.fields.Icon} />
33+
<NextImage field={item.fields.Icon} width={32} height={32} />
3434
</div>
3535
<h3 className="display-6 fw-bold mb-0">
3636
<Text field={item.fields.Title} />

‎src/sxastarter/src/components/PageContent/AppPromo.tsx

+6-3
Original file line numberDiff line numberDiff line change
@@ -2,11 +2,11 @@ import React from 'react';
22
import {
33
Field,
44
ImageField,
5-
Image,
65
RichTextField,
76
Text,
87
RichText,
98
useSitecoreContext,
9+
NextImage,
1010
} from '@sitecore-jss/sitecore-jss-nextjs';
1111
import { useParallax } from 'react-scroll-parallax';
1212

@@ -45,14 +45,17 @@ export const Default = (props: AppPromoProps): JSX.Element => {
4545
</div>
4646
</div>
4747
<div className="col-md-10 mx-auto col-lg-6 image-wrapper">
48-
<Image
48+
<NextImage
4949
field={props.fields.Image}
5050
className={`${isPageEditing ? 'd-block' : 'd-none'} mx-lg-auto img-fluid`}
51-
></Image>
51+
width={700}
52+
height={700}
53+
/>
5254
<img
5355
src={props.fields.Image.value?.src}
5456
alt={props.fields.Image.value?.alt as string}
5557
ref={parallaxImg.ref}
58+
loading="lazy"
5659
className={`${isPageEditing ? 'd-none' : 'd-block'} mx-lg-auto img-fluid`}
5760
style={{ transformOrigin: 'bottom' }}
5861
></img>

‎src/sxastarter/src/components/PageContent/ArticleDetails.tsx

+13-3
Original file line numberDiff line numberDiff line change
@@ -4,9 +4,9 @@ import {
44
ImageField,
55
Placeholder,
66
Text,
7-
Image,
87
RichText,
98
RichTextField,
9+
NextImage,
1010
} from '@sitecore-jss/sitecore-jss-nextjs';
1111
import { ComponentProps } from 'lib/component-props';
1212
import { ParallaxBackgroundImage } from 'components/NonSitecore/ParallaxBackgroundImage';
@@ -45,7 +45,12 @@ export const Default = (props: PageBackgroundProps): JSX.Element => {
4545
<div className="article-content">
4646
<div className="row row-gap-4 gx-5">
4747
<div className="col-12 col-lg-6">
48-
<Image field={props.fields.Thumbnail} className="article-img img-fluid" />
48+
<NextImage
49+
field={props.fields.Thumbnail}
50+
className="article-img img-fluid"
51+
width={600}
52+
height={400}
53+
/>
4954
</div>
5055
<div className="col-12 col-lg-6">
5156
<div className="row">
@@ -87,7 +92,12 @@ export const Simple = (props: PageBackgroundProps): JSX.Element => {
8792
</h1>
8893
</div>
8994
<div className="container container-widest-fluid">
90-
<Image field={props.fields.Thumbnail} className="article-img img-fluid" />
95+
<NextImage
96+
field={props.fields.Thumbnail}
97+
className="article-img img-fluid"
98+
width={1650}
99+
height={750}
100+
/>
91101
</div>
92102
<div className="container">
93103
<div className="article-content">

‎src/sxastarter/src/components/PageContent/ArticleList.tsx

+5-5
Original file line numberDiff line numberDiff line change
@@ -4,10 +4,10 @@ import {
44
ComponentRendering,
55
Field,
66
ImageField,
7-
Image,
87
Text,
98
RichTextField,
109
withDatasourceCheck,
10+
NextImage,
1111
} from '@sitecore-jss/sitecore-jss-nextjs';
1212
import Link from 'next/link';
1313
import { useI18n } from 'next-localization';
@@ -67,7 +67,7 @@ const ArticleListDefault = (props: ArticleListComponentProps): JSX.Element => {
6767
}`}
6868
>
6969
<div className="col-lg-4">
70-
<Image field={item.fields.Thumbnail} />
70+
<NextImage field={item.fields.Thumbnail} width={400} height={300} />
7171
</div>
7272

7373
<div className="col-lg-8">
@@ -107,7 +107,7 @@ const ArticleListThreeColumn = (props: ArticleListComponentProps): JSX.Element =
107107
{newsItems?.map((item) => (
108108
<div className="col-lg-4" key={item.url}>
109109
<Link href={item.url} className="wrapper-link">
110-
<Image field={item.fields.Thumbnail} />
110+
<NextImage field={item.fields.Thumbnail} width={400} height={300} />
111111
<h3 className="fs-4 mt-3">
112112
<Text field={item.fields.Title}></Text>
113113
</h3>
@@ -148,7 +148,7 @@ const ArticleListSimplified = (props: ArticleListComponentProps): JSX.Element =>
148148
<React.Fragment key={item.url}>
149149
<div className="row gx-5 row-gap-3 align-items-center">
150150
<div className="col-lg-4">
151-
<Image field={item.fields.Thumbnail} />
151+
<NextImage field={item.fields.Thumbnail} width={400} height={300} />
152152
</div>
153153

154154
<div className="col-lg-6">
@@ -186,7 +186,7 @@ const ArticleListGrid = (props: ArticleListComponentProps): JSX.Element => {
186186
{newsItems?.map((item) => (
187187
<div className="article-grid-item" key={item.url}>
188188
<Link href={item.url} className="wrapper-link">
189-
<Image field={item.fields.Thumbnail} />
189+
<NextImage field={item.fields.Thumbnail} width={800} height={400} />
190190
<h3 className="fs-4 mt-3">
191191
<Text field={item.fields.Title}></Text>
192192
</h3>

‎src/sxastarter/src/components/PageContent/AuthorDetails.tsx

+13-3
Original file line numberDiff line numberDiff line change
@@ -4,9 +4,9 @@ import {
44
ImageField,
55
Placeholder,
66
Text,
7-
Image,
87
RichText,
98
RichTextField,
9+
NextImage,
1010
} from '@sitecore-jss/sitecore-jss-nextjs';
1111
import { ComponentProps } from 'lib/component-props';
1212
import { ParallaxBackgroundImage } from 'components/NonSitecore/ParallaxBackgroundImage';
@@ -42,7 +42,12 @@ export const Default = (props: PageBackgroundProps): JSX.Element => {
4242
<div className="">
4343
<div className="row row-gap-4 gx-5">
4444
<div className="col-12 col-lg-5">
45-
<Image field={props.fields.Photo} className="author-img" />
45+
<NextImage
46+
field={props.fields.Photo}
47+
className="author-img"
48+
width={500}
49+
height={500}
50+
/>
4651
</div>
4752
<div className="col-12 col-lg-7">
4853
<h1 className="author-name display-5 fw-bold">
@@ -91,7 +96,12 @@ export const Simple = (props: PageBackgroundProps): JSX.Element => {
9196
</div>
9297
</div>
9398
<div className="img-col col-lg-4">
94-
<Image field={props.fields.Photo} className="author-img img-fluid" />
99+
<NextImage
100+
field={props.fields.Photo}
101+
className="author-img img-fluid"
102+
width={500}
103+
height={500}
104+
/>
95105
</div>
96106
</div>
97107
</div>

‎src/sxastarter/src/components/PageContent/AuthorList.tsx

+4-4
Original file line numberDiff line numberDiff line change
@@ -4,12 +4,12 @@ import {
44
ComponentRendering,
55
Field,
66
ImageField,
7-
Image,
87
Text,
98
withDatasourceCheck,
109
RichTextField,
1110
RichText,
1211
useSitecoreContext,
12+
NextImage,
1313
} from '@sitecore-jss/sitecore-jss-nextjs';
1414
import Link from 'next/link';
1515
import { useI18n } from 'next-localization';
@@ -59,7 +59,7 @@ const AuthorListDefault = (props: AuthorListComponentProps): JSX.Element => {
5959
}`}
6060
>
6161
<div className="col-lg-4">
62-
<Image field={author.fields.Photo} />
62+
<NextImage field={author.fields.Photo} width={400} height={300} />
6363
</div>
6464
<div className="col-lg-8">
6565
<h3 className="fs-3 mb-0">
@@ -121,7 +121,7 @@ const AuthorListSlider = (props: AuthorListComponentProps): JSX.Element => {
121121
{authors?.map((author) => (
122122
<SwiperSlide key={author.url}>
123123
<Link href={author.url} className="wrapper-link">
124-
<Image field={author.fields.Photo} />
124+
<NextImage field={author.fields.Photo} width={300} height={300} />
125125
<h3 className="fs-4 mt-4">
126126
<Text field={author.fields.Name}></Text>
127127
</h3>
@@ -154,7 +154,7 @@ const AuthorListSimple = (props: AuthorListComponentProps): JSX.Element => {
154154
{authors?.map((author) => (
155155
<div key={author.url} className="col-sm-5 col-lg-3">
156156
<div>
157-
<Image field={author.fields.Photo} />
157+
<NextImage field={author.fields.Photo} width={300} height={300} />
158158
</div>
159159
<div>
160160
<h3 className="fs-4 mt-4 mb-1">

‎src/sxastarter/src/components/PageContent/AuthorWidget.tsx

+6-6
Original file line numberDiff line numberDiff line change
@@ -2,13 +2,13 @@ import React from 'react';
22
import {
33
Field,
44
ImageField,
5-
Image,
65
Text,
76
withDatasourceCheck,
87
ComponentParams,
98
ComponentRendering,
109
LinkField,
1110
Link,
11+
NextImage,
1212
} from '@sitecore-jss/sitecore-jss-nextjs';
1313

1414
interface Fields {
@@ -39,7 +39,7 @@ const AuthorWidgetDefault = (props: AuthorWidgetProps): JSX.Element => {
3939
>
4040
<div className="author-card row g-0">
4141
<div className="col-auto">
42-
<Image field={props.fields.Photo} className="author-img" />
42+
<NextImage field={props.fields.Photo} className="author-img" width={48} height={48} />
4343
</div>
4444
<div className="col">
4545
<h6 className="author-name">
@@ -64,7 +64,7 @@ const AuthorWidgetWithSocials = (props: AuthorWidgetProps): JSX.Element => {
6464
>
6565
<div className="author-card row g-0">
6666
<div className="col-auto">
67-
<Image field={props.fields.Photo} className="author-img" />
67+
<NextImage field={props.fields.Photo} className="author-img" width={80} height={80} />
6868
</div>
6969
<div className="col">
7070
<h6 className="author-name">
@@ -77,13 +77,13 @@ const AuthorWidgetWithSocials = (props: AuthorWidgetProps): JSX.Element => {
7777
<div className="col-12 col-md-auto">
7878
<div className="social-links">
7979
<Link field={props.fields?.SocialLink1}>
80-
<Image field={props.fields?.SocialIcon1} />
80+
<NextImage field={props.fields?.SocialIcon1} width={16} height={16} />
8181
</Link>
8282
<Link field={props.fields?.SocialLink2}>
83-
<Image field={props.fields?.SocialIcon2} />
83+
<NextImage field={props.fields?.SocialIcon2} width={16} height={16} />
8484
</Link>
8585
<Link field={props.fields?.SocialLink3}>
86-
<Image field={props.fields?.SocialIcon3} />
86+
<NextImage field={props.fields?.SocialIcon3} width={16} height={16} />
8787
</Link>
8888
</div>
8989
</div>

‎src/sxastarter/src/components/PageContent/Carousel.tsx

+5-4
Original file line numberDiff line numberDiff line change
@@ -4,13 +4,13 @@ import {
44
ComponentRendering,
55
Field,
66
ImageField,
7-
Image,
87
RichTextField,
98
LinkField,
109
Text,
1110
Link,
1211
RichText,
1312
useSitecoreContext,
13+
NextImage,
1414
} from '@sitecore-jss/sitecore-jss-nextjs';
1515

1616
interface Fields {
@@ -69,11 +69,12 @@ export const Default = (props: CarouselComponentProps): JSX.Element => {
6969
<source src={item.fields.Video.value.src} type="video/webm" />
7070
</video>
7171
) : (
72-
<Image
72+
<NextImage
7373
field={item.fields.Image}
7474
className="object-fit-cover d-block w-100 h-100"
75-
height={' '}
76-
></Image>
75+
width={1920}
76+
height={800}
77+
/>
7778
)}
7879

7980
<div className="side-content">

0 commit comments

Comments
 (0)