0

This is a rather specific and weird issue that is really bothering me now.

Here's the setup.
- I'm using Elementor Pro and I've created a single page template.
- I have four shortcode widgets on the page that is hooked up to ACF text fields.
- The ACF text field takes a shortcode source of an iframe from airtables as the argument (eg [airtable-view if='src xxx']. I have created the shortcode function and added it as a plugin. This works properly (code below).

The problem is this.

When I paste the four shortcodes directly in the template, all four of them are rendered properly in the final page. But when I use ACF and add the exact same shortcodes into the respective fields, only the first and third iframes are rendered. The second and third are ignored (the elements are not present even when I checked using the Inspector). Similarly, if I remove the first field, only the second and fourth are rendered. If the second one is removed, only the third one is rendered (the fourth one is skipped). And finally if all three are removed and only the fourth one is present, the fouth one is rendered but everything after that is not rendered.

I've tried everything I know to figure out what the issue but I think it's something related to the way Wordpress or elementor renders the pages from the template. I tried to isolate the problem by creating just four shortcode widgets on another template page and doing the same and this exact issue occurs. This looks like some async issue and I honestly have no idea how this works. If someone can figure it out, any help would be appreciated. The debug logs don't report anything related to this.

Here's my shortcode callback (it's used as a plugin).

function shortcodeToIframe($atts){

        $iframe = shortcode_atts(array('if' => 'Default'), $atts);
        $html =  '<div class = "airtable-view">' .'<iframe class="airtable-embed"'. $iframe['if'] . '</iframe>' . '</div>';
        return $html;
}


add_shortcode('airtable-view', 'shortcodeToIframe');

The shortcode I use is this

[airtable-view if = 'src = "https://airtables...">']

2 Answers 2

1

The iframes not showing is probably caused by the shortcode parser freaking out by how you pass the parameter to it. I tested your code example / shortcode (added 4 times to the post content) and here's what I got as a result,

<div><iframe class="airtable-embed" &#8217;src<="" iframe=""></div>
<div class = "airtable-view"><iframe class="airtable-embed"&#8217;src</iframe>

It might be better idea to format your shortcode callback function along these lines,

function shortcodeToIframe($atts){

  $default = array(
    'src' => '',
  );
  $atts = shortcode_atts( $default, $atts );

  if ( ! $atts['src'] ) {
    return;
  }

  return sprintf(
    '<div class="airtable-view"><iframe class="airtable-embed" src="%s"></iframe></div>',
    esc_url( $atts['src'] )
  );

}

And then use the shortcode like this,

[airtable-view src="http://www.domain.com"]

This would make the parameter explicit and there would be no extra quotes, double quotes, or equals signs to confuse the shortcode parser.

1
  • 1
    I have more parameters actually like frameborder and width and height and all that which is why I made it like that. But I get your point. The tags were getting messed up and that's probably why it was acting that way. I did a workaround by preg_replacing the incorrectly parsed tags and then outputing it as a div tag rather than an iframe. And then, in the page, I have a JQuery function that swaps all the div to an iframe once the page load is complete. It works well. I'm accepting your answer as it is the right way to do it. Thanks for your input.
    – Akhil
    Aug 28, 2019 at 14:41
1

As a work around you can make it work with the Elementor Shortcode Widget and for example this iFrame Shortcode Plugin: https://de.wordpress.org/plugins/iframe/

Then in the Elementor Template you make use of the before and after parameters of the Shortocode Widget with a Custom field, like this:

before: [iframe src=" after: " width="100%" height="500"]

And in the Custom field, in the Backend just only put the iFrame Url.

See Screenshot here: enter image description here

Alternative: use a Crocoblock Repeater Field, there is iframe Output possible: https://crocoblock.com/knowledge-base/articles/jetengine-dynamic-repeater-widget-overview/

A bit off topic (not really iFrame related): This is really powerfull, for example i managed to get dynamic Instagram Posts based on Usernames in User Profile Pages.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

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