Resize for iPad wide format

(Daniel Thomson) #1

I am working on a website located at using the Foundation Theme . Please check out the home page to see my issue.

Using the IMPACT stack In the header, I want to have video play for computers, and display photos for iPad, iPhone because they do not support the embed code autoplay feature from Vimeo. Using the resize options in Foundation, I have gotten good results with the exception of iPad wide view. This wants to display the video, which it can’t. In tall mode the photo displays. Is there any way to get the photo’s to display in wide view on the iPad.

Thanks, Dan

(scott williams) #2

I’m not 100% sure with impact but normally you would use a media query.

Ex: @media (min-width: 700px) and (orientation: landscape) …

a starting point maybe

(Daniel Thomson) #3

Thanks swilliam for the input. Just to clarify, I am using 2 instances of the Impact stack, 1 with video and 1 with photos. Utilizing the Responsive feature in the Impact Stack, I display the Video instance of Impact using the Desktop setting and hide the Tablet and Mobile sizes. For Tablet and Mobile, I display the photo instance of Impact and hide the desktop.

The problem shows up when the iPad is turned to Landscape mode, the video instance is used and the iPad cannot display the video (apple won’t autostart Vimeo). This is probably a programming limitation within the impact stack and maybe Joe Workman could look at it. I think it’s a useful and simple way to achieve this affects with the impact stack and remain responsive.

(scott williams) #4

Oh, I see twos seperate instances I think you are correct. Let’s tag @joeworkman and @tav. And see if there is a way.

(Andrew Tavernor) #5

@DanT Impact will detect touch devices and either remove video slides from the slideshow or display the cover image specified in Touch Device Cover Image settings. By using the stacks visibility settings, you are showing/hiding purely dependent on the screen width (not type) and as such large iPad screens will overlap the width definitions for desktop devices. In your case, for example, using hide for small simply hides the stack for devices/browsers when the width is less that approximately 640px

Thus if using visibility you should use a Foundation visibility stack which cane set to detect touch devices rather than just physical width but this is really a bad idea with Impact…

Just using visibility controls is a bad idea because all this will do is hide the display of a stack but not prevent it loading. This means that for all devices, you are loading both the Impact containing the video and the one containing the slides. This is quite a considerable amount of data (and page load time) when only one or the other is ever seen.

To explain a little more about how the Touch Device Cover Image settings work:

When not enabled (in the main stack settings), Impact will detect touch screen devices and remove any video slides from the slide show.

When enabled, Impact will remove all slides from the slide show and just display the cover image specified.

So, in the context of your setup, this really means that you would need the video as the first slide and the image slides as subsequent slides in one stack. Of course the image slides will also get displayed on non touch devices after the video (set the video child additional delay setting long enough to allow the video to complete in full). On touch devices you will just get the image slideshow.

If it is absolutely unacceptable to have the image slides after the video on non-touch devices then you are back to using a Foundation visibility in Touch Device mode but, again, I would advise against this as mobile users will be forced to load the entire video which will never be displayed.

(Daniel Thomson) #6

Thank you Tav for your clear explanation of the issues involved. It would seem that a video followed by slides is the best scenario with the impact stack. In a future release perhaps you would consider a scenario for this stack that would allow us to select either a video or a slideshow without forcing us to use both when using non-touch computers.

I suppose the present alternative is to program separate pages for touch and non-touch devices,

Thanks, DanT