Shortcode putting html such as

by 
$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 Answer
1

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="https://wordpress.stackexchange.com/questions/290646/([^"]+)"@' , $img, $match );

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

Leave a Comment