From 5803291e509d7db2d27bbfd34c2ad7cda3df23da Mon Sep 17 00:00:00 2001 From: Malin J Date: Thu, 27 Jul 2023 13:36:43 +0200 Subject: [PATCH 1/4] =?UTF-8?q?=E2=9C=A8=20New=20aspectratio=20for=20Figur?= =?UTF-8?q?e=20component=20#1752?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- sanityv3/schemas/objects/figure.tsx | 14 ++++++++++++ web/lib/queries/common/pageContentFields.ts | 1 + web/pageComponents/topicPages/Figure.tsx | 24 ++++++++++----------- web/types/types.ts | 4 +++- 4 files changed, 29 insertions(+), 14 deletions(-) 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/web/lib/queries/common/pageContentFields.ts b/web/lib/queries/common/pageContentFields.ts index 3893d7fe2..505188675 100644 --- a/web/lib/queries/common/pageContentFields.ts +++ b/web/lib/queries/common/pageContentFields.ts @@ -89,6 +89,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 23ef801ee..084fadafe 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 @@ -342,6 +343,8 @@ export type FullWidthVideoData = { export type FullWidthVideoRatio = 'fullScreen' | 'narrow' | '2:1' +export type FigureRatio = 'original' | '9:16' + export type FigureData = { type: string id: string @@ -701,7 +704,6 @@ export type VideoPlayerCarouselData = { title?: PortableTextBlock[] } - export type LoopingVideoRatio = '1:2' | 'narrow' export type LoopingVideoData = { From 6e3340e17c6699055621097b05da555abf385e98 Mon Sep 17 00:00:00 2001 From: Padmaja <52911293+padms@users.noreply.github.com> Date: Fri, 11 Aug 2023 12:55:34 +0530 Subject: [PATCH 2/4] =?UTF-8?q?=E2=9C=A8=20Missing=20changes=20studio=20v2?= =?UTF-8?q?=20#1752?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- studio/schemas/objects/figure.tsx | 14 ++++++++++++++ 1 file changed, 14 insertions(+) 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: { From 31aa647d9094e7fc7ad42932206f1e4ecb6093a8 Mon Sep 17 00:00:00 2001 From: Malin J Date: Fri, 17 Nov 2023 13:04:40 +0100 Subject: [PATCH 3/4] =?UTF-8?q?=E2=9C=A8=20Add=20hotspot=20and=20crop=20ba?= =?UTF-8?q?ck=20to=20image=20components=20#1752?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- web/lib/queries/common/pageContentFields.ts | 7 +------ web/pageComponents/shared/SanityImage.tsx | 4 ++-- 2 files changed, 3 insertions(+), 8 deletions(-) diff --git a/web/lib/queries/common/pageContentFields.ts b/web/lib/queries/common/pageContentFields.ts index 505188675..875e0d58f 100644 --- a/web/lib/queries/common/pageContentFields.ts +++ b/web/lib/queries/common/pageContentFields.ts @@ -76,14 +76,9 @@ const pageContentFields = /* groq */ ` _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/SanityImage.tsx b/web/pageComponents/shared/SanityImage.tsx index 82b8a9b43..15632588e 100644 --- a/web/pageComponents/shared/SanityImage.tsx +++ b/web/pageComponents/shared/SanityImage.tsx @@ -41,14 +41,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' }, } } From e3ca10ee9352447c0a5cafab5a11e0abcc1c5a3a Mon Sep 17 00:00:00 2001 From: Malin J Date: Thu, 4 Jan 2024 14:04:33 +0100 Subject: [PATCH 4/4] =?UTF-8?q?=E2=99=BB=EF=B8=8F=20Remove=20style=20prop?= =?UTF-8?q?=20from=20sanityimage=20#1752?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- web/pageComponents/shared/Hero/FiftyFiftyHero.tsx | 9 +-------- web/pageComponents/shared/SanityImage.tsx | 10 +--------- 2 files changed, 2 insertions(+), 17 deletions(-) diff --git a/web/pageComponents/shared/Hero/FiftyFiftyHero.tsx b/web/pageComponents/shared/Hero/FiftyFiftyHero.tsx index 5a7963262..7a15655ad 100644 --- a/web/pageComponents/shared/Hero/FiftyFiftyHero.tsx +++ b/web/pageComponents/shared/Hero/FiftyFiftyHero.tsx @@ -90,14 +90,7 @@ export const FiftyFiftyHero = ({ title, ingress, link, background, figure }: Her {figure && ( - + )} diff --git a/web/pageComponents/shared/SanityImage.tsx b/web/pageComponents/shared/SanityImage.tsx index 15632588e..dd1b65662 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