[Resolved] How to display a different View on mobile devices?

[Author]

Posts

[chrisB-30]

Hello,

I am using Toolset views to create a gallery of images that link to individual entries.
I have set up 3 separate views for each gallery so that I can display a different amount of images depending on the device.
15 for desktop
12 for tablet
9 for mobile

I then use css to hide or show the appropriate gallery in the front end.

My question is... is my site generating all 3 views every time the user browses to a page? If so that seems like a very inefficient way to do things as my server needs to work 3 times as hard and takes 3 times longer to generate the page.

I read several posts where in which it was said that this should not effect page load time - but I don't see how that can be the case as the server needs to make 3 times as many requests etc.

Is this the proper way to handle various screen sizes?

You can see a sample here:

hidden link

Thanks!

[Nigel]

Hi Chris

You are right. Simply hiding the alternative galleries with CSS means they are *all* downloaded, making this a much worse solution in performance terms than just including a single gallery for all devices.

You need to make the decision *before* the page is rendered.

So where you insert these Views you can use conditional shortcodes and first check what device information you have to decide whether to display the particular gallery or not.

Conditional display is described here: https://toolset.com/documentation/user-guides/conditional-html-output-in-views/

You would be particularly concerned with using custom functions: https://toolset.com/documentation/user-guides/conditional-html-output-in-views/using-custom-functions-in-conditions/

Now, WordPress has one function that you could use: https://codex.wordpress.org/Function_Reference/wp_is_mobile

But it is very limited, mobile yes or no?

PHP has limited knowledge of the browser environment and it is partly a guessing game as to what the device is based upon the HTTP request headers.

You could write your own function to make a better guess as to whether it is mobile, tablet, laptop, desktop etc.

Or you could use a plugin such as this one, which provides more granular options than the built-in wp_is_mobile: hidden link

[chrisB-30]

Well, the thought of redoing everything in PHP is just too daunting so I decided to just use a combination of css and the wordpress conditional tags.

I tried wrapping my views in conditional tags - like this one on my mobile view:

[wpv-conditional if="( wp_is_mobile() eq '1')"]
[/wpv-conditional]

I tried putting it in various places within the view code but nothing seemed to work.

I registered wp_is_mobile in the toolset settings (see screencast: hidden link )

Is that a proper conditional tag and if so can I wrap my entire view in it? Am I missing something here?

Thanks!

[Nigel]

Hi Chris

I intended that you put the conditional tags outside of the View wherever it is that you insert the wpv-view shortcode, sorry if that wasn't clear.

Something like this:

[wpv-conditional if="( wp_is_mobile() eq '1' )"]
[wpv-view name="mobile-view"]
[/wpv-conditional]

[wpv-conditional if="( wp_is_mobile() eq '0' )"]
[wpv-view name="normal-view"]
[/wpv-conditional]

[chrisB-30]

Ah that worked great!

Thanks again!