8c3f8c74db
Feature/SW-3365 reduce upscaling of images (fix blurry images) * fix: handle when images are wider than 3:2 but rendered in a 3:2 container * use dimensions everywhere applicable * fall back to using <img sizes='auto' /> if possible * imageLoader: never nest * remove empty test file Approved-by: Anton Gunnarsson Approved-by: Matilda Landström
62 lines
1.3 KiB
TypeScript
62 lines
1.3 KiB
TypeScript
import Caption from '../Caption'
|
|
import Image from '../Image'
|
|
|
|
import styles from './imageContainer.module.css'
|
|
|
|
type Image = {
|
|
id: number
|
|
title: string
|
|
url: string
|
|
focalPoint: {
|
|
x: number
|
|
y: number
|
|
}
|
|
dimensions?: {
|
|
width: number
|
|
height: number
|
|
}
|
|
meta: {
|
|
alt?: string | null
|
|
caption?: string | null
|
|
}
|
|
}
|
|
|
|
type ImageContainerProps = {
|
|
leftImage: Image
|
|
rightImage: Image
|
|
}
|
|
|
|
export default function ImageContainer({
|
|
leftImage,
|
|
rightImage,
|
|
}: ImageContainerProps) {
|
|
return (
|
|
<section className={styles.container}>
|
|
<article>
|
|
<Image
|
|
className={styles.image}
|
|
src={leftImage.url}
|
|
height={365}
|
|
width={600}
|
|
alt={leftImage.meta.alt || leftImage.title}
|
|
focalPoint={leftImage.focalPoint}
|
|
dimensions={leftImage.dimensions}
|
|
/>
|
|
<Caption>{leftImage.meta.caption}</Caption>
|
|
</article>
|
|
<article>
|
|
<Image
|
|
className={styles.image}
|
|
src={rightImage.url}
|
|
height={365}
|
|
width={600}
|
|
alt={rightImage.meta.alt || rightImage.title}
|
|
focalPoint={rightImage.focalPoint}
|
|
dimensions={rightImage.dimensions}
|
|
/>
|
|
<Caption>{rightImage.meta.caption}</Caption>
|
|
</article>
|
|
</section>
|
|
)
|
|
}
|