Use next/image component for campaign images (#1580)

* ActiveCampaignCard: Use next/image to display card image * CampaignCard: Use next/image component for card image * ActiveCampaignCard: Fix layout on smaller widths * CompletedCampaignsSection: Use next/image component for card image * Run linting
podkrepi-bg · Sep 10, 2023 · 3fd002c · 3fd002c
1 parent 5e7ef07
commit 3fd002c
Show file tree

Hide file tree

Showing 3 changed files with 55 additions and 42 deletions.
diff --git a/src/components/client/campaigns/CampaignCard/CampaignCard.tsx b/src/components/client/campaigns/CampaignCard/CampaignCard.tsx
@@ -2,7 +2,7 @@ import { useMemo } from 'react'
 import { useTranslation, i18n } from 'next-i18next'
 import { CampaignResponse } from 'gql/campaigns'
 
-import { CardMedia } from '@mui/material'
+import { Box, CardMedia } from '@mui/material'
 
 import { routes } from 'common/routes'
 import { campaignListPictureUrl } from 'common/util/campaignImageUrls'
@@ -23,6 +23,7 @@ import {
   SumNumber,
   SumWrapper,
 } from '../../index/sections/ActiveCampaignsSection/ActiveCampaignCard/ActiveCampaignCard.styled'
+import Image from 'next/image'
 
 type Props = { campaign: CampaignResponse; index: number }
 
@@ -47,26 +48,24 @@ export default function ActiveCampaignCard({ campaign, index }: Props) {
 
   return (
     <Root data-testid={`campaign-card-${index}`}>
-      <Link href={routes.campaigns.viewCampaignBySlug(slug)} sx={{ position: 'relative' }}>
-        <CardMedia
-          component="img"
-          height="100%"
-          image={campaignImagesUrl}
-          alt={title}
+      <Link href={routes.campaigns.viewCampaignBySlug(slug)}>
+        <Box
+          position={'relative'}
           sx={{
-            maxHeight: theme.spacing(42.5),
-
-            [theme.breakpoints.up('lg')]: {
-              aspectRatio: '2',
-              height: theme.spacing(22.3),
-              maxHeight: 'inherit',
-            },
-
-            [theme.breakpoints.up(1430)]: {
-              height: theme.spacing(27.9),
-            },
-          }}
-        />
+            width: '100%',
+            aspectRatio: 1.5,
+            maxHeight: theme.spacing(27.9),
+          }}>
+          <Image
+            priority
+            src={campaignImagesUrl}
+            alt={title}
+            fill
+            sizes="(min-width: 2000px) 312px, (min-width: 1200px) calc(30vw - 38px), (min-width: 900px) calc(40.57vw - 29px), (min-width: 600px) calc(50vw - 28px), calc(100vw - 32px)"
+            quality={index === 0 ? 100 : 75}
+            style={{ objectFit: 'cover' }}
+          />
+        </Box>
         {campaignState === CampaignState.complete && percentage >= 100 ? (
           <SuccessfullCampaignTag />
         ) : (

diff --git a/...ts/client/index/sections/ActiveCampaignsSection/ActiveCampaignCard/ActiveCampaignCard.tsx b/...ts/client/index/sections/ActiveCampaignsSection/ActiveCampaignCard/ActiveCampaignCard.tsx
@@ -1,14 +1,15 @@
 import { useTranslation, i18n } from 'next-i18next'
 import { CampaignResponse } from 'gql/campaigns'
 
-import { CardMedia } from '@mui/material'
+import { Box, CardMedia } from '@mui/material'
 
 import Link from 'components/common/Link'
 import CampaignProgress from 'components/client/campaigns/CampaignProgress'
 import theme from 'common/theme'
 import { routes } from 'common/routes'
 import { campaignListPictureUrl } from 'common/util/campaignImageUrls'
 import { moneyPublic } from 'common/util/money'
+import Image from 'next/image'
 
 import {
   CampaignTitle,
@@ -34,26 +35,32 @@ export default function ActiveCampaignCard({ campaign, index }: Props) {
 
   return (
     <Root data-testid={`completed-campaign-${index}`}>
-      <Link href={routes.campaigns.viewCampaignBySlug(slug)} sx={{ position: 'relative' }}>
-        <CardMedia
-          component="img"
-          height="100%"
-          image={campaignImagesUrl}
-          alt={title}
+      <Link href={routes.campaigns.viewCampaignBySlug(slug)}>
+        <Box
+          position={'relative'}
           sx={{
-            maxHeight: theme.spacing(42.5),
-
+            // aspectRatio: 4 / 3,
+            // [theme.breakpoints.up('lg')]: {
+            //   aspectRatio: 0,
+            //   height: index === 0 ? theme.spacing(71.6) : theme.spacing(27.85),
+            // },
+            width: '100%',
+            aspectRatio: 1.5,
             [theme.breakpoints.up('lg')]: {
-              aspectRatio: '2',
-              height: theme.spacing(22.3),
-              maxHeight: 'inherit',
-            },
-
-            [theme.breakpoints.up(1430)]: {
-              height: theme.spacing(27.9),
+              maxHeight: index === 0 ? theme.spacing(71.6) : theme.spacing(27.85),
+              aspectRatio: index === 0 ? 1.24 : 1.55,
             },
-          }}
-        />
+          }}>
+          <Image
+            priority
+            src={campaignImagesUrl}
+            alt={title}
+            fill
+            sizes="(min-width: 2000px) 312px, (min-width: 1200px) calc(30vw - 38px), (min-width: 900px) calc(40.57vw - 29px), (min-width: 600px) calc(50vw - 28px), calc(100vw - 32px)"
+            quality={index === 0 ? 100 : 75}
+            style={{ objectFit: 'cover' }}
+          />
+        </Box>
         <StyledContent>
           <SumWrapper>
             <Sum>

diff --git a/src/components/client/index/sections/CompletedCampaignsSection/CompletedCampaignsSection.tsx b/src/components/client/index/sections/CompletedCampaignsSection/CompletedCampaignsSection.tsx
@@ -26,6 +26,8 @@ import {
   SuccessfullCampiagnText,
 } from './CompletedCampaignsSection.styled'
 
+import Image from 'next/image'
+
 export default function CompletedCampaignsSection() {
   const { t } = useTranslation('campaigns')
   const { data } = useCampaignList()
@@ -51,10 +53,15 @@ export default function CompletedCampaignsSection() {
             <CompletedCampaignLink
               onMouseDown={onLinkMouseDown}
               href={routes.campaigns.viewCampaignBySlug(campaign.slug)}
-              sx={{
-                background: `url(${campaignListPictureUrl(campaign)})`,
-              }}
-            />
+              sx={{ position: 'relative', aspectRatio: 1, height: (theme) => theme.spacing(37.5) }}>
+              <Image
+                fill
+                alt={campaign.title}
+                src={campaignListPictureUrl(campaign)}
+                sizes="(min-width: 2000px) 312px, (min-width: 1200px) calc(30vw - 38px), (min-width: 900px) calc(40.57vw - 29px), (min-width: 600px) calc(50vw - 28px), calc(100vw - 32px)"
+                style={{ objectFit: 'cover' }}
+              />
+            </CompletedCampaignLink>
             <CompletedSumWrapper>
               <Sum>
                 {i18n.language === 'bg'