I create problem-solving mysteries using RW and rely heavily on limelight to display images. I have heard from a lot of players using laptops that the bottoms of the larger lightbox images are not visible on their screen. I would have expected larger images to shrink to the height of the browser window so no matter the height, the entire picture would be visible. Is there a way I can force that behavior in Limelight? I am using Image (Warehoused) boxes for the images.
Thanks,
Gregory
Limelight should not crop the image. It should scale the image by whichever axis (horizontal or vertical) is the shortest and so preserve its aspect ratio.
If you resize the following page to extreme landscape or portrait you will see how it should behave.
https://test.bigwhiteduck.com/ll-scale/
If yours is not working like this then you can either provide me with a url or I can take a look at a project file. In either case though please make an example like mine with just a single limelight on the page containing the problem image. This way we will initially exclude other things / code on the page that may be causing the problem.
Thanks for the reply. I created two pages, one showing the problem and one showing it working correctly. The difficulty in troubleshooting is that any time I remove any of the content that precedes Limelight, it starts working correctly. I’m using Foundation 6 with a few non-foundation stacks, and my structure is as follows:
First Container
Column1, Column 2
2nd Container
Column 1, Column 2
My limelight is in the 2nd container, column 2. If I remove the first container, it works correctly. If I remove Column 2 from the first container, it works correctly. If I remove column 1 from the 2nd container, it works correctly. If I remove just the video from the first container, it works. So it doesn’t seem to be a conflict with a single stack. If you have a method for narrowing down the offending problem, I would greatly appreciate it.
Works Correctly: Cadets-Training Day
Doesn’t Work: Cadets-Training Day
I put labels and buttons so you can toggle back and forth between the working and non-working pages.
Really appreciate the help!
Gregory
Thanks for the info @GregoryCCB - that has narrowed it down considerably.
The problem is that the browser is reporting a height that is about 2 or 3 times the actual height and so the Limelight height calculation for scaling is correspondingly high.
This can be caused by several things, most usually just some other CSS on the page. I’ve made a little replication of the layout and it works OK with just two sets of container / 2 columns with only text stacks in them. I’m therefore wondering if it is something to do with the embed in the first container or something else on your particular page. Here is my little test project with it working:
You can either try dropping your content into my project and find the point at which it breaks and/or you can send me your test project and I can do the same. This will most likely be a simple thing once we track it down. You can email it to the BWD support address or DM me here with a link to it if you prefer.
P.S. May also be worth taking the Limelight itself out of the column and putting it at the end of the content in edit mode on the page itself. I just wonder if Syphon has something to do with it as well - does it do the same without Syphon on the page?
Tav,
After hours of trying every combination of stuff with seemingly random results, I realized that this only happens when my page is taller than the viewport. So I scrapped all my test pages from my own projects, and just replicated the text boxes in the project you gave me so that scrollbars appear when the page is displayed in the MacBook Pro 13" simulation. I added a 1200px tall image to the resources, and am using that as the lightbox image in Limelight. This image is cut off on the bottom, and scroll wheel just scrolls the page underneath the lightbox (as I would expect, if the lightbox is sized to the viewport instead of the page length). So that’s about as clean a test case as I can imagine.
Box sync link isn’t pasting in here, so will email to BWD support.
Thanks,
Gregory
I’ve just tested it again and it is only happening with Foundation 6 - this must be some CSS that F6 is applying to the page body.
If you do that same test with Foundation 1 (v5) or with any other theme it works fine.
I will see what CSS in the F6 theme is causing is and if necessary have a word with Joe. Bear with me on this as I am tied up this weekend.
Actually - just tried one thing and I found it.
Add this to your site wide custom CSS in RW and everything should work again
html, body {
height:100%!important
}
I should also be able to make some changes to the Limelight calculations that take into account the way that F6 works so you won’t need that CSS long term
That does the trick! Thanks!