Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Adjustments to Full width image component #1756 #1791

Merged
6 commits merged into from
Jan 22, 2024
Merged

Adjustments to Full width image component #1756 #1791

Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
3fae938
✨Add more aspectratios on fullwidthimage #1756
millianapia Jul 26, 2023
4ce2d8d
🐛 Fix rarios #1791
padms Aug 14, 2023
f8c4319
♻️ Simplify check #1756
padms Aug 17, 2023
d33af23
🔨 Migration scripts for adjusting aspectRatio #1756
padms Aug 30, 2023
ce3307c
🐛 Aspect ratio default #1756
padms Aug 30, 2023
114e20a
Merge branch 'main' into malj/1756
padms Sep 1, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
14 changes: 14 additions & 0 deletions sanityv3/schemas/objects/fullWidthImage.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -17,6 +17,20 @@ export default {
type: 'imageWithAltAndCaption',
validation: (Rule: Rule) => Rule.required(),
},
{
name: 'aspectRatio',
type: 'string',
title: 'Aspect ratio',
options: {
list: [
{ title: '10:3', value: '10:3' },
{ title: '2:1', value: '2:1' },
],
layout: 'dropdown',
},
initialValue: '10:3',
validation: (Rule: Rule) => Rule.required(),
},
],
preview: {
select: {
Expand Down
5 changes: 4 additions & 1 deletion web/lib/queries/common/pageContentFields.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -65,7 +65,10 @@ const pageContentFields = /* groq */ `
_type == "fullWidthImage"=>{
"type": _type,
"id": _key,
image
image,
"designOptions": {
"aspectRatio": coalesce(aspectRatio, '10:3'),
},
},
_type == "fullWidthVideo"=>{
"type": _type,
Expand Down
20 changes: 12 additions & 8 deletions web/pageComponents/topicPages/FullWidthImage.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,7 @@
import type { FullWidthImageData } from '../../types/types'
import Image, { Ratios } from '../shared/SanityImage'
import { StyledCaption } from '../shared/image/StyledCaption'
import useWindowSize from '../../lib/hooks/useWindowSize'

type TeaserProps = {
data: FullWidthImageData
Expand All @@ -9,17 +10,20 @@ type TeaserProps = {

const FullWidthImage = ({ data, anchor }: TeaserProps) => {
const { image, attribution, caption } = data.image
const { aspectRatio } = data.designOptions
const { width } = useWindowSize()

const ratio =
width && width < 750
? Ratios.ONE_TO_TWO
: aspectRatio === String(Ratios.ONE_TO_TWO)
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

this will always be false because Ratios.ONE_TO_TWO is '0.5' and your variable is '2:1'

? Ratios.ONE_TO_TWO
: Ratios.THREE_TO_TEN

if (!image) return null
return (
<>
<Image
id={anchor}
image={image}
maxWidth={2000}
aspectRatio={Ratios.THREE_TO_TEN}
sizes="100vw"
alt={image.alt}
/>
<Image id={anchor} image={image} maxWidth={2000} aspectRatio={ratio} sizes="100vw" alt={image.alt} />
{image.asset && <StyledCaption caption={caption} attribution={attribution} />}
</>
)
Expand Down
6 changes: 5 additions & 1 deletion web/types/types.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -321,6 +321,9 @@ export type FullWidthImageData = {
type: string
id: string
image: ImageWithCaptionData
designOptions: {
aspectRatio: FullWidthImageRatio
}
}

export type FullWidthVideoData = {
Expand All @@ -340,6 +343,8 @@ export type FullWidthVideoData = {
}
}

export type FullWidthImageRatio = '10:3' | '2:1'

export type FullWidthVideoRatio = 'fullScreen' | 'narrow' | '2:1'

export type FigureData = {
Expand Down Expand Up @@ -701,7 +706,6 @@ export type VideoPlayerCarouselData = {
title?: PortableTextBlock[]
}


export type LoopingVideoRatio = '1:2' | 'narrow'

export type LoopingVideoData = {
Expand Down