Merge branch 'malj/1752' into staging

equinor · Feb 2, 2024 · 0ba6db2 · 0ba6db2
2 parents d7a99a3 + e3ca10e
commit 0ba6db2
Show file tree

Hide file tree

Showing 5 changed files with 19 additions and 31 deletions.
diff --git a/web/lib/queries/common/pageContentFields.ts b/web/lib/queries/common/pageContentFields.ts
@@ -101,19 +101,15 @@ _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
     },
     "designOptions": {
       "background": coalesce(background.title, 'White'),
+      "aspectRatio": coalesce(aspectRatio, '16:9'),
     },
   },
   _type == "textWithIconArray"=>{

diff --git a/web/pageComponents/shared/Hero/FiftyFiftyHero.tsx b/web/pageComponents/shared/Hero/FiftyFiftyHero.tsx
@@ -86,14 +86,7 @@ export const FiftyFiftyHero = ({ title, ingress, link, background, figure, isBig
       <StyledHero background={background}>
         <StyledMedia>
           {figure && (
-            <Image
-              maxWidth={4096}
-              sizes="(min-width: 760px) 50vw, 100vw"
-              image={figure.image}
-              fill
-              style={{ objectFit: 'cover' }}
-              priority
-            />
+            <Image maxWidth={4096} sizes="(min-width: 760px) 50vw, 100vw" 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
@@ -35,15 +35,19 @@ const FullWidthImage = ({ data, anchor }: TeaserProps) => {
   if (!figure?.image) return null
 
   const { image, caption, attribution } = figure
+  const { aspectRatio } = designOptions
+  // If we add more ratios, create a switch statement for the sanity ratios, for now we only have 9:16
+  const sizes = '(min-width: 2060px) 920px, (min-width: 440px) calc(34.56vw + 215px), calc(76.67vw + 38px)'
 
   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)"
-        />
+        {aspectRatio !== 'original' ? (
+          <Image image={image} aspectRatio={Ratios.NINE_TO_SIXTEEN} maxWidth={920} sizes={sizes} />
+        ) : (
+          <Image image={image} maxWidth={920} sizes={sizes} />
+        )}
+
         {(caption || attribution) && (
           <FigureCaption>
             {caption && <FigureCaption.Caption>{caption}</FigureCaption.Caption>}

diff --git a/web/types/types.ts b/web/types/types.ts
@@ -269,6 +269,7 @@ export type DesignOptions = {
   background?: BackgroundColours
   imagePosition?: TeaserImagePosition
   imageSize?: TeaserImageSize
+  aspectRatio?: FigureRatio
 }
 
 export type TextBlockData = {
@@ -376,6 +377,8 @@ export type FullWidthVideoData = {
 
 export type FullWidthVideoRatio = 'fullScreen' | 'narrow' | '2:1'
 
+export type FigureRatio = 'original' | '9:16'
+
 export type FigureData = {
   type: string
   id: string