SOLVED: Iframe embed google map

How To
1

Bricks Version: 1.3.7
Browser: Chrome 96.x
OS: Windows
URL: (a link to a page that illustrates the issue would be really helpful)

Hi,

I’ve been trying to see if this is a bug or if I’m doing something wrong. I saw in another post you would use the ‘code block’ to place an iframe. I have a CPT with a ‘text’ field in it that houses the ‘iframe’ code from google maps. Great. I however, can’t seem to get it to display when using the dynamic data option in the code block element and pull the field in nor can I get it to show if manually putting the code in the code box as well. The only way I’ve been able to get the map to show is by using a ‘basic text’ element, and pasting the code directly into the text box. The dynamic option doesn’t work on this either.

So, it does work at least, but textblock w/dynamic and codeblock manual & dynamic do not work. Any suggestions?

Thanks,

Lyle

2

I found the issue, but it appears it was either intentional, or a bug in that it was missed to allow execution of the code when pulled in from a dynamic location such as a ACF field. @timmse Thoughts?

image
image1638×790 186 KB

image
image1187×916 135 KB

3

Hi Lyle,

the code execution is a security feature to make sure that only allowed code will be executed. As long as the code is dynamic, you can’t control it because you don’t know what will be executed.

What you can do instead is to use the code block and render the field with PHP (check the ACF documentation for more customization options):

<?php 
  $iframe = get_field('textarea'); //this is your acf field

  if($iframe) {
	  echo $iframe;
  }
?>
4

This worked. Thanks.

In that I get there are ‘security’ issues that ‘could’ happen, I would ask why the option however isn’t given for the dynamic use. In that whoever is coding the site is in control of what fields are going to be targeted for execution. I think that option should still be provided to the end user vs. having to code stuff like the above.

5

Yes, but the one who allows the execution doesn’t have to be the one who enters the code. This is at least for me a logical explanation, but I ask thomas again if this is intentional :smiley:

6

Hi, any idea how to do the same with pods?

7

Hi, I’m trying to do the same thing with metabox. any luck?

8

@timmse any solution on working with Pods?

9

@webmate I managed to have an external video iframe with pods and code block in bricks:
The field named ‘video_embed_code’ was of type wysiwyg and I inserted the html iframe code there. On the bricks template for that cpt I added a code block like this:

<?php
$field_name = get_post_meta( get_the_ID(), 'video_embed_code', true );
echo $field_name; ?>

Hope this helps.

1 Like
10

Might someone know how to do this with a JetEngine CPT? Or put in another way, what is the JetEngine equivalent of ACF’s get_field()?

I’m able to get the iframe URL field using JetEngine Macros (i.e. “%jet_engine_field_name|iframe-url|field_value%”), but I don’t think the Code widget in Bricks support JetEngine Macros :frowning:

11

Update: found another way to implement this on JetEngine’s documentation (Cannot Display Iframe with Dynamic Widgets — JetEngine | Crocoblock).

The solution is essentially:

  1. Add a filter to wp_kses_allowed_html (in a Snippet) to enable iFrames in Wordpress (or is it just JetEngines?).
  2. Add a WYSIWYG meta field in the CPT with JetEngine.
  3. Store the iFrame code in the CPT meta field using ‘text’.
  4. Access the meta field using Bricks Text or Rich Text widget
  5. Viola! The iFrame is now displayed.

The Snippet - which has a few more iFrame properties added to the one in the above Crocoblock documentation - for posterity:

add_filter( ‘wp_kses_allowed_html’, function ( $tags, $context ) {
if ( ‘post’ === $context ) {
$tags[‘iframe’] = array(
‘title’ => true,
‘frameborder’ => true,
‘width’ => true,
‘height’ => true,
‘style’ => true,
‘src’ => true,
‘type’ => true,
‘allowscriptaccess’ => true,
‘allowfullscreen’ => true,
‘allownetworking’ => true,
‘scrolling’ => true,
);
}
return $tags;
},10,2);