Community @ The Turning Gate

Support community for TTG plugins and products.

NOTICE

The Turning Gate's Community has moved to a new home, at https://discourse.theturninggate.net.

This forum is now closed, and exists here as a read-only archive.

  • New user registrations are disabled.
  • Users cannot create new topics.
  • Users cannot reply to existing topics.

You are not logged in.

#1 2018-02-22 05:14:49

johnblaustein
Member
From: Berkeley, CA
Registered: 2018-02-06
Posts: 105
Website

Theater scaling issue

http://www.johnblaustein.com/galleries/danube/ (test page with Theater gallery)

The Theater slideshow on this page is not scaling properly on my laptop--1600x900 pixels.  The scaling works fine on my desktop, iPhone and iPad.  On the laptop, the images are too big and there is a vertical scrollbar.  On all other devices there is no scrollbar.  Please note that all other slideshows on the site are Galleria and have no scaling issues.

Thanks for any help.

John

Offline

#2 2018-02-22 06:07:36

rod barbee
Moderator
From: Port Ludlow, WA USA
Registered: 2012-09-24
Posts: 17,830
Website

Re: Theater scaling issue

Responsiveness is based on browser width, not height (which is why scaling is happening on other devices).

Since you have a shorter screen size, the scroll bar is going to show up sooner than if the monitor (and therefore the browser) has more height. With the scroll bar, the browser knows that there is more page height, and since the images in the slide show are taller than the viewable page height, you get the scroll bar and have to scroll down to see the rest of the image.

The same thing will happen if you're using a larger monitor and you resize the browser window to make it shorter. The scroll bar appears and you have to scroll down to see the bottom of the images.

Anyway, I think the content height is based upon the tallest image. So with images that tall, plus the masthead, navigation, etc, the height of the page is greater than 900px.

Matt can probably explain that better..... :-\


Rod 
Just a user with way too much time on his hands.
www.rodbarbee.com
ttg-tips.com, Backlight 2/3 test site

Offline

#3 2018-02-22 07:42:43

johnblaustein
Member
From: Berkeley, CA
Registered: 2018-02-06
Posts: 105
Website

Re: Theater scaling issue

Thanks, Rod.

I get what you are explaining.  What puzzles me is why the Galleria albums scale just fine, but the Theater one doesn't.  As you said in the other thread, however, they are "different beasts."  Perhaps its that simple... they don't behave the same way.

Here's the test page:  http://www.johnblaustein.com/galleries/danube/

I will experiment with different height settings and different aspect ratio settings and see if I can get Theater to work without scrollbars on all devices.

I note that Matt's demo--http://theturninggate.net/galleries/01-album-demonstrations/14-galleria-default/--uses all horizontal images.  I can't do that, but perhaps Theater works better without having to deal with image orientation.

EDIT/UPDATE:  I've tried just about every combination of image size and aspect ratio to try and get a Theater gallery that "mimics" the Galleria gallery in terms of image size on screen and responsiveness.  It's not happening.  I use aspect ratio of 1:1 so that horizontal and vertical images are equally large.  As Matt points out in one of his videos, 1:1 works very well on portrait oriented devices, like iPhone.

By the way, in the Theater album settings, under Renditions, it seems that the photo width and height settings don't change anything.  Is that right, or am I missing something?

John

Last edited by johnblaustein (2018-02-22 08:28:03)

Offline

#4 2018-02-22 09:09:26

rod barbee
Moderator
From: Port Ludlow, WA USA
Registered: 2012-09-24
Posts: 17,830
Website

Re: Theater scaling issue

with the inline Vegas slide show, you can set the max-width. The the aspect ratio fits within that width.
For the album template used on this page: http://pangolin.barbeephoto.com/ I set the max-width to 960px and the renditions to 960px (w & h). The ratio is 3:2. Image scaling set to "fit".
Fixing the max-width at 960px makes sure that the 960px images don't need to fill more than 960px of space. (If I set the image rendition to, say, 500px, then the quality would suffer)

So if you change your rendition settings, (then republish the images), you may not see any difference. If you increased the size of the images, they will still need to fit within the max-width you have set. In my example, if I changed the rendition to 1200px, I won't see any change at all since the images will be restricted to the 960px max-width.


Rod 
Just a user with way too much time on his hands.
www.rodbarbee.com
ttg-tips.com, Backlight 2/3 test site

Offline

#5 2018-02-22 09:42:20

