5
$atts = shortcode_atts( array(

        'path' => 'https://s.w.org/about/images/logos/wordpress-logo-simplified-rgb.png'

    ), $atts);

The above is a part of the shortcode. In Wordpress text editor this shortcode is produced like this →

[theimg  path=""]

the inverted comma needs to have the image URL of this →

[theimg  path="https://geordiebiker.files.wordpress.com/2011/10/audrey-marnay-longchamp-commando-drive-side.jpg"]

Problem:

when we are in the visual mode of the text editor and we put an image URL in those commas it actually pulls the image, not URL. I have done a gif to explain this.

I believe that this missing sanitization such as esc_url etc, but I do not know the exact fix.

Update: if I put only the URL in the shortcode, the editor adds the <img src=""> tags?

P.S.→ the image can't be uploaded here as it was above 2MB.

Update 11 Jan 2018

$output = '<div class="someclasss">';

        $output .= '<img class="someclass1" src="'.$atts['simg'].'" alt="' .$caption. '" >';

    $output .= '<i class="fa fa-expand" aria-hidden="true"></i>';

$output .= '</div>';

return $output;

The above way the output is rendered in the browser.

Finally, in the browser, it will appear like this:

<img src="<img src="http://www.qygjxz.com/data/out/84/6074239-free-image.jpg" />">

Is there a way we can ensure that in the src="'.$atts['path'].'" this part:

.$atts['simg'].

only takes URL and strips out everything?

  • 1
    Does the shortcode work? The WYSIWYG editor may have JavaScript rules that render the image, but that doesn't mean it breaks the functionality of the shortcode. – Jack Johansson Jan 10 '18 at 4:16
  • Yes, if we go and put the image in text mode(not in the visual mode) than it works. when we do this in the visual mode and then see this in text mode it gives this → [theimg  path="<img src="https://geordiebiker.files.wordpress.com/2011/10/audrey-marnay-longchamp-commando-drive-side.jpg" />"] that means it generates whole HTML not just URL thats the issue. – The WP Novice Jan 10 '18 at 4:18
  • In a sense, it actually breaks the functionality when we use visual tab to render shortcode. – The WP Novice Jan 10 '18 at 4:22
  • You mean even if you put only the URL in the shortcode, the editor will add the <img> tags? – Jack Johansson Jan 10 '18 at 4:23
  • Yes, you are right Jack that what I have shown in that gif. – The WP Novice Jan 10 '18 at 4:24
2

This behavior is most likely intended, and can be disabled. However it might break other features too. There are a couple of workarounds, that you can try.

Break the Image URL and File Name

You can pass the arguments to your shortcode in the following way:

[theimg 
    path="https://s.w.org/about/images/logos/" 
    filename="wordpress-logo-simplified-rgb.png"
]

This will prevent the editor from parsing the URL, but you can get the values and put them together in your PHP code.

Use preg_match()

So, the editor converts the URL to a full HTML image? Fine, let him do it. After the editor passed the full image to the shortcode, we can use a preg_match in our PHP code to extract the URL:

preg_match( '@src="([^"]+)"@' , $img, $match );

This will parse the $img content and return the src of the <img> tag.

  • thanks, let me try implementing this, and I will update you on success or challenges if any. – The WP Novice Jan 10 '18 at 4:40
  • Wordpress release security updates like this one. Could this be the case that the shortcode is not built in such a way that is considered secure? that's the reason that image is not taken as a URL, but through HTML like src? – The WP Novice Jan 10 '18 at 4:47
  • Security is usually implemented in the server level, but your problem is happening in the front-end because of the editor's behavior. I don't think this is a security issue. The editor is just trying to be smart and converting the URLs to actual images automatically. – Jack Johansson Jan 10 '18 at 5:34
  • Here is the full file of the shortcode; I didn't post the full code because it was not needed + I didn't want the whole code to be indexed later and create issues in future. can you guide me where should I use this in my shortcode: preg_match( '@src="([^"]+)"@' , $img, $match ); – The WP Novice Jan 10 '18 at 5:38
  • 1
    You just need to add the preg_match( ... ) before the $url = filter_var ( ... ) and then use $matches[0] instead of $atts['path']. – Jack Johansson Jan 10 '18 at 5:44

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.