[Resolved] How can i make a specific content template for mobile?

[Author]

Posts

[Patrick]

We want to make a content template that will be used for mobile only, and a an other content template for desktop. We don't want to use responsive css / bootstrap, but want other output fields for mobile.
Can you help?

[Nigel]

You can nest Content Templates.

So create a template for mobile and a separate template for desktop, but don't assign them to the post type.

Now create a parent template which you do assign to the post type, and which will be loaded for all posts of that type.

Use the Fields and Views button to insert the mobile and the desktop templates, on separate lines.

You will wrap each on them in conditional shortcodes, but first register the WordPress function wp_is_mobile at Toolset > Settings > Front-end Content for use in conditionals.

Then insert the wpv-conditional shortcodes, choosing the custom function wp_is_mobile as the source.

The function returns true or false, and according to our documentation in that case you should test for 1 or 0.

https://toolset.com/documentation/user-guides/conditional-html-output-in-views/using-custom-functions-in-conditions/

https://developer.wordpress.org/reference/functions/wp_is_mobile/

If you don't like the results from the built-in wp_is_mobile function you could write your own.

[Patrick]

Hi Nigel, thanks. I wrote a shortcode that returns true or false based on window.width.
But the conditional shortcode doesn't work. Can you help?

// Add Shortcode
function img_ismobile() {
  ?>
	<script>
	  var isMobile = window.matchMedia("only screen and (max-width: 801px)");
	  var weergave = isMobile.matches;
	   
	</script>
	<?php
	 
	 return "<script>document.writeln(weergave);</script>";

}
add_shortcode( 'imgismobile', 'img_ismobile' );

[Nigel]

You are mixing JavaScript and PHP in your shortcode definition.

That's not going to work.

The best you can achieve with that is to include some JS in the markup of the page which is currently being constructed on the server and which hasn't been shipped to the browser yet and so is not executed when you need it to be.

If you insert the shortcode on a page (or use it in a conditional statement) what is being returned by the shortcode is the string "<script>document.writeln(weergave);</script>", not the result of running that code in the browser, because the page hasn't even been sent to the browser yet.

There is no easy way with PHP to detect the screen dimensions that doesn't involve setting up cookies or a custom ajax request, and that's why the built-in WP function wp_is_mobile isn't based upon screen dimensions and instead tries to sniff the browser type from the request details.

If you don't like how that, or similar alternatives, work, and you explicitly want the output to be different based purely on the screen width, then using media queries to modify the visibility of content is likely the best route.

[Patrick]

Thanks!