[Resolved] Toolset Layouts on mobile

[Author]

Posts

[garenM]

Hi,

I want to know if there is a possibility to use a different layout for a mobile devise. So for homepage for desktop i want to use a "Layout 1" and for mobile device i want to use the "Layout 2"

[Christian Cox]

Hello, there isn't a way to accomplish this within Toolset, but you could use custom code and a 3rd-party plugin to achieve something similar.
1. Install or create a plugin or logic like "Conditional Display for Mobile by WonderPlugin" plugin - https://wordpress.org/plugins/wonderplugin-conditional-display/
2. Create your layouts as used for the DESKTOP design (assign to content and use as usual)
3. For mobile design duplicate the desktop layouts, rename them so "mobile" is somehow distinguished from desktop layouts in the slug
4. redesign your mobile layouts as you want
5. Down load and install MinimaX theme or create a proper Layouts theme, then apply this logic for Layout assignment in the code:

if ( !wonderplugin_is_device('iPhone,iPod,Android') ) { //Is desktop
  if ( defined( 'WPDDL_VERSION' ) && is_ddlayout_assigned() ) {//has layout assigned 
    /* Template Name: Main Template */
    //whatever you want for when Layout is assigned (desktop situation). Usually:
    get_header( ); //Call 'header-layouts' if you plan to style the header differntly
      the_ddlayout( ); // Load a default 'default-layout-slug'. Layout must exist
    get_footer( ); 
  }
 
  else {//has no layout assigned
    //add a native loop maybe?
  }
}
 
else {//is not desktop
  get_header( ); //Call 'header-layouts' if you plan to style the header differntly
    if (wonderplugin_is_device('iPhone,iPod,Android')){//is some specific device    
      $assigned_layout_slug = get_layout_for_post_object().'-mobile';//call same layout as assigned to post but with suffix -mobile
      if ( ddl_layout_slug_exists($assigned_layout_slug) == 1) {
        the_ddlayout($assigned_layout_slug, array('post-content-callback' => '', 'allow_overrides' => 'false') );
      }
      else {
        the_ddlayout();
      }
    }
  get_footer( ); //Call 'footer-layouts' if you plan to style the footer differently
}

This code assumes you name your layouts for mobile with the same slug as the desktop version, plus "-mobile". So the "home" desktop layout has a mobile version "home-mobile".

[garenM]

My issue is resolved now. Thank you!