Best HomePage Slideshow style & parameters for Panoramic ( 1:2 Ratio) Images

WinsomeWorks

I wasn't sure if I should put this in the Customization forum, cuz I don't think it will necessarily need CSS to get a basic slideshow up & running on my new site's HomePage (which is otherwise pretty empty so far-- just has Nav bar & logo. Anyway, my question: I'm hoping to draw my slideshow (for now) from the same gallery I'm using on my Legacy HomePage. (which is still visible, the last I checked! Link in my siggy.) Said gallery is all panoramic images (ratio exactly 1:2, w/ a few images being a few pixels off from that, but very close)

So.. I'm wondering what options to choose in the dialog box for the slideshow. I'm guessing I would not start out with the background / full screen option, right? It seems that would have to chop off the short ends of my panoramic images, since most screens are not quite as elongated as a pano. (even with the space the NavBar takes up at the top) If you agree that I shouldn't start out with a background option but instead drag a Slideshow Content Block to the HomePage, what other options should I toggle, if my images are 1:2 ??

If this fails, I do have another HomePage-Slideshow-friendly gallery I could use, & perhaps I'd do the full-screen instead then. But I may put another content block below the slideshow, so for now I'd rather not have full-screen. I do, however, want the pano images to size to the width of whatever screen they're on. And I'm hoping to get a black frame around them like the show on my current homepage. I see there's an option for splash image in the dialog, so that's good. Thanks for any suggestions. If you think I need CSS, this post can be moved to the Customization forum. PS-- if someone is looking at my old homepage to see what I mean, just know that my "New" logo & NavBar do not take up as much vertical real estate-- I've limited the height quite a bit.

AceCo55

I have just updated my homepage to just include header & menu, brief message, slideshow and footer.
No css required at all for the slideshow. My slideshow photos were 1800pixwls by 800pixels (so 2.25:1 ratio) (except for a few at 1200x800px)

When you add a slideshow content box to your homepage, you will be able to select from a whole bunch of options (spread over three tabs)

I then limited the size of the images to X2Large (in the gallery settings).
Now I did this to get my homepage to be all above "the fold" - no scrolling for most screen sizes.
Go to my website if interested at how it turned out.

You can check what your website will look like using this tool: http://quirktools.com/screenfly/
Just enter your web address and then select the device and screen sizes from the options at the top.

I DO have some css that adds a white border to the slideshow and adds a drop shadow

WinsomeWorks

