Merge branch 'malj/1752' into staging

equinor · Mar 12, 2024 · b839f3b · b839f3b
2 parents a0ef789 + 8249dfa
commit b839f3b
Show file tree

Hide file tree

Showing 6 changed files with 31 additions and 32 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,19 +102,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}
+      "aspectRatio": coalesce(aspectRatio, '16:9'),
     },
   },
   _type == "textWithIconArray"=>{

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="(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,18 @@ 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
@@ -283,6 +283,7 @@ export type DesignOptions = {
   backgroundOption?: BackgroundOption
   utility: string
   dark: boolean
+  aspectRatio?: FigureRatio
 }
 
 export type TextBlockData = {
@@ -392,6 +393,8 @@ export type FullWidthVideoData = {
 
 export type FullWidthVideoRatio = 'fullScreen' | 'narrow' | '2:1'
 
+export type FigureRatio = 'original' | '9:16'
+
 export type FigureData = {
   type: string
   id: string