scandic/web
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Merged in fix/card-width-fix (pull request #1369)

Browse Source 
feat(images): calculate width correct using aspect ratio

* feat(images): calculate width correct using aspect ratio


Approved-by: Erik Tiekstra
This commit is contained in:
Linus Flood
2025-02-19 06:29:22 +00:00
parent ba3ecedaee
commit c2b7d97ddd
3 changed files with 36 additions and 21 deletions
Download Patch File Download Diff File Expand all files Collapse all files

43
components/ContentType/DestinationPage/TopImages/index.tsx
View File

@@ -30,25 +30,30 @@ export default function TopImages({ images, destinationName }: TopImageProps) {
return (
<div className={styles.topImages}>
<div className={styles.imageWrapper}>
{visibleImages.map((image, index) => (
<Image
key={image.url}
src={image.url}
alt={image.meta.alt || image.meta.caption || ""}
width={index === 0 ? maxWidth : maxWidth / visibleImages.length}
height={Math.ceil(
(index === 0 ? maxWidth : maxWidth / visibleImages.length) /
image.dimensions.aspectRatio
)}
focalPoint={image.focalPoint}
className={`${styles.image} ${images.length > 1 ? styles.clickable : ""}`}
onClick={() =>
images.length
? setLightboxState({ open: true, activeIndex: index })
: null
}
/>
))}
{visibleImages.map((image, index) => {
const width = index === 0 ? maxWidth : maxWidth / visibleImages.length
const height =
image.dimensions.aspectRatio >= 1
? Math.ceil(width / image.dimensions.aspectRatio)
: Math.ceil(width * image.dimensions.aspectRatio)
return (
<Image
key={image.url}
src={image.url}
alt={image.meta.alt || image.meta.caption || ""}
width={width}
height={height}
focalPoint={image.focalPoint}
className={`${styles.image} ${images.length > 1 ? styles.clickable : ""}`}
onClick={() =>
images.length
? setLightboxState({ open: true, activeIndex: index })
: null
}
/>
)
})}
</div>
{images.length > 1 && (
<>