From iframe to Joomla article with Sourcerer

December 22, 2020

From iframe to Joomla article with Sourcerer

This post is a shameless plug for an especially useful plug-in from Regular Labs called Sourcerer. I'll demonstrate some of the base functionality with the free version of Sourcerer.

If you can run a piece of PHP code on your website and within an iframe, it is possible to run your code natively in a Joomla CMS article with Sourcerer with very few changes. I will share a couple caveats I learned along the way.

Step 1: Get your PHP code to run natively on your website in the CMS

Before you can get your code to work on your CMS in an iframe, it needs to work as a standalone webpage.

Here is a screenshot of my Flickr listing that filters by "smith" in the photo titles and descriptions.

It's a basic fill-in-the-blank query form. A string of text is typed into a text input form. The submit button triggers a GET request to the same web page. While building a page, a GET call is made to a Flickr API and a table is built below the form.

Here is the same web page outside of the iframe.

Below, this web page is inserted into Joomla with an iframe wrapper menu link.

So now at this point, there is a working PHP webpage in a Joomla link iframe.

Step 2: Install the Sourcerer plug-in

In your administration screen, you can install the plug-in by going to the install menu by navigating Extensions->Manage->Install and then searching for "sourcerer".

Once installed, you will see the Sourcerer plug-ins here at Extensions->Plugins.

Step 3: Create the article

This is the same process to create any article from the back end. Navigate Content->Article->New Article. Set your title the same as the iframe menu link. Your alias will be auto generated if you don't type one in.

For Category, I pick a category that is not visible on any navigation on the website.

At the top of the article, type your first line "{source}". The last line of your article will have the tag "{/source}".

Copy your whole code from your editor and insert it between the {source}{/source} tags as text. If you are using the JCE editor, you can right click and choose Paste as Plain Text.

At this point you can save the article.

Step 4: Create a link to the article

When you create a new link on the website, choose Article->Single Article.

Select the article that you had just created in Step 3.

Initially you will want to set the Access to Special until you are ready to release it to the public.

Remember the Link address for the next step.

On the options tab, set Show Title to Hide so that there is not a duplicate Photo Search for both the link and the article title.

Step 5: Cleaning up the article

In the original code, I had the PHP script call itself. I got the name of the script file with this line:

$currentFile = basename($_SERVER["SCRIPT_NAME"]);

Later, the form is defined this way in PHP.

<form action="<?php print $currentFile ;?>" method="GET">

This is meaningless by itself in Joomla. Every page on the website is an extension of index.php with a query string. Insert these hidden tags right below the form tag to extend the query string.

<form action="<?php print $currentFile ;?>" method="GET">

The $articleId variable is set with this Joomla API function, which is set higher in a <?php … ?> block.

$articleId= JFactory::getApplication()->input->getString('id');

By not hard-coding $articleId, this page can be copied to another article and link with fewer changes (i.e., portability).

The value in the search box is read as a GET.

$Lname = "";

if (isset($_GET['Lname'])) $Lname = $_GET['Lname'];

And later printed into the form.

<input type="text" value="<?php print $Lname ?>" name="Lname" size="40" id="Name" />

Another change I made is to remove the Hide Thumbnail option from the form. The option wasn't used often.

Otherwise, the new page looks the same as the original web page.

If you make any edits to this code in the body of the article, ignore formatting. For readability, I remove hyperlinks where I needed to make changes around the form tags.

I was fortunate that my ini_set('include_path'…) and require_once functions worked without modification.

Once everything looks good, set the Access to Public.

Step 6: Shut off caching

For years I ran my Joomla website with Conservative Caching turned on. I was told that made my site run faster. However, the cache clobbers the query value from the text box. If I search "smith" the first time, it will keep searching for "smith" even if I try to search for "jones" or something else in subsequent submits, until I clear the cache.

You can shut off caching here: navigate System->Global Configuration->System tab. Scroll down to Cache Settings. In the System Cache dropdown, select "OFF – Caching disabled".

I found no performance impact by making this change. My PageSpeed Insights reports results were still 49 for mobile and 83 for desktop. Your mileage will vary.

Helpful links:

Bob's Tech Corner

"From iframe to Joomla article with Sourcerer"

https://bobstech.rvnllc.com

Bob Nightingale, info@rvnllc.com

Created 22-DEC-2020

Bob's Tech Corner