1

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.

  • Can you post your PHP code for outputting the image? This is not enough to provide help/guidance – Pabamato Apr 2 '18 at 15:43
  • Sorry I don't know which PHP code you are referring to. I'm not the greatest WP expert obviously :) – Space Money Apr 2 '18 at 16:29
  • IMHO, you're not going to fix the issue by manually editing things (well, you might, but it will take a lot of time). By using the guidance of my solution, you will be able to fix all future instances of the issue. (This is assuming that you need to 'fix' all instances of an img tag in all posts.) Even then, one could fine-tune the solution to only apply to images where you have manually put a specific 'class' in the images you want to add that onclick function to. But the issue needs to be fixed 'programmatically', not manually. And that will take some PHP knowledge, from you or someone else. – Rick Hellewell Apr 3 '18 at 0:22
  • The visual editor strips onclick by default. This behavior can be overridden using the tiny_mce_before_init. You should be able to adapt this solution so that it targets img tags rather than links. – Dave Romsey Apr 4 '18 at 20:55
-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.)

  • To me it sounded more like the <img> is in the post content. Thus the part about the template hierarchy is irrelevant. – swissspidy Apr 2 '18 at 16:05
  • It is not clear what the OP is referencing. I saw it as a theme template issue. You didn't. Not a good reason for a downvote of my answer, IMHO, especially since my concluding paragraph said that more info is needed. – Rick Hellewell Apr 2 '18 at 16:20
  • The image is indeed in the post content. – Space Money Apr 2 '18 at 16:31
  • Then perhaps this will help: sitepoint.com/wordpress-change-img-tag-html , which shows how to add a filter that will change the img tag. This post wordpress.stackexchange.com/questions/81522/… will get you started on how to use the DOM object to change all img tags to add the on-click event. It depends on when you want to add that onclick parameter to the img tag; on post 'save' or post 'view'. I'd personally use the DOM object, since it appears that you want to add that function for all img tags. – Rick Hellewell Apr 2 '18 at 16:36
  • Cheers Rick, I'm going to check it out right away. – Space Money Apr 2 '18 at 16:48

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.