diff --git a/sanityv3/schemas/objects/figure.tsx b/sanityv3/schemas/objects/figure.tsx index 6591696a8..2d15943a6 100644 --- 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 index 7868d220b..474ffd3ac 100644 --- a/web/lib/queries/common/pageContentFields.ts +++ b/web/lib/queries/common/pageContentFields.ts @@ -102,14 +102,9 @@ _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 }, diff --git a/web/pageComponents/shared/Hero/FiftyFiftyHero.tsx b/web/pageComponents/shared/Hero/FiftyFiftyHero.tsx index 527b2fbc5..be6c4859c 100644 --- 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 {figure && ( - + )} diff --git a/web/pageComponents/shared/SanityImage.tsx b/web/pageComponents/shared/SanityImage.tsx index ac6f8eb58..45191ad0d 100644 --- 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 index ed60d1b3d..6d488ded1 100644 --- 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 @@ -39,11 +39,21 @@ const FullWidthImage = ({ data, anchor }: TeaserProps) => { return ( - + {designOptions.aspectRatio !== 'original' ? ( + + ) : ( + + )} + {(caption || attribution) && ( {caption && {caption}} diff --git a/web/types/types.ts b/web/types/types.ts index b11fb95c7..7e12c2b38 100644 --- a/web/types/types.ts +++ b/web/types/types.ts @@ -284,8 +284,6 @@ export type DesignOptions = { backgroundUtility?: keyof ColorKeyTokens dark: boolean } - imagePosition?: TeaserImagePosition - imageSize?: TeaserImageSize } export type TextBlockData = { @@ -343,6 +341,8 @@ export type TableHeaderData = { headerCell: PortableTextBlock[] } +export type FigureRatio = 'original' | '9:16' + export type CellData = { id: string type: LinkType | 'richText' @@ -399,7 +399,9 @@ export type FigureData = { type: string id: string figure: ImageWithCaptionData - designOptions: DesignOptions + designOptions: DesignOptions & { + aspectRatio?: FigureRatio + } } export type TextWithIconItem = {