Solved Best photo size for Classic Luxury template
-
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!
-
@Ann-Karako - stop before you crop - (was going to make a rhyme there) We can probably achieve what you want, with custom CSS.
Would you like the slideshow images to be moved “up” a little?
-
@Tristan-Brotherton Oh dude, you are totally making my day! YES, we want them moved up!
-
Hi @Ann-Karako I played around with this, and the issue I’m having is that if I move up the images, you end up with a blank “bar” at the bottom on some screen sizes, not ideal.
This said I’ve made some other optimizations, and I think its a lot better. Let me know what you think.T
-
@Tristan-Brotherton WOW, it looks amazing! Yes, SO MUCH BETTER.
The only thing I’m noticing is that it still defaults to only the top of the photo when I narrow the screen down to something like an ipad size – even when I do that on the desktop, and certainly when I choose the ipad preview button in the editor. Would you be able to fix that? I’m so impressed with what you’ve done so far; I am guessing this will be just one more little tweak? -
@Tristan-Brotherton We are thinking about launching the new website within a week or so. But the images are still being cut off on the ipad view… is there anything you can do about that? Any help is greatly appreciated!!
-
Hi @Ann-Karako
I don’t think we can do any better for iPad - this is how it displays on landscape:
For portrait orientation we show less of the image as this is also used for mobile phones.
-
@Tristan-Brotherton Here’s what I’m seeing on the ipad preview screen:
. Desktop preview looks good, and so does cellphone (with the portrait view). It’s just this one that seems to be doing what the desktop used to do before you made your amazing mods. Is it possible that the “preview” is not accurate? I just don’t know how to test it on an actual tablet, since it isn’t published yet. What do you think?
