[Resolved] How to hide a view from display

[Author]

Posts

[chantalM]

I am trying to hide a View from displaying on a mobile platform. It is a banner ad. On a desktop it appears, on a mobile it disappears. I have managed to achieve this, however, although the banner does not display, the shortcode of the View does.

Attached is an image with the shortcode text highlighted (can't see it clearly because of the dark background)

I have tried the following ways:

First way:

[wpv-conditional if="( wp_is_mobile() eq 1 )"]
//I DON'T KNOW WHAT TO PUT HERE AS THERE IS NO ALTERNATE VIEW TO DISPLAY//
[/wpv-conditional]

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

Second way:
[wpv-conditional if="( wp_is_mobile() eq '0' )"][types field='sitewide-top' title='%%TITLE%%' alt='%%ALT%%' size='full'][/types][/wpv-conditional]

Both ways work, ie the banner disappears, but the shortcode text is displayed. I am sure I am missing something simple... I don't want 'IF THIS, display THAT'. I want 'IF THIS, display NOTHING'. How do I that?

Thanking you in advance.

[Christian Cox]

Hi, first be sure the wp_is_mobile function is registered in Toolset > Settings > Front-end Content > Functions inside conditional evaluations. If it's not registered, you'll run into problems using it in a conditional.

[wpv-conditional if="( wp_is_mobile() eq 1 )"]
//I DON'T KNOW WHAT TO PUT HERE AS THERE IS NO ALTERNATE VIEW TO DISPLAY//
[/wpv-conditional]

This code is unnecessary. You only want to do something if wp_is_mobile() does NOT equal 1. So there's no need for this conditional, and you should delete everything shown in the code block above.

[chantalM]

Hi Christian, thanks for your response. Yes wp_is_mobile if registered - I did that much. I may have given the impression I know more than I actually do. Would you please advise me the code I need to use please?

[Christian Cox]

May I log in to see how you have this set up? I have activated private reply fields so you can share login credentials securely.

[chantalM]

Hi Christian, I would have to get a staging site set up to give you access which I would be able to do tomorrow but it would be great if you could give me something to try in the meantime?

The set-up is this:

I haven't got the code on the site at the moment. The view is [wpv-view name="sitewide-advert"] and it's the ad banner at the very top of the page. We offer advertisers a site takeover which is a background image and a top ad banner - which you can see currently displayed on the site. On a mobile view, the background image is not viewable but the top banner is and gets in the way of the sticky header which is why I want to hide it on that display.

[Christian Cox]

This is what I would try:

[wpv-conditional if="( wp_is_mobile() ne '1' )"]
  [wpv-view name="sitewide-advert"]
[/wpv-conditional]

Delete all the other code. If the View shortcode is still written out to the page, then I need to take a closer look.

[chantalM]

Hi Christian,

So that code makes it disappear from the mobile view which is fantastic, but it also makes it disappear from the desktop view, and the text is in place. I have left the code in place so you can see for yourself. If you visit the site you will see the text in the left-hand corner. The mobile view is sorted, but what condition should I use to make the View appear on desktop now?

I just added the following as an experiment:

[wpv-conditional if="( wp_is_mobile() eq '0' )"]
<center>[wpv-view name="sitewide-advert"]
[/wpv-conditional]

The desktop now shows but the View shortcode displays there twice (have left it for you to see). Mobile view remains the same which is great - the view is hidden and no shortcode.

[Christian Cox]

but what condition should I use to make the View appear on desktop now?
The shortcode I gave you should make the View appear on desktop, but not on mobile. If it does not, something else is going on. Take a look at the screenshot here. It looks like something is injecting this unrendered shortcode in your site somewhere above the header. How have you added this code to your site?

[chantalM]

Hi Christian, well spotted! I have no idea what that is. Do you think it is a theme thing?

The theme is GeneratePress - they have a Hooks section and I entered the shortcode using the before_header hook.

[chantalM]

Hi Christian, it's part of the Accessibility on GeneratePress. Would you still like access to a staging site, or should I get in contact with them first?

[Christian Cox]

Okay it appears that Toolset's conditionals do not work well here. I did a quick search in their documentation and found that you can use PHP directly in these hooks:
hidden link

So I would use a basic PHP conditional like this instead of the Toolset conditional:

<?php if ( !wp_is_mobile() ) : ?>
[wpv-view name="sitewide-advert"]
<?php endif; ?>

Be sure to activate the "Execute PHP" option for this hook.

[chantalM]

My issue is resolved now. Thank you so much for your help Christian! 🙂