[Resolved] Only load map on large screens?

[Author]

Posts

[Shawn]

We are using Toolset Maps to show a map of locations. Is there any way to only load the map on larger screens? The map isn't that useful on the smallest screens, and I'd like to avoid loading it at all. I don't want to just hide it with CSS. Any ideas would be greatly appreciated.

[Christian Cox]

I don't have an easy solution to prevent loading the map based on screen size, only the CSS solution you would prefer to avoid. We offer an API wpv_filter_force_template that will allow you to switch Content Templates applied to each post on-the-fly using PHP. So in theory if you can determine the User's screen size in PHP, you could call that API and switch to a different Content Template where the map does not exist. There are several PHP libraries out there that claim to be able to help you determine the User's resolution, but I can't vouch for their effectiveness. Here's the documentation for the API I mentioned:
https://toolset.com/documentation/programmer-reference/views-filters/#wpv_filter_force_template

[Shawn]

I will look into that, thanks!

[Shawn]

OK, I was able to use "wp_is_mobile()" to apply a different content template to the page, but I'm getting a PHP error due to there being a view within the content template:

Fatal error: Uncaught Error: Maximum function nesting level of '256' reached, aborting! in /app/public/wp-content/plugins/wp-views/embedded/inc/wpv-user-functions.php on line 156

When I remove the view shortcode the template loads fine.

Here is my filter code:

add_filter( 'wpv_filter_force_template', 'pkc_load_locations_map_template', 99, 3 );
function pkc_load_locations_map_template( $template_selected, $id, $kind ) {
	if ( is_page( 'locations' ) && wp_is_mobile() ) {
		$template_selected = 18863;
	}
	return $template_selected;
}

What am I missing?

[Christian Cox]

The message indicates an infinite loop, which sometimes happens if you have a Content Template placed inside itself, or inside a WYSIWYG field. Can you share the code from the Loop Editor of this View, as well as any Content Templates placed in the View?

[Shawn]

I don't think I have the content template within itself...

Here's the loop content from the view. It does contain another view within it; not sure if that's an issue.

Just to clarify - I have the content template, "Locations", which is being applied to the page via the filter hook above when WP detects mobile. This template is querying the CPT 'locations' and displaying the results using this template:

<div class="location-module" id="location-[wpv-post-id]">
  <h2 class="area-title">[types field='area'][/types]</h2>
  <div class="location-inner">
    <div class="location-details">
      <p class="address">[types field='street-address'][/types]<br>[types field='city'][/types], [wpv-post-taxonomy type="state" format="name"] [types field='zip'][/types]</p>
      <p class="phone"><a onclick="goog_report_conversion('tel:[types field="phone" output="raw"][/types]')" href="#" rel="nofollow">[format-phone number="[types field='phone' output='raw'][/types]"]</a></p>
    </div>
    [wpv-view name="doctors" view_display="layout"]
    <p class="contact"><a class="contact button button-sm email-link icon" data-contact="[types field='email' separator=',' output='raw'][/types]" data-location="[types field='area' output='sanitize'][/types]" data-tracking-id="[types field='phone' output='raw'][/types]" href="#modal-text" rel="nofollow">Email Us</a></p>
        [wpv-map-marker map_id="map-1" marker_id="marker-[wpv-post-id]" marker_field="wpcf-address"]<h3>[types field='area'][/types]</h3><p><a class="contact button button-sm" data-contact="[types field='email' separator=',' output='raw'][/types]" data-location="[types field='area' output='sanitize'][/types]" data-tracking-id="[types field='phone' output='raw'][/types]" href="#modal-text" rel="nofollow">Email Us</a></p>[/wpv-map-marker]
  </div>
</div>

This is the loop item template for the 'doctors' view above:

<div class="doctor-card">
  <div class="thumb">[wpv-post-featured-image id="$doctor"]</div>
  <div class="info">
    <p class="name">Dr. [wpv-post-title id="$doctor"], [wpv-conditional if="( $(wpcf-title).id(doctor) ne '' )"][types field='title' id='$doctor'][/types][/wpv-conditional][wpv-conditional if="( $(wpcf-title).id(doctor) eq '' )"]O.D.[/wpv-conditional]</p>
  </div>
</div>

[Christian Cox]

I think what's happening is the Content Template is being applied to the nested View as well as the page, which results in an infinite loop. Try testing the $kind parameter to restrict the template replacement to affect the page template only:

add_filter( 'wpv_filter_force_template', 'pkc_load_locations_map_template', 99, 3 );
function pkc_load_locations_map_template( $template_selected, $id, $kind ) {
    if ( is_page( 'locations' ) && wp_is_mobile() && $kind=='single-page') {
        $template_selected = 18863;
    }
    return $template_selected;
}

[Shawn]

That seems to have worked, thanks for your help!