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

feat/SW-689-image-gallery-sizes (pull request #781)

Browse Source 
Feat/SW-689 image gallery sizes

* feat(SW-689): initial gallery changes

* feat(SW-689): remove console.log

* feat(SW-689): remove unneccessary code

* feat(SW-689): change sizes

* feat(SW-689): change size

* feat(SW-689): add design for ipad for fullview

* feat(SW-689): fix import type

* feat(SW-689): fix tripAdvisor placement

* feat(SW-689): fix image gallery type

* feat(SW-689): fix check gallery length


Approved-by: Christian Andolf
Approved-by: Matilda Landström
This commit is contained in:
Bianca Widstam
2024-10-29 13:54:12 +00:00
parent 8bea10a282
commit fc8844eb96
15 changed files with 82 additions and 111 deletions
Download Patch File Download Diff File Expand all files Collapse all files
components/Lightbox/FullView.tsx
+6 -4
View File
@@ -40,7 +40,7 @@ export default function FullView({
<div className={styles.fullViewImageContainer}>
<AnimatePresence initial={false} custom={currentIndex}>
<motion.div
key={image.url}
key={image.imageSizes.medium}
custom={currentIndex}
initial={{ opacity: 0, x: 300 }}
animate={{ opacity: 1, x: 0 }}
@@ -49,14 +49,16 @@ export default function FullView({
className={styles.fullViewImage}
>
<Image
alt={image.alt}
alt={image.metaData.altText}
fill
src={image.url}
src={image.imageSizes.medium}
style={{ objectFit: "cover" }}
/>
<div className={styles.fullViewFooter}>
{image.title && <Body color="white">{image.title}</Body>}
{image.metaData.title && (
<Body color="white">{image.metaData.title}</Body>
)}
</div>
</motion.div>
</AnimatePresence>
components/Lightbox/Gallery.tsx
+20 -18
View File
@@ -20,7 +20,7 @@ export default function Gallery({
selectedImage,
}: GalleryProps) {
const mainImage = selectedImage || images[0]
const mainImageIndex = images.findIndex((img) => img.url === mainImage.url)
const mainImageIndex = images.findIndex((img) => img === mainImage)
function getThumbImages() {
const thumbs = []
@@ -55,16 +55,18 @@ export default function Gallery({
{/* Desktop Gallery */}
<div className={styles.desktopGallery}>
<div className={styles.galleryHeader}>
{mainImage.title && (
{mainImage.metaData.title && (
<div className={styles.imageCaption}>
<Caption color="textMediumContrast">{mainImage.title}</Caption>
<Caption color="textMediumContrast">
{mainImage.metaData.title}
</Caption>
</div>
)}
</div>
<div className={styles.mainImageWrapper}>
<AnimatePresence initial={false} mode="wait">
<motion.div
key={mainImage.url}
key={mainImage.imageSizes.medium}
className={styles.mainImageContainer}
initial={{ opacity: 0, x: 300 }}
animate={{ opacity: 1, x: 0 }}
@@ -72,10 +74,10 @@ export default function Gallery({
transition={{ duration: 0.3 }}
>
<Image
src={mainImage.url}
alt={mainImage.alt}
layout="fill"
objectFit="cover"
src={mainImage.imageSizes.medium}
alt={mainImage.metaData.altText}
fill
className={styles.image}
onClick={onImageClick}
/>
</motion.div>
@@ -100,7 +102,7 @@ export default function Gallery({
<AnimatePresence initial={false}>
{getThumbImages().map((image, index) => (
<motion.div
key={image.url}
key={image.imageSizes.tiny}
className={styles.thumbnailContainer}
onClick={() => onSelectImage(image)}
initial={{ opacity: 0, x: 50 }}
@@ -109,10 +111,10 @@ export default function Gallery({
transition={{ duration: 0.2, delay: index * 0.05 }}
>
<Image
src={image.url}
alt={image.alt}
layout="fill"
objectFit="cover"
src={image.imageSizes.tiny}
alt={image.metaData.altText}
fill
className={styles.image}
/>
</motion.div>
))}
@@ -139,7 +141,7 @@ export default function Gallery({
<div className={styles.thumbnailGrid}>
{images.map((image, index) => (
<motion.div
key={image.url}
key={image.imageSizes.small}
className={`${styles.thumbnailContainer} ${index % 3 === 0 ? styles.fullWidthImage : ""}`}
onClick={() => {
onSelectImage(image)
@@ -150,10 +152,10 @@ export default function Gallery({
transition={{ duration: 0.3, delay: index * 0.05 }}
>
<Image
src={image.url}
alt={image.alt}
layout="fill"
objectFit="cover"
src={image.imageSizes.small}
alt={image.metaData.altText}
fill
className={styles.image}
/>
</motion.div>
))}
components/Lightbox/Lightbox.module.css
+19
View File
@@ -184,6 +184,25 @@
max-width: 548px;
}
.image {
object-fit: cover;
}
@media (min-width: 768px) and (max-width: 1367px) {
.fullViewContainer {
grid-template-columns: 1fr;
justify-items: center;
padding: var(--Spacing-x5);
}
.fullViewImageContainer {
position: relative;
width: 100%;
height: 100%;
max-height: 35rem;
}
}
@media (min-width: 1367px) {
.mobileGallery,
.thumbnailGrid {
components/Lightbox/index.tsx
+1 -1
View File
@@ -97,7 +97,7 @@ export default function Lightbox({
onClose={() => setIsOpen(false)}
onSelectImage={(image) => {
setSelectedImageIndex(
images.findIndex((img) => img.url === image.url)
images.findIndex((img) => img === image)
)
}}
onImageClick={() => setIsFullView(true)}