How to create an onclick event on an image in a post?

Question

This is what it should be:

<img onclick="og_load();"  style="cursor: pointer;" src="wp-content/uploads/2018/04/downloadnow1.png" alt="" width="455" height="116"> 

But it keeps changing in:

<img style="cursor: pointer;" src="/wp-content/uploads/2018/04/downloadnow1.png" alt="" width="455" height="116" />

I assume something has to be added in the functions.php but the solution is above my knowledge, anyone could lend me a hand?

Cheers.

Edit: Hmm I read slightly different questions but all stated it has some to do with the WP text editor.

And the code is to call a content locker of which the script I added to the head tag.

In a static site I already got it working but because the editor is keep changing the code it will not call the locker.

I tried this to remove the tag limitation

Method 1: Disable WordPress filtering of script tags

If you trust that your authors won’t get themselves into trouble, you can disable the blocking of script tags from within JavaScript. In wp-config.php within your root web directory, you’ll need to enable custom tags by adding the following line of code:

define( 'CUSTOM_TAGS', true );

Within your functions.php page, you can add the following code:

function add_scriptfilter( $string ) { global $allowedtags; $allowedtags['script'] = array( 'src' => array () ); return $string; } add_filter( 'pre_kses', 'add_scriptfilter' );

Unfortunately that gave this error:

Warning: in_array() expects parameter 2 to be array, null given in /home/a7480/public_html/wp-includes/kses.php on line 1416

And to clarify it's an image in a post that when clicked needs to call the content locker.

Update:

Ok this is weird, When I replace the image url in "inspect element" with

<img onclick="og_load();"  style="cursor: pointer;" src="wp-content/uploads/2018/04/downloadnow1.png" alt="" width="455" height="116">

It does work...

Now to find out how to let it actually work.

Last Update: Sweet mother of God I finally got it to work, the only thing that sucks is if I switch to visual editor it strips the code.

Answer 1

Without specifics, in general, the page code that is output is generated by your theme code. So you would need to look into the theme's template that is used for that page.

The template used is determined by the WordPress Theme Heirarchy , details are here: https://developer.wordpress.org/themes/basics/template-hierarchy/ ; take a look at the graphic which will help you understand which template is being used.

Then, look at that template file to find what is outputting the 'img' tag. That will take a bit of digging. Once you find that code, post it here to get more help.

It is also possible to use the DOM object to modify all 'img' tags with some Javascript, but that will affect all 'img' tags, which may not be what you want. Lots of tutorials on how to do that.

But without more detail of the code that is generating the 'img' tag, it is hard to give you a definitive answer. The above process will help you figure out what that code is.

Added

Here's some code that will change the 'class' attribute in a DOM object:

function fix_img_tag() {
    $dom = new DOMDocument;
    libxml_use_internal_errors(false); // supress errors
    $dom->loadHTML($html, LIBXML_NOERROR);  // supress errors
    // img = change class to myclass (removing any other class statement)
    foreach ($dom->getElementsByTagName('img') as $node) {
        $node->setattribute('class','myclass');

        $dom->saveHtml($node) ;
    }   
    $html = $dom->saveHTML();   // saves the object (all of the html) so we can return it   
    return $html;
}

Based on that code, and the DOM Object itself, you should be able to figure out how to add the onclick element to the img tag. Note that the above code will change all img tags.

Then just figure out how to add the function to the_content() filter... hint: https://codex.wordpress.org/Plugin_API/Filter_Reference/the_content

DOM is an interesting thing to know about. Lots of stuff you can do with the DOM object.

(Note that I am giving you guidance on how to learn how to do the task, and to implement it. It is good to learn things.)