diff --git a/sanityv3/schemas/objects/figure.tsx b/sanityv3/schemas/objects/figure.tsx index 6591696a8..dd4b90c7a 100644 --- 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 index 155053d04..7508321b4 100644 --- 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 index 2c0692188..3adeedb96 100644 --- 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 index 0f35c24f3..8919d11c9 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 @@ -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 ( - + {aspectRatio !== 'original' ? ( + + ) : ( + + )} + {(caption || attribution) && ( {caption && {caption}} diff --git a/web/types/types.ts b/web/types/types.ts index 005416e9f..e17399b19 100644 --- 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