johnblaustein
Member
From: Berkeley, CA
Registered: 2018-02-06
Posts: 105
Website

Re: Theater scaling issue

Rod,

OK, I'm getting a better feel for how this is working.

Rendition size tells LR how big to make the images for uploading.  Presentation sets max width and aspect ratio for the actual page display.  I imagine the max width in Page Template "works with" max width in Album Template, but I'll have to experiment to see how the two settings work together.

I've now made two test files with the same images--Theater and Galleria--under the Commercial Work menu:

http://www.johnblaustein.com/galleries/danube/ (Theater, max width 960, 3:2, fit)
http://www.johnblaustein.com/galleries/danube2/ (Galleria, same settings as home page)

I love the Theater transitions, but I prefer the Galleria sizing and responsive sizing.

I think I now know my choices and will work with this.

John

Offline

#6 2018-02-22 09:49:39

rod barbee
Moderator
From: Port Ludlow, WA USA
Registered: 2012-09-24
Posts: 17,830
Website

Re: Theater scaling issue

Rendition size tells LR how big to make the images for uploading.  Presentation sets max width and aspect ratio for the actual page display.  I imagine the max width in Page Template "works with" max width in Album Template, but I'll have to experiment to see how the two settings work together.

Pretty much. My page content widths are often set to something like 1140px. So I'll then set the slide show to be narrower than that, like 960px in the example above.
I've not tried setting the max-width for the slide show to be wider than the max-width of the page content. I'm pretty sure the page width would rule things.

The Galleria add-on addresses mobile features such as swiping. Vegas is not swipeable but Galleria is.


Rod 
Just a user with way too much time on his hands.
www.rodbarbee.com
ttg-tips.com, Backlight 2/3 test site

Offline

#7 2018-02-22 10:03:14

johnblaustein
Member
From: Berkeley, CA
Registered: 2018-02-06
Posts: 105
Website

Re: Theater scaling issue

In my case, for all the Galleria galleries, the page content width is 1140, and the image rendition setting is also 1140 height and width.  The Galleria presentation dialog doesn't have the max width option that the Theater does.  Having 1140 match in the two dialogs is working well in terms of how the photos look on the page.  I suspect you are right that page width overrules gallery width, but I haven't tested that.

I'd only use Theater/Vegas for auto-play galleries, so swiping isn't needed.  That difference, however, is significant depending on ones needs.

At the end of the day, both types of galleries are really pretty to look at!!  (Maybe a choice of transitions can be added to Galleria auto-play options at some point.)

John

Offline

#8 2018-02-22 10:49:42

Matthew
Administrator
From: San Francisco, CA
Registered: 2012-09-24
Posts: 5,795
Website

Re: Theater scaling issue

If the page's content area is max-width 1140-pixels, and the gallery is max-width 1280px, then everything will max out at 1140. Under the hood, there's always "width: 100%" also in play.

If we flip the numbers -- if the page's content area were max-width 1280, and the gallery 1140 -- then the gallery would NOT fill the entire 1280; it would stop at it's own max-width of 1140.

So the gallery will max out either at 100% the width of it's container, OR at it's own max-width if that width is less than the width of its container.

And this is just bog standard CSS. Nothing unusual to see here.

----

Computer displays are often landscape orientation; my laptop is wider than it is tall, as are most desktop displays. So using a 1:1 aspect ratio on a slideshow will typically result in the browser having to scroll. Unless, of course, that width of the slideshow is so small that the height also fits within the viewport. But that would be a tiny slideshow indeed.

For desktop, I tend to prefer a 16:9 "cinematic" aspect ratio, even for staging vertical images.

And the idea to offer split aspect ratios for desktop and mobile is exclusive to the Galleria Add-on, so not an option you'll find using the Theater's Vegas Slideshow.


Matt

The Turning Gate, http://theturninggate.net

Offline

#9 2018-02-22 12:08:33

johnblaustein
Member
From: Berkeley, CA
Registered: 2018-02-06
Posts: 105
Website

Re: Theater scaling issue

Matt,

Good to know how the width settings work together.

My Galleria albums are all 1:1 and display just fine with no scrollbars on any device, whereas Theater albums do have scrollbars.  Whether this is due to my width and ratio settings or because Galleria is more responsive, I don't know.  In either case, I can work with both just fine and the site is looking good to me.  I like how Galleria displays large images on all devices.

John

Offline

Board footer

Powered by FluxBB