Homepage background slideshow

sarasphotos

Excuse me if this topic has already been covered - I searched but couldn't seem to find the info I needed.

I'm in the process of updating the look of my website and have decided to try the background slideshow on the homepage. What I haven't yet figured out is how the crop or re-sizing of an image is determined. Right now the source is a gallery of recent photos which are mostly landscape orientation. I can see that the slideshow takes portrait orientation photos and stretches them to fill the width of the screen which makes the pictures pretty grainy and the crop very odd, to say the least. The landscape orientation photos seem to be somewhat ok although sometimes they are lopped off at the bottom or top.

Because of the variety of screen sizes and orientations there is certainly no one-size-fits-all solution, but what would be a good pixel size and proportion to use as a crop for background images? 16x9? 16x10? 2x3?

Any tips would be appreciated.

Thanks
Sara

pilotdave

I don't think there's any right answer because what works well on a big computer monitor might look terrible on a small phone. To me, the key is choosing images carefully. I would suggest creating a new unlisted gallery for background images, preferably allowing originals to be displayed. Pick images that fit well in portrait and landscape displays and different aspect ratios. They should also fit well with the content of your homepage... Like not making text disappear into the background. I have flipped some of my background images horizontally to keep the subject from being covered by the menu (at least on monitors).

I don't recommend using all recent photos as backgrounds. Pick carefully, as it completely changes the look of your site. Sometimes great images just don't work as backgrounds.

Dave

sarasphotos

@pilotdave said:
I don't think there's any right answer because what works well on a big computer monitor might look terrible on a small phone. To me, the key is choosing images carefully. I would suggest creating a new unlisted gallery for background images, preferably allowing originals to be displayed. Pick images that fit well in portrait and landscape displays and different aspect ratios. They should also fit well with the content of your homepage... Like not making text disappear into the background. I have flipped some of my background images horizontally to keep the subject from being covered by the menu (at least on monitors).

I don't recommend using all recent photos as backgrounds. Pick carefully, as it completely changes the look of your site. Sometimes great images just don't work as backgrounds.

Dave

Thanks for the advice, Dave. I do plan to make an unlisted gallery with specific selections - the use of the recent gallery is for test purposes. It certainly helps to see what looks good/bad on different displays. I was just hoping there was some magic secret combination of aspect ratio/pixel size...

I'm curious as to how SmugMug resizes the photos.

leftquark

As pilotdave suggested, I create a special gallery for my slideshow and have the Max Display Size set to "All but Original" (5k sizes should be large enough without giving access to my full resolution images).

It basically does a fill, such that the full width of the window is filled by the photo. Some edges of the photo may extend outside of the window. We let the browser choose how to upscale the image to the window size. How much a photo needs to be upscaled depends on the resolution of the photo, the Max Display Size and the size of the screen.

sarasphotos

Thanks Aaron, I suspected something like this. Picking out photos should prove to be a challenge.

AceCo55

What I did was to create templates that are all have an overall dimension of 2100px x 800px
Each template allows for a composite of two, three or four images to fit inside that "container".

Some templates allow for:
1) two equally sized photos to fit side by side (each 1050px x 800px)
2) one photo to take up two-thirds of the overall size (1400px x 800px) and the other one third of the photo (700px x 800px)
3) etc
The idea is that every single composite in the slideshow takes up exactly the same dimensions and location. It also means that everything on my homepage is "above the fold" - no scrolling.

I then selected photos from my last year - cropped each to one of my standard crop ratios, then resized each to be 800px high.
I then combined photos (using my templates) that would sit side by side and overall take up 2100px x 800px.
These were then uploaded to my "homepage" gallery and these are the collages appear on my homepage slideshow.

Was it easy - hell no! It's doable by I spent three full days selecting photos, cropping them, resizing them, combining them.
It is a big task. I ended up with 270 composites for my slideshow - I did this so that people would not likely see the same images over and over again.
I can do it because it is a hobby for me and it gave me satisfaction doing it.

sarasphotos

@AceCo55
Ace, thanks for taking the time to answer! While your solution is not necessarily what I'm aiming for (a full-screen slideshow) I appreciate hearing your thoughts and strategy. I am anticipating a bit of work ahead of me - the challenge will be finding the time...

PS - I enjoyed your slide show very much - a great selection of complementary shots!

Teetime

AceCo55, I really like your approach for your slideshow, especially that the entire image is visible from desktop all the way down to iphone. But I'm confused by this: your image composite is 2100 x 800, yet there is always space left and right. Are you somehow adding a responsive spacer left and right of the homepage slideshow?

AceCo55

@Teetime said:
AceCo55, I really like your approach for your slideshow, especially that the entire image is visible from desktop all the way down to iphone. But I'm confused by this: your image composite is 2100 x 800, yet there is always space left and right. Are you somehow adding a responsive spacer left and right of the homepage slideshow?

Aaaah you have made my day - to think that I might even know about a "responsive spacer" and then be capable of adding one!!!!
My website is due to the wonderful members and staff here on DGrin who have provided advice and coding over the years.

No I'm afraid it is all basic settings in the slideshow content bock.
1) Under the "Dimensions" settings I have ...
Top margin 6px / Bottom margin 0px / Left margin 12px / Right margin 12px ... and container width 100%

2) Under the "Options" settings I have
Height = Auto / Auto Height Ratio = 3x1 / Content Aware Height = ON

Hope that helps you track done what you want to do!

Teetime

AceCo55, actually you made MY day. I've got it working now - my biggest issue was I was using the Homepage slideshow which is full page only. I've also set up a print template in Lightroom for creating my cropped images with border and drop shadow. This makes fast work of it. Thanks again!