Adjustments to the the image component #1752 (#2233)

* ✨ Adjustments to the the image component #1752 * Fix types #1752 --------- Co-authored-by: Padmaja <[email protected]>
equinor · Apr 19, 2024 · cc394c2 · cc394c2
1 parent c28c43f
commit cc394c2
Show file tree

Hide file tree

Showing 6 changed files with 38 additions and 34 deletions.
diff --git a/sanityv3/schemas/objects/figure.tsx b/sanityv3/schemas/objects/figure.tsx
@@ -21,6 +21,18 @@ export default {
     },
   ],
   fields: [
+    {
+      name: 'aspectRatio',
+      type: 'string',
+      title: 'Aspect ratio',
+      options: {
+        list: [
+          { title: 'original', value: 'original' },
+          { title: '16:9', value: '16:9' },
+        ],
+      },
+      initialValue: '16:9',
+    },
     {
       name: 'figure',
       title: 'Image',

diff --git a/web/lib/queries/common/pageContentFields.ts b/web/lib/queries/common/pageContentFields.ts
@@ -102,14 +102,9 @@ _type == "keyNumbers" =>{
   _type == "figure"=>{
     "type": _type,
     "id": _key,
-      // For these images, we don't want crop and hotspot
-  // because we don't know the aspect ratio
     "figure": figure{
       _type,
-        "image": {
-          "asset": image.asset,
-          "alt": image.alt,
-        },
+      image,
       attribution,
       caption
     },

diff --git a/web/pageComponents/shared/Hero/FiftyFiftyHero.tsx b/web/pageComponents/shared/Hero/FiftyFiftyHero.tsx
@@ -63,14 +63,7 @@ export const FiftyFiftyHero = ({ title, ingress, link, background, figure, isBig
       <StyledHero background={{ backgroundColor: background }}>
         <StyledMedia>
           {figure && (
-            <Image
-              maxWidth={4096}
-              sizes="(min-width: 760px) 50vw, 100vw"
-              image={figure.image}
-              fill
-              style={{ objectFit: 'cover' }}
-              priority
-            />
+            <Image maxWidth={4096} sizes="(max-width: 800px) 100vw, 800px" image={figure.image} fill priority />
           )}
         </StyledMedia>
         <StyledContent>

diff --git a/web/pageComponents/shared/SanityImage.tsx b/web/pageComponents/shared/SanityImage.tsx
@@ -22,15 +22,7 @@ export enum Ratios {
 const DEFAULT_SIZES = '(max-width: 800px) 100vw, 800px'
 const DEFAULT_MAX_WIDTH = 1440
 
-const Image = ({
-  image,
-  aspectRatio,
-  sizes = DEFAULT_SIZES,
-  maxWidth = DEFAULT_MAX_WIDTH,
-  fill,
-  style,
-  ...rest
-}: Props) => {
+const Image = ({ image, aspectRatio, sizes = DEFAULT_SIZES, maxWidth = DEFAULT_MAX_WIDTH, fill, ...rest }: Props) => {
   const imageProps = useSanityLoader(image, maxWidth, aspectRatio)
   if (!image?.asset) return <></>
   const { width, height, src } = imageProps
@@ -41,14 +33,14 @@ const Image = ({
     // Layout fill
     props = {
       fill,
-      style: { ...style, objectFit: 'cover' },
+      style: { objectFit: 'cover' },
     }
   } else {
     // Layout responsive
     props = {
       width,
       height,
-      style: { ...style, display: 'flex', width: '100%', height: 'auto' },
+      style: { display: 'flex', width: '100%', height: 'auto' },
     }
   }
 

diff --git a/web/pageComponents/topicPages/Figure.tsx b/web/pageComponents/topicPages/Figure.tsx
@@ -2,7 +2,7 @@ import type { FigureData } from '../../types/types'
 import styled from 'styled-components'
 import { BackgroundContainer, FigureCaption } from '@components'
 import { StyledTextBlockWrapper } from './TextBlock'
-import Image from '../shared/SanityImage'
+import Image, { Ratios } from '../shared/SanityImage'
 
 type TeaserProps = {
   data: FigureData
@@ -39,11 +39,21 @@ const FullWidthImage = ({ data, anchor }: TeaserProps) => {
   return (
     <StyledFigureWrapper background={designOptions?.background} id={anchor}>
       <StyledFigure>
-        <Image
-          image={image}
-          maxWidth={920}
-          sizes="(min-width: 2060px) 920px, (min-width: 440px) calc(34.56vw + 215px), calc(76.67vw + 38px)"
-        />
+        {designOptions.aspectRatio !== 'original' ? (
+          <Image
+            image={image}
+            aspectRatio={Ratios.NINE_TO_SIXTEEN}
+            maxWidth={920}
+            sizes={'(min-width: 2060px) 920px, (min-width: 440px) calc(34.56vw + 215px), calc(76.67vw + 38px)'}
+          />
+        ) : (
+          <Image
+            image={image}
+            maxWidth={920}
+            sizes={'(min-width: 2060px) 920px, (min-width: 440px) calc(34.56vw + 215px), calc(76.67vw + 38px)'}
+          />
+        )}
+
         {(caption || attribution) && (
           <FigureCaption>
             {caption && <FigureCaption.Caption>{caption}</FigureCaption.Caption>}

diff --git a/web/types/types.ts b/web/types/types.ts
@@ -284,8 +284,6 @@ export type DesignOptions = {
     backgroundUtility?: keyof ColorKeyTokens
     dark: boolean
   }
-  imagePosition?: TeaserImagePosition
-  imageSize?: TeaserImageSize
 }
 
 export type TextBlockData = {
@@ -343,6 +341,8 @@ export type TableHeaderData = {
   headerCell: PortableTextBlock[]
 }
 
+export type FigureRatio = 'original' | '9:16'
+
 export type CellData = {
   id: string
   type: LinkType | 'richText'
@@ -399,7 +399,9 @@ export type FigureData = {
   type: string
   id: string
   figure: ImageWithCaptionData
-  designOptions: DesignOptions
+  designOptions: DesignOptions & {
+    aspectRatio?: FigureRatio
+  }
 }
 
 export type TextWithIconItem = {