I have a page created with Elementor. Nothing fancy. Just a Section, inside of which there is a Column, inside of which there is an HTML Code block. Inside the HTML block there is just an iFrame, like <iframe src="https://app.squarespacescheduling.com/schedule.php?owner=xxxxxxxx" title="Schedule Appointment" width="100%" height="800" frameBorder="0"></iframe><script src="https://embed.acuityscheduling.com/js/embed.js" type="text/javascript"></script>...
The above URL of the iFrame is the general appointment scheduling of the owner xxxxxxxx of the Squarespace; but there are also more specific URLs, like <iframe src="https://app.squarespacescheduling.com/schedule.php?owner=xxxxxxxx&appointmentType=yyyyyyyy" title="Schedule Appointment" width="100%" height="800" frameBorder="0"></iframe><script src="https://embed.acuityscheduling.com/js/embed.js" type="text/javascript"></script>, which refer to a specific task yyyyyyyy of the owner xxxxxxxx...
So what I basically want is to be able, instead of creating 15 different pages, each with the appropriate yyyyyyyy task value, to create just one page withouth the appointmentType param in the iFrame's URL, and then pass somehow the param with the appropriate value, when calling the page itself.
Is this even possible though, or should I do it the hard/boring way of creating each page for each task? TIA
OK, this was relatively easy once I found the correct resource... So I'm sharing it here, in case anyone needs it in the future!
Basically it's all explained in this video: https://www.youtube.com/watch?v=CBLIWeSmz30
The only difference in my case was that probably the code of the iFrame was complicated enough, and I was hitting some escaping issue, resulting in the last part of the code (<script src="https://embed.acuityscheduling.com/js/embed.js" type="text/javascript"></script>) to getting lost...
So I had to deviate slightly from the suggested solution, and instead I followed the shortcode solution. So I added a shortcode with the following snippet:
add_shortcode('scheduler_iframe', 'scheduler_iframe_func');
function scheduler_iframe_func($atts)
{
return '<iframe src="https://app.squarespacescheduling.com/schedule.php?owner=xxxxxxxx&appointmentType=' . $atts['course'] . '" title="Schedule Appointment" width="100%" height="800" frameBorder="0"></iframe><script src="https://embed.acuityscheduling.com/js/embed.js" type="text/javascript"></script>';
}
From there, it was just a matter of setting up correctly the appropriate settings in Elementor. So for that, I replaced the HTML block with a Shortcode block, and instead of adding the shortcode in the appropriate field, I chose Request Parameter, then I set it up like in the images below:
Finally visiting the URL of that page and passing the appropriate ?course=yyyyyyyy querystring in the URL, was enough to fetch the appropriate iFrame that I wanted to show!
Related
We are creating a service which hosts videos. Users upload videos to our website, and we provide embed codes for playback on their websites.
We have a number of users currently using Wordpress, so we figured we would create an oEmbed service to let users easily copy/paste links into their posts.
We followed a tutorial, and and registered the following provider in wordpress via wp_oembed_add_provider in functions.php
wp_oembed_add_provider('https://vectorly.io/*', 'https://vectorly.io/wordpress/embed');
We set up an oEmbed service endpoint (https://vectorly.io/wordpress/embed?url=....), which returns the following json
{
"version":"1.0",
"type":"video",
"provider_name":"Vectorly",
"provider_url":"https://vectorly.io/",
"width":"600",
"height":"340",
"thumbnail_width":"600",
"thumbnail_height":"340",
"thumbnail_url":"https://s3-us-west-2.amazonaws.com/m.cdpn.io/screenshot-coming-soon-small.png",
"title":"NVP DemoDay - Vectorly",
"html":"<iframe src=\"https://api.vectorly.io/embed/demo/ba37b243-46c4-4f60-9a12-f6885b95c661\" width=\"600\" height=\"340\" frameborder=\"0\" allowfullscreen />"
}
Embedly seems to validate the output
Copying and pasting one of our links (https://vectorly.io/watch/ba37b243-46c4-4f60-9a12-f6885b95c661) into the Wordpress post editor does seem to successfully grab the oembed details
But the embed content editor block doesn't show a preview of the video
The actual published post looks fine though
It seems that the preview block is loading the iframe properly, but is just setting the width and height as 0 during the preview.
Looking at other non-whitelisted oembed providers, this issue doesn't seem to come up, so I think I'm doing something wrong, but I can't figure out for the life of me what it is.
Mucking around in various Wordpress files, I think that other oEmbed links (even from non-whitelisted 3rd parties) are doing something to trigger sizing of the preview Iframe in Javascript.
Any insight on this would be appreciated. Otherwise, we'll just forego oEmbed and stick with vanilla html embed codes
In case anyone else stumbles on this issue in the future:
You need to provide iframe close tags when you send oembed responses to wordpress
I.E. The following does not work
<iframe src="..." />
The following does work
<iframe src="..." ></iframe>
Adding a figure tag improves the result. See the fixed oEmbed output from our server
{
"version":"1.0",
"type":"video",
"provider_name":"Vectorly",
"provider_url":"https://vectorly.io/",
"width":"600",
"height":"338",
"thumbnail_width":"600",
"thumbnail_height":"338",
"thumbnail_url":"https://s3-us-west-2.amazonaws.com/vv-raw-videos/ba37b243-46c4-4f60-9a12-f6885b95c661.png",
"title":"NVP DemoDay - Vectorly",
"html":"<figure><iframe src=\"https://api.vectorly.io/embed/demo/ba37b243-46c4-4f60-9a12-f6885b95c661\" width=\"600\" height=\"338\" frameborder=\"0\" allowfullscreen ></iframe></figure>"
}
Can we skip a diazo error and prevent page crash by replacing it with a nice message in page? Something like: Your content you want to show in this page is not created or published. Please check this section /source/homepage-content-sample-section.html.
<!-- Images slider section -->
<replace css:theme="[data-diazo='my-images-slider']"
href="homepage-content/homepage-images-slider" method="document"
css:content-children="#content-core" />
<drop css:content="#content-core [data-diazo='my-images-slider']" />
I have a page in Plone for each section in Homepage, that contains html code easy to edit. The problem is if a page is missing or private the homepage is broken.
Calling user-managed contents with href in a Diazo rule is like playing Russian roulette. If the page is not existing, there is not way to prevent the page crash.
The best approach is to call a developer-defined URL in charge of retrieving the content if it exists and that will just gently return nothing if the content does not exists.
Rapido is a very easy way to do that (you create a Rapido block which can be called like that: href="##rapido/myapp/blocks/get-content-for-my-homepage", this URL will always work, your page will never crash whatever the users have done with the content).
So I'm trying to debug a somewhat confusing problem. I'm using a Wordpress plugin for a Topspin store that uses colorbox to popup a window to display more information about an item. Here's the site: okgo.net/store. In the backend code for this page a div block is created containing links that that should look like this:
<a class="topspin-view-item" href="#!/77022">
The php that does that is as follows:
<a class="topspin-view-item" href="#!/<?php echo $item['id']; ?>">
The problem is that what is being spat out at the end is not that. It looks like this:
<a class="topspin-view-item" href="http://okgo.net/video-store/#!/89712">
I've understood from another post on here that the default behavior of Wordpress is to fill empty hrefs (ie href="") with the site url. So my guess is that Wordpress is for some reason interpreting this as an empty href? Except that that doesn't seem quite right either.
I've played around with this a bit. One thing that happens is that if I remove the has from the above PHP the siteurl is not output at all. That of course breaks my code.
Any ideas? Any help would be warmly appreciated.
The way we ended up fixing this for those who may be interested is by simply adding the following line of code to the jQuery handler that dealt with the on submit event:
event.preventDefault()
Perhaps this will be of help to someone...
I have a drupal website. I want to generate an Iframe with content from my drupal site, that other sites can embed.
How I think this can be achieved:
Method 1: Create a php script that is autonomous from the drupal engine.
Import the configuration file and hence gain access to the database. Generate the content as a standalone webpage. Distribute the url of this script as the iframe's source url.
Problems: cannot provide drupal functionality within the iframe such as interaction with logged in user.
Method 2: Create the iframe from within drupal.
Create a new module that defines a menu entry using hoom_menu (the url for the iframe). Define the content of the iframe from the callback function of the menu entry. Then Somehow assign a custom page.tpl.php theme for the desired iframe url so that only the content of the iframe is rendered without all the other page elements (blocks, menus, footer, etc.).
Any comments especially for method 2 will be greatly appreciated! :)
I have done exactly this, just this week!
I created a custom module that outputs only the content that I want (using hook_menu()). Then I created a page template (page-mycustommodule.tpl.php) that only has
<?php print $content; ?>
within the <body> tags.
That was basically all. To find out the name that your page template needs to have, use the devel and theme_devel modules, then just click on your page and it will tell you which templates it looked for.
One thing to look out for: any links in the iframe will only change the contents OF THAT FRAME, so when your module creates links, use the proper target to make the parent page jump to the new URL:
l('link text',
'node/' . $mynode->nid,
array('attributes' => array('target' => '_parent')));
I found the answer by Graham very useful. Unfortunately I don't have enough reputation on this site to add a comment so I will have to put my comment in an answer.
5 years on, the information has changed slightly:
The module theme_devel now seems to be called devel_themer instead.
In D7, the template naming pattern is slightly different with 2
hyphens: page--[front|internal/path].tpl.php (see docs)
D7 templates are slightly different based on render arrays, so the template will need to be something like print render($page['content']);
method 3
you can use this module https://www.drupal.org/project/entity_iframe that allows you to create IFRAME READY webpages
install it and go to the display settings of you content type that you want to use as iframe content admin/structure/types/manage/CONTENTTYPE/display
choose the IFRAME view mode and choose the fields you would like to be shown
and then use url like this domain.com/entity_iframe/node/NID and you will have a display with no extra headers footers etc ...
By default a sample EMBED/IFRAME code is provided to the admin under each node the settings
<iframe width="100%" height="300" src="domain.com/entity_iframe/node/96" frameborder="0" class="entity_iframe entity_iframe_node" id="entity_iframe_node_96" allowfullscreen="true" webkitallowfullscreen="true" mozallowfullscreen="true"></iframe>
The settings in admin/config/system/entity_iframe control some of the details of the embed code
For complete control of the theme used you can use in combination with https://www.drupal.org/project/entity_iframe_theme
What do you exactly need to iframe?
A node? A block? Should it be static or dynamic?
You can simply create a node with a php filter and generate the iframe output.
Then you can put this output between <pre> tags to display it as code that users can copy/paste in their site.
I'm fiddling with a WordPress theme. I'm aware I can use wp_enqueue_script in my header.php to load WordPress's supplied jQuery library.
I was just going to use wp_enqueue_script in my header, but it seems inefficient when I only want to use it on a particular Page (just on one single page with a particular page_id.)
Given that, what's the best way of including jQuery only on one particular Page?
Presumably I can't do page_id detection in header.php, because that won't be in The Loop, right? But I'm guessing I'm missing some fairly obvious method -- I'm fairly new to theme development...
Thanks!
Yes you can, is_page doesn't need to be called in The Loop, since it doesn't change when The Loop runs. So is_page(42) will only return TRUE if you're on the page with id 42. It also works with the page title or name (slug), which might be more future-proof if you ever replace delete this page and replace it with a new one with the same slug.
here is an article about dynamic body ids
http://perishablepress.com/press/2009/05/26/dynamic-body-class-id-php-wordpress/
after you get your page name you can add a conditional statement in your template index.php that says something like this in your page header or before the closing body tag:
// $page_name would be the page name you extracted with a function from the post
if($page_name === 'about'){
echo '<script type="text/javascript" src="jquery.js"></script>'
}