What our current photo object looks like?
{
"Location": "https://realist-udemy-image-bucket.s3.amazonaws.com/9YmeTI7dYJtATskDybfDr.jpeg"
},
What we need?
{
src: "https://image-bucket.s3.amazonaws.com/xxx.jpeg",
width: 4,
height: 3,
},
// AdView
import Logo from "../../src/logo.svg";
const generatePhotosArray = (photos) => {
if (photos?.length > 0) {
const x = photos?.length === 1 ? 2 : 4;
let arr = [];
photos.map((p) =>
arr.push({
src: p.Location,
width: x,
height: x,
})
);
return arr;
} else {
return [
{
src: Logo,
width: 2,
height: 1,
},
];
}
};
return (
<>
<div className="container-fluid">
<div className="row">
<div className="col-lg-4">4</div>
<div className="col-lg-8">
<ImageGallery photos={generatePhotosArray(ad?.photos)} />
</div>
</div>
</div>
<pre>{JSON.stringify({ ad, related }, null, 4)}</pre>
</>
);
export default function ImageGallery({ photos }) {}
Control the height of the images
// index.css
.react-photo-gallery--gallery img {
object-fit: cover;
max-height: 500px !important;
}