Merge branch 'malj/1752' into staging

equinor · Sep 6, 2023 · bde2dde · bde2dde
2 parents 70d1deb + 6e3340e
commit bde2dde
Show file tree

Hide file tree

Showing 5 changed files with 43 additions and 13 deletions.
diff --git a/sanityv3/schemas/objects/figure.tsx b/sanityv3/schemas/objects/figure.tsx
@@ -34,6 +34,20 @@ export default {
       type: 'colorlist',
       fieldset: 'design',
     },
+    {
+      name: 'aspectRatio',
+      type: 'string',
+      title: 'Aspect ratio',
+      options: {
+        list: [
+          { title: 'original', value: 'original' },
+          { title: '16:9', value: '16:9' },
+        ],
+        layout: 'dropdown',
+      },
+      initialValue: '16:9',
+      validation: (Rule: Rule) => Rule.required(),
+    },
   ],
   preview: {
     select: {

diff --git a/studio/schemas/objects/figure.tsx b/studio/schemas/objects/figure.tsx
@@ -44,6 +44,20 @@ export default {
       fieldset: 'design',
       initialValue: Colors[0],
     },
+    {
+      name: 'aspectRatio',
+      type: 'string',
+      title: 'Aspect ratio',
+      options: {
+        list: [
+          { title: 'original', value: 'original' },
+          { title: '16:9', value: '16:9' },
+        ],
+        layout: 'dropdown',
+      },
+      initialValue: '16:9',
+      validation: (Rule: Rule) => Rule.required(),
+    },
   ],
   preview: {
     select: {

diff --git a/web/lib/queries/common/pageContentFields.ts b/web/lib/queries/common/pageContentFields.ts
@@ -92,6 +92,7 @@ const pageContentFields = /* groq */ `
     },
     "designOptions": {
       "background": coalesce(background.title, 'White'),
+      "aspectRatio": coalesce(aspectRatio, '16:9'),
     },
   },
   _type == "textWithIconArray"=>{

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,21 +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 =
+    '(max-width: 360px) 313px, (max-width: 600px) 415px, (max-width: 950px) 550px, (max-width: 1250px) 655px, (max-width: 1450px) 730px, (max-width: 1700px) 825px, 920px'
   return (
     <StyledFigureWrapper background={designOptions?.background} id={anchor}>
       <StyledFigure>
-        <Image
-          image={image}
-          maxWidth={920}
-          sizes="(max-width: 360px) 313px,
-            (max-width: 600px) 415px,
-            (max-width: 950px) 550px,
-            (max-width: 1250px) 655px,
-            (max-width: 1450px) 730px,
-            (max-width: 1700px) 825px,
-            920px"
-        />
+        {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
@@ -260,6 +260,7 @@ export type DesignOptions = {
   background?: BackgroundColours
   imagePosition?: TeaserImagePosition
   imageSize?: TeaserImageSize
+  aspectRatio?: FigureRatio
 }
 export type TextBlockData = {
   type: string
@@ -345,6 +346,8 @@ export type FullWidthVideoData = {
 
 export type FullWidthVideoRatio = 'fullScreen' | 'narrow' | '2:1'
 
+export type FigureRatio = 'original' | '9:16'
+
 export type FigureData = {
   type: string
   id: string