diff --git a/web/lib/queries/common/pageContentFields.ts b/web/lib/queries/common/pageContentFields.ts index ba59b40fd..085dc3d97 100644 --- 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 index f1fa933bb..dcc283f6c 100644 --- 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 index 142f41de8..da89d5cdd 100644 --- 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 > -
- {designOptions.aspectRatio === '9:16' ? ( +
+ {designOptions.aspectRatio === '16:9' ? ( ) : ( { ) } -export default FullWidthImage +export default Figure diff --git a/web/types/types.ts b/web/types/types.ts index bf91c1d15..36e65f44e 100644 --- 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