🐛 fix missing aspect ratio in figure (#2512)

equinor · Sep 11, 2024 · d26faf5 · d26faf5
1 parent 13cae47
commit d26faf5
Show file tree

Hide file tree

Showing 4 changed files with 9 additions and 6 deletions.
diff --git a/web/lib/queries/common/pageContentFields.ts b/web/lib/queries/common/pageContentFields.ts
@@ -113,6 +113,7 @@ _type == "keyNumbers" =>{
     },
     "designOptions": {
       ${background},
+      "aspectRatio": coalesce(aspectRatio, '16:9'),
     },
   },
   _type == "textWithIconArray"=>{

diff --git a/web/pageComponents/shared/SanityImage.tsx b/web/pageComponents/shared/SanityImage.tsx
@@ -13,6 +13,7 @@ export enum Ratios {
   THREE_TO_TEN = 0.3,
   NINETEEN_TO_FORTY = 0.475,
   ONE_TO_TWO = 0.5,
+  SIXTEEN_TO_NINE = 1.77,
   NINE_TO_SIXTEEN = 0.5625,
   THREE_TO_FOUR = 0.75,
   FOUR_TO_FIVE = 0.8,

diff --git a/web/pageComponents/topicPages/Figure.tsx b/web/pageComponents/topicPages/Figure.tsx
@@ -2,13 +2,13 @@ import type { FigureData } from '../../types/types'
 import { BackgroundContainer, FigureCaption } from '@components'
 import Image, { Ratios } from '../shared/SanityImage'
 
-type TeaserProps = {
+type FigureProps = {
   data: FigureData
   anchor?: string
   className?: string
 }
 
-const FullWidthImage = ({ data, anchor, className }: TeaserProps) => {
+const Figure = ({ data, anchor, className }: FigureProps) => {
   const { figure, designOptions } = data
 
   // With previews in Sanity, we need to support work in progress figures
@@ -23,13 +23,14 @@ const FullWidthImage = ({ data, anchor, className }: TeaserProps) => {
       className={className}
       renderFragmentWhenPossible
     >
-      <figure className="pb-page-content px-layout-lg max-w-viewport mx-auto">
-        {designOptions.aspectRatio === '9:16' ? (
+      <figure className={`pb-page-content px-layout-md max-w-viewport mx-auto`}>
+        {designOptions.aspectRatio === '16:9' ? (
           <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)'}
+            className={`aspect-video`}
           />
         ) : (
           <Image
@@ -50,4 +51,4 @@ const FullWidthImage = ({ data, anchor, className }: TeaserProps) => {
   )
 }
 
-export default FullWidthImage
+export default Figure
diff --git a/web/types/types.ts b/web/types/types.ts
@@ -349,7 +349,7 @@ export type TableHeaderData = {
   headerCell: PortableTextBlock[]
 }
 
-export type FigureRatio = 'original' | '9:16'
+export type FigureRatio = 'original' | '16:9'
 
 export type CellData = {
   id: string