Merge branch 'malj/1752-2' into staging

equinor · Apr 11, 2024 · c9544b0 · c9544b0
2 parents 1169af7 + 095145e
commit c9544b0
Show file tree

Hide file tree

Showing 7 changed files with 38 additions and 33 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
@@ -1,6 +1,6 @@
 import type { FigureData } from '../../types/types'
 import { BackgroundContainer, FigureCaption } from '@components'
-import Image from '../shared/SanityImage'
+import Image, { Ratios } from '../shared/SanityImage'
 
 type TeaserProps = {
   data: FigureData
@@ -24,11 +24,21 @@ const FullWidthImage = ({ data, anchor, className }: TeaserProps) => {
       renderFragmentWhenPossible
     >
       <figure className="pb-page-content px-layout-lg max-w-viewport mx-auto">
-        <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/tsconfig.json b/web/tsconfig.json
@@ -12,7 +12,7 @@
       "@components/*": ["components/src/*"],
       "@utils/*": ["components/utils/*"],
       "@components": ["components/src"],
-      "@utils": ["components/utils"]
+      "@utils": ["components/utils"],
     },
     "incremental": true,
     "plugins": [
@@ -21,6 +21,6 @@
       }
     ]
   },
-  "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", "jest-setup.ts", ".next/types/**/*.ts"],
+  "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", "jest-setup.ts"],
   "exclude": ["node_modules", "pages-disabled/*.tsx"]
 }
diff --git a/web/types/types.ts b/web/types/types.ts
@@ -286,6 +286,7 @@ export type DesignOptions = {
   }
   imagePosition?: TeaserImagePosition
   imageSize?: TeaserImageSize
+  aspectRatio?: FigureRatio
 }
 
 export type TextBlockData = {
@@ -343,6 +344,8 @@ export type TableHeaderData = {
   headerCell: PortableTextBlock[]
 }
 
+export type FigureRatio = 'original' | '9:16'
+
 export type CellData = {
   id: string
   type: LinkType | 'richText'