Restrict some images only

Any help would be appreciated. I only need to hide a single image if the visitor says they are under 18.

Hi @goody974,

If I understand right, you want something a bit like what’s at the top of this site: https://www.avfc.co.uk (literally showing my colours!)

If they say yes, show some banners, if not, don’t.

It’s possible to get this, but there’ll be a bit of coding involved (happy to help with it) and will depend on a couple of factors, mostly around how the banners are placed on the site. There’ll also be a few specific settings that you’ll need to use.

So, before I get too into it, how are you adding the banners, are they just an image in content or is there an ad provider?

Thanks
Phil

Hi Phil

Thanks for the response and offer to help.

The example is exactly right. There is a banner shown on 3 pages to advertise a betting website who sponsors the league.

We have been asked to age gate the site to nor show those banners to under 18s.

The banners are simply inserted into the page in a html block. I thought of limiting the views using a css class if age below 18 in the cookie. Could that work?

Best regards

Tony

Hi Tony,

I’ve taken that class approach and extended it a little into a shortcode.

You can see a working demo here:
https://banner-demo.agegate.io/

Clicking yes you should see a grey and a blue banner appear, clicking no they won’t.

Here’s what you need to do to get it working.

Age Gate Settings
As I said before, there’s some specific settings you’ll need to use:

Restriction tab:

• Restrict: All content
• Rechallenge: Unchecked
• Validate using: Unchecked
• Remember: Unchecked (more for the CSS I’ve done!)

Messaging tab:

• Under age validation message set to blank

Appearance:

• Use plugin style on the front end: uncheck

Also worth leaving everything there blank.

Finally Advanced:

• Use JavaScript Age Gate Tick this one

Ok, that’s the settings bit out the way.

Next up, I’ve made a tiny extra plugin which you can download here from dropbox. Just install and activate and it’ll add a short code that you can use wherever you need a banner.

it takes the following parameters:
url: The destination, if required
banner: The image. Can be an ID or a full URL to an image
target: default is _blank, pass anything else to open in the same window
alt: Alternative text for the image
class: CSS class for the div it creates (default is agb)

e.g
[ag-banner-ad url="https://bbc.co.uk" banner="https://placehold.it/728x90" alt="Text"]
or to use an ID
[ag-banner-ad url="https://bbc.co.uk" banner="4" alt="Text"]

This extra plugin adds a bit of javascript to the page, if a user clicks yes, or already has, it’ll look for any of these banner divs and add the image inside. If they click no, or haven’t clicked anything, it’ll just do nothing.

The CSS and JS, feel free to change as you need to.

Hope all that makes sense and works for you, let me know if not or if you have any issues.

Cheers
Phil

• This reply was modified 5 years, 5 months ago by Phil.

Hi Phil

You are a star, that works perfectly!!!

Thank you so much.

Tony

Hi Phil
Just had another request to put a piece of text on the website that is also hidden behind the age gate. Is this possible using a class name around the text so it only shows it the same as the images in the above example?
Thanks

Tony

Hi Tony,

You\d probably need a slightly different shortcode, I’ve updated that previous one which you can get here

You can use it like:
[ag-text]Content to hide[/ag-text]

Some of these things will be part of the core plugin in version 3, which should make life easier!

Cheers
Phil

Hi Phil

Thats great thank you so much, although it seems to strip html from the code. I am trying to add a link to an external url in the footer of each post, linking to the betting sponsor, however it comes up with the text then a href= and no link.

Is this an easy fix?

Hi Tony,

If you can make a couple of little changes to the code I sent before:

in agb.php change line 60 from:

$text = sprintf($text, $atts['class'], $content);

to

$text = sprintf($text, $atts['class'], htmlspecialchars($content));

then in agb.js change line 23 from:

jQuery(this).text(this.dataset.text);

to

jQuery(this).html(this.dataset.text);

Then should work as you need.

Cheers
Phil

• This reply was modified 5 years, 1 month ago by Phil.

Hi Phil

You are the best!! thank you so much!

Best regards

Tony