Responsiveness, orientation and carousels

[rgf100]

Not sure if I'm going down a blind alley here or what, but I've been scratching my head for the last two hours and haven't found any documentation so it's time to ask for help.

I'd like to have a three column layout on desktop, roughly

ads - featured content - recent posts
ads - featured content - recent posts
ads - featured content - recent posts
ads - featured content - recent posts

I've got the blocks all set up, no worries. Can do this.

On mobile if I want this to collapse to 

featured content 
featured content 
featured content 
featured content
recent posts
recent posts
recent posts
recent posts

that is also easy enough in the page template

    <div class='ipsGrid ipsGrid_collapsePhone'>
        <div class='ipsGrid_span2 ipsResponsive_hidePhone'>

Which hides the ads column and puts the next two on top of each other.

However what I'm now trying to do is have it display the featured content in a carousel, so something like

<featured content><featured content>
recent posts
recent posts
recent posts
recent posts

And boy, I cannot figure out what causes the carousel to trigger. The Our Picks block template has code such as 

	{{if $orientation !== 'vertical'}}
		<div class='ipsCarousel ipsClearfix cPromotedWidget_horizontal' data-ipsCarousel>
	{{endif}}

Which implies orientation not being 'vertical' is key. But loading on mobile and tablet, regardless of how I hold the device, before or after loading the page, and there's no carousel. If I go into the page template and try and hardcode a change

	{template="widgetContainer" group="pages" app="cms" params="'col2', $widgets, 'horizontal'"}

it makes no difference. So what is $orientation and how is it set? And what's the best way to do this? Should I output the code for both and do some hide / show magic depending on device? That seems inefficient. I looked for an {if device_is_phone } conditional, but couldn't see one.

Anyone want to show me the right tree to bark up?

[opentype]

The $orientation variable just defines whether the content is called in a sidebar block or not. It doesn’t have anything to do with collapsing content and changing the appearance during the collapsing. 

Easiest option to achieve what you want: output your content twice and wrap each one with the respective ipsRensponsive code. So you don’t have to worry about dynamically creating a carousel. It’s alway there but will only show once the page size drops to “tablet” or “phone”. 

[rgf100]

Ok, thanks. I can manage that. But why is the $orientation variable called that? I mean, when you see $orientation !== vertical, what would you expect it to be about?

Also, is there a  {if device_is_phone } conditional? 

[Numbered]

3 minutes ago, rgf100 said:

Also, is there a  {if device_is_phone } conditional? 

Yep. test.php:

<?php
require 'init.php';
\IPS\Session\Front::i();
var_dump(\IPS\Http\UserAgent::parse(\IPS\Member\Device::loadOrCreate(\IPS\Member::loggedIn())->user_agent)->mobile); // return bool

 

[opentype]

11 minutes ago, rgf100 said:

I mean, when you see $orientation !== vertical, what would you expect it to be about?

Like I said: it is used to change the layout depending on whether the content is called in the main column or the sidebar. 

[rgf100]

Ok, thanks guys, very useful.