Friends, I’ve been scratching my head with the best way to handle displaying a “vast” collection of photos (in this case, real estate) into something that allows all photos to be gone through, while also not filling up the entire page (like a grid you’d see on a portfolio website).
In the past, I’d have used a simple JS carousel to display the starting image, with user-controlled buttons to advance at their pace. Now, search up carousels today and you see “DON’T USE OR YOU’LL MISS OUT ON CONVERSIONS”, and other similar topics that talk about the use of a carousel on the home page, where the average visitor will end up missing 90% of the important content due to the distracting visuals.
This isn’t one of those scenarios, as we’re talking about an image gallery to showcase a particular piece of property. The property in question has around 20 solid photos, each which showcase an important feature of said property. It would be a shame to have to cut that down to do a “preview” box that sits atop a grid of 4-5 photos, that onclick will fill up the preview box.
So! Let’s say you were tasked with creating a page for a piece of real estate, how would YOU best deal with the display of photos?
Based on other things I’ve seen, it’ll likely be a grid of thumbnails that onclick just brings up a dialog box that shows a higher-res photo. Not really ideal, as in addition to the the property title, I’d like for the visitor to be greeted with a nice, medium-res shot of the property in question.
I’d probably do a position fixed Title at the top and a vertical image stack on the LHS taking up about 50% of the page and to the right of each photo put bullet point comments about them e.g
**Large position fixed title**
bathroom image -Large spacious bathroom
-Marble vanity
It would look good on mobile, provide a nice large column of photos for them to scroll and not be information overload on the page.
You could also put a pop up photo modal with blurred background for expanding each photo…
Oh and on a side note allow you to put nice large photos but also lazy load them…
2 Likes
Hmm, a definite possibility. I guess one thing to mention is that this is a vacant plot of land, with no structures, but it IS commercial, so things like overhead photos, traffic maps, etc. are important to have.
I’ll do some experimentation, but I am thinking ultimately that the pop-up photo modal after selecting the appropriate image from a grid will be the ultimate answer. Being that it is a commercial property, the aim is to provide as MUCH detailed written information as possible (the client is foregoing the use of a realtor, with the aim to market it directly to potential buyers) so that no ones’ time is wasted. Were the use of a realtor involved, obviously there’d be far less info to “encourage” further inquiries for details.
Dealing with photos and how to arrange them can always be a bit of a pain!
I’ve bought and built on 4 different properties and looked at countless others.
The main pain point that I’ve had is working out the details in relation to photos. (what view is this photo?, what is it showing? what does it tell me about the details of the property?)
The other pain point has been getting the information about the property without talking to agents.
However you do it, if you can provide the relevant info about each photo and how that fits in the overall property details I think you will get more interest…
2 Likes
Makes sense!
I just wanted some additional feedback on what others would do, since I’ve hit a bit of a wall when it comes to the organization of such things.
2 Likes
