Solved Best photo size for Classic Luxury template
-
We have been playing with a copy of our website, trying to see how a different template would work. We are very happy with the look of the Classic Luxury template, but we are finding that the featured photo(s) at the top of the home page and each property page are showing up poorly. Our images are mostly squarish, and only the top of the photo is showing. Which means that in most cases, the view is of the ceiling of the condo, lol. Is there a recommended size or proportion that the photos should be for this template?
-
Hi @Ann-Karako,
Is there a recommended size or proportion that the photos should be for this template?
Yes, here is a great post that covers the ideal size for website photos. It actually also links to this very early post with a treasure trove of photo best practices, including recommendations for the best photo size.
we are finding that the featured photo(s) at the top of the home page and each property page are showing up poorly. Our images are mostly squarish, and only the top of the photo is showing
This can be fixed by changing the settings of the banner image on your property details page. If you set “Align Image” to “Bottom” or “Center” you might be able to see more of your photos.
Cheers,
Danny -
Hi @Ann-Karako
I’ll also chime in here, and say a lot of our customers will also drag in the property slideshow widget into their property detail template.
If you’re wondering why the banners are not one specific size - because the website has to support ipads / phones / laptops etc with all sorts of different screens and aspect ratios, it needs to be able to scale.
-
@Tristan-Brotherton “Property Slideshow Widget”???
-
-
@Danny-Eiden Yes, I have already read both of those posts (in fact, I started one of them myself, lol), but they are not helping with this particular template. I have also tried aligning them differently – but that actually seems to make no difference, which I don’t understand. I was hoping maybe you could give me exact proportions for the slideshow on this template in particular, because if we can get it right, it will look spectacular. Right now, though, it’s a matter of cropping, trying it, cropping again, trying it – several times – for each and every photo. They all seem to show up differently. This is obviously not much fun, lol.
-
@Tristan-Brotherton I’ll try dragging in the widget and see how that looks. Thanks! I confess, though, that we REALLY like the look of the landscape image at the top of the Classic Luxury template. If we could just have specific dimensions or ratio to crop our photos to, that would help A LOT.
-
Here’s another thought: Do you know of anyone using this template? We could maybe look at their website and see how they make it work.
-
@Ann-Karako - a landscape orientated photograph will work best - with the main focal point at the center. However there is no fixed dimension - there can not be with a website in this format that needs to resize for multiple devices.
-
@Tristan-Brotherton OK, I see. I did figure out a sort of “optimum” set of dimensions for the slider. Unfortunately all of our photos are more square, which means we will have to crop them ALL to fit well. That’s 20 properties with 15-20 photos each… I can’t find a way to delete the slideshow that comes with the theme, to replace it with the standard photo slideshow widget, which does display our photos better. Unless I’m missing something? Also, when I set the alignment to “bottom,” it doesn’t really line up with the bottom of the photo – or even close to the bottom of the photo. There is still quite a bit cropped off. Any ideas to fix that? Thanks for all your help – we’d really like to make this one work, if we can.
-
@Tristan-Brotherton Not sure why this was marked as “solved.” Can you help with my most recent comment?
-
@Tristan-Brotherton @Danny-Eiden Let me show you what I mean. Go to our preview here: http://clear-lake-investment-rentals5.myvr.com and take a look around. I was able to get the home page images looking fairly decent (after MUCH trial and error) – but look at some properties and see what those look like. I have tried changing the alignment to the bottom but it doesn’t get any better. I have tried cropping off some of the top of the photo to make it more of a landscape, and that doesn’t make a significant difference, either. When the ratio changes, it starts to zoom in and crop off the sides of the photo as well as the bottom. Do I just need to give up with this template? How have others made it work?
-
Oh wait, now I have new information. When you resize the width of the window, it will show more or less of the photo. A full-screen window means I only see about the top third of the photo. A smaller window for some reason extends the height of the photo to make it more square and show more of it. Is this a programming thing with this template? is there a way to fix it? Thanks for whatever help you can give.
-
Hi Ann,
Yes that is correct.
As I was explaining above, think of all the different size devices your website supports:
Now imagine that a browser can be any width on those devices.
Your image needs to scale to fit the size available to it. On some aspect ratios, cropping occurs. As such for templates such as this - you are best of with landscape photography, with the center point of the image containing the most important information.An additional slide show component on the property detail page, can showcase the entire property photo collection with no cropping.
-
@Tristan-Brotherton Thanks. I have never seen images change in quite this way before based on the size of the window – my experience has always been that you can still see the whole picture, although it may take up more or less of the page. I think we’ll try a different template. Thanks for getting back to me.
-
Hi @Ann-Karako its the only way to handle certain photo layouts if you want a responsive website.
For example, Squarespace:
Laptop:
Small Laptop:
Ipad:
Phone:
I’d encourage you to try and focus your photography on a central image, and keep header images to be more “illustrative”. This sort of layout is very common, and can be very powerful.
If there is a specific page / image you’re concerned about, why don’t you screenshot it, and we can brainstorm some solutions? -
@Tristan-Brotherton Those look nice. All of them show a very nice room – even though some of it is cropped, you can still see something worth seeing. This is what is happening with our property photos – and this is with the alignment set to “bottom.” Changing it to “center” or “top” only makes it worse. And cropping the photo to more of a landscape configuration does not help. All that does is make it zoom in more so you still can’t really see anything. I’m not sure if there is a fix, but anything you can recommend would be appreciated.
-
Hi @Ann-Karako that screenshot is super helpful, let me take a poke around in there, and I’ll get back to you shortly.
-
Hi @Ann-Karako
I tweaked your slideshow height, to better work with your aspect ratio. What do you think?
You may need to refresh / clear your browser cache to see the changes.
-
@Tristan-Brotherton That is SO MUCH better!! And if I crop them just a little bit, then they show up even better yet. I think we can work with this. We have a lot of cropping to do, lol, but I think it will be worth it. It really is a stunning template design – I’m so glad to have hope again!