Hey, thanks so very much, Ace-- glad someone's awake in that part of the globe! I'm a night owl here in Pennsylvania, so after your notes, maybe I can get this thing done before hitting the hay. Your site looks really great-- holy smokes, you must get a terrific lot of exercise just hopping around after all these sport-ing people to get all those action shots!! (I'm worn out just peeking...!)
Anyway, yes, seeing the ratio of your slideshow, I think this'll work. I'm going to have at it. Do you think the slideshow with image sizes chosen already in-gallery will size itself to a bunch of devices? (Well, I guess you've already checked that, huh? That online tool you shared sounds very handy-- I can use that for my whole site, so thanks for that too) Ok, if you think of any parameters that aren't necessarily obvious as far as which options to choose in the dialog, let me know if you get a chance. I've not looked at it on my site yet, only in the "Help" sections.
Thanks again-- I'll let you know how it turns out.

AceCo55 wrote: »

I have just updated my homepage to just include header & menu, brief message, slideshow and footer.
No css required at all for the slideshow. My slideshow photos were 1800pixwls by 800pixels (so 2.25:1 ratio) (except for a few at 1200x800px)

When you add a slideshow content box to your homepage, you will be able to select from a whole bunch of options (spread over three tabs)

I then limited the size of the images to X2Large (in the gallery settings).
Now I did this to get my homepage to be all above "the fold" - no scrolling for most screen sizes.
Go to my website if interested at how it turned out.

You can check what your website will look like using this tool: http://quirktools.com/screenfly/
Just enter your web address and then select the device and screen sizes from the options at the top.

I DO have some css that adds a white border to the slideshow and adds a drop shadow

AceCo55

"Do you think the slideshow with image sizes chosen already in-gallery will size itself to a bunch of devices? (Well, I guess you've already checked that, huh?"

If you set your site to "stretchy", then yes I believe it will

This where you can set it.
Customize > Content & Design > Entire Site > Layout Tab

I'm trying to add a screenshot to show you.

For my slideshow, I resized all the images I was going to use so that they all had exactly the same height (in my case it was 800pixels). So all of those images were used to make the composites and they were all put into a gallery I called "HomePage Slideshow". I did this just to ensure that the footer always remained in the same place. If you have photos with different heights, they will take up a variety of height distances on the screen.

Good luck ... and just keep asking questions.
Everyone who has their site up and running in NewSmug had to go through the same process!!

PS Yeah, it keeps me busy.
Junior tennis season starts tonight
Cricket Season starts tomorrow
Senior Tennis starts tomorrow
Then off to Dirt karts tomorrow afternoon/evening!!

WinsomeWorks

Ok, I did that, & so far, so good. Yes, my slideshow was already drawing from a gallery before, so I just used that same one. The photos are all 1:2, and any that are imprecise are only different by a couple px, not enough to be visible. The only thing is, SmugMug is still way behind on the Panoramic thing--- they once again did not put a 1:2 ratio selection in the ratio list. It's ridiculous when panos are so popular. There wasn't a 1:2 ratio crop in legacy either. I sure hope there's one in New. So I just chose one; I think it was 3:4 or something. Who knows what that will do. (I haven't yet checked that site for the look on different devices; I'm probably scared to!).

My theme was already at Stretchy, but the button under that (Fill Height?) was toggled to "OFF" on my site, so I switched it to "ON". This is the thing that's total guesswork for me with this New SmugMug site... all the detailed parameters. I really feel SmugMug should've given us a lot more help & guidance for all that. Let's face it, most of us don't have a clue what all those margins, padding, heights & all are really doing. We should have a lot of "if, so..." statements to help us decide. For instance, my side & bottom margins were set to "0", so I left them there. My Header Width & whatever is below that was set to "auto" & "auto". I have no idea how to decide these things. It was all guesswork on the logo too... I know that means some device is gonna make it look bad. Well, tomorrow I'll look at that http://quirktools.com/screenfly/ site & find out the good & bad news!

Incidentally, for anyone else reading this, I did not choose "Independent Homepage" while

AceCo55 wrote: »

"Do you think the slideshow with image sizes chosen already in-gallery will size itself to a bunch of devices? (Well, I guess you've already checked that, huh?"

If you set your site to "stretchy", then yes I believe it will

This where you can set it.
Customize > Content & Design > Entire Site > Layout Tab

I'm trying to add a screenshot to show you.

For my slideshow, I resized all the images I was going to use so that they all had exactly the same height (in my case it was 800pixels). So all of those images were used to make the composites and they were all put into a gallery I called "HomePage Slideshow". I did this just to ensure that the footer always remained in the same place. If you have photos with different heights, they will take up a variety of height distances on the screen.

Good luck ... and just keep asking questions.
Everyone who has their site up and running in NewSmug had to go through the same process!!

PS Yeah, it keeps me busy.
Junior tennis season starts tonight
Cricket Season starts tomorrow
Senior Tennis starts tomorrow
Then off to Dirt karts tomorrow afternoon/evening!!

AceCo55

Yeah, sometimes you have to see something "broken" and then go in and change some parameter ... but, as you know, there are lots of people here who really know what they are talking about and usually a solution can be found.

There are a couple of things I wish I could do, but it isn't possible. So I just suck it up and try to get the best work around for the moment.

The padding just determines how much space is set aside from left and right edges and the other content blocks above and below.
Sometimes I want two blocks to look like one, so I set both with zero adjacent padding. You can even set negative padding to bring them really close - just don't chose a large negative number as it can muck up the page when people use different sized screens/devices)
If I want two sections to look more visually separate then I increase the padding between them.

You can also limit the % of the screen width set aside for a content block

If you go to this page:
http://www.acecootephotography.com/Photo-Products/Ordering-Photo-Files-and-Disks

Under the breadcrumb, I have:
1) a HTML Content Block (Text about Ordering photo files)
2) then a single photo Content Block (screenshot of where file name is found)
3) then another HTML Content Block (Text about what sizes I offer)
4) then another Single Photo Content Block (screenshot of info about what size they could print a photo)
5) then another HTML content block (Text about cropping)
6) then another HTML content block (Terms and conditions)
7) then a separator content block (the line)
8) Footer

If you want to add a block of text to a page, I would recommend you add a HTML Content Block rather than a Text Content Block (The text block has very limited formatting capabilities compared to the HTML block)
With the HTML block you can change the formatting MUCH easier (once you know how to write the code or get the code from someone, which you can then learn from and modify)

When you are customizing content, and you highlight a content block you will set what looks like a "triangle" icon at the top of the block.
This is that dialogue box for my first Single photo content block:
You can see the different padding for above and below the block.
Also this block has been set to be only 30% of the screen width - so that lines up under the text. (I just had to play around with numbers until I got what I liked)

Allen

AceCo55 wrote: »

...
You can see the different padding for above and below the block....

I think you got padding and margin confused. Margin can be set negative but padding can not. Padding
is space inside a div, margin is outside. In the triangle symbol only margins can be set.

AceCo55

Allen wrote: »

I think you got padding and margin confused. Margin can be set negative but padding can not. Padding
is space inside a div, margin is outside. In the triangle symbol only margins can be set.

Thank you Allen - just one of the many things that I get confused about

Much appreciated