How to Embed an iFrame in Joomla

0
28

The HTML iFrame command inserts another document or web page into a frame inline with your document. So, as far as a user of the web page is concerned, the document is seamless. Common uses of the iFrame command include inserting a Google calendar into your site, photo galleries, scrolling text, or to show part of another website. This powerful command requires you to jump through a couple of Joomla hurdles to be used successfully, however.

Hurdle No. 1: The filtering options parameters in Joomla

Login as a Joomla superuser and go into the article manager. Click on Parameters. Scroll down through the list and you’ll see Filtering options at the bottom. This section is a security measure designed to protect your site from hostile code. Do you want everyone who has the ability to add an article to your site to also be able to include code?

1. If you have whitelist selected, the only allowable commands are what you list in the Filter Tags and Filter Attribute fields (the bottom two fields on the screen.)

2. If you have no HTML selected, all HTML is stripped when the article is saved.

3. If you have blacklist selected, a default list of commands are blacklisted, including the iFrame command.

4. Additionally, you can select the filtering groups (registered, author, editor, publisher, manager, administrator, super administrator) for which your settings apply.

To be able to get your code to stay in your article and not get stripped out, you need to do one of the following:

1. Turn on blacklist and select all filterting groups except for the groups you want to be able to use HTML.

2. In versions of Joomla 1.5.9 and higher, you can make sure no options are set.

3. You can check whitelist and add iFrame to the filter tags list.

Hurdle No. 2: Your editor

TinyMCE and JCE have the unfortunate habit of stripping out iFrames (and various other bits of HTML) from your document. So, if you have either of these set as your editor and you edit an article, you’ll lose any work you typed in. Try it. Create an article. Click on the HTML button. Insert your code.

This is a test.

There is a line of iFrame code between This is a test and this line.

Click update. Look at your article. Click on the HTML button again and your code will be gone, and you’ll have something that looks like this:

This is a test.

There is a line of iFrame code between This is a test and this line.

So, how do you get around this? Firstly, I recommend installing CodeMirror. It’s a non-commercial package that says it is going to be included in Joomla 1.6’s core package. CodeMirror is nice because it puts the HTML tags into a different color from the text of the article and it doesn’t remove iFrame code. The quick way to get around the editor stripping the iFrame code is to go to the user manager and click on your account. Change your editor to CodeMirror. Alternatively, you do not need to install CodeMirror. You can simply change your editor to “noeditor.”

A longer way, but beneficial, to get around editor stripping is to go to create another user called “noeditor” or “CodeMirror.” Logout and login as this user. Make your document. Then log back in as yourself. I like this method better because the author shows up as “noeditor” or “CodeMirror” and I know not to edit that article as myself, thus losing the code. And yet another way around this issue is to modify your editor’s plugin. If you’re using TinyMCE, go to the Plugin Manager (under Extensions). Click on ‘Editor -TinyMCE’. On the right side of the screen in Plugin Parameters, there is a Radio button for “Code Cleanup on Startup” and “Code cleanup on save.” You can change the “Code cleanup on save” to Never. The JCE editor can be changed by logging in as a superuser, and selecting JCE Administration/Plugings from the Component Menu. Search the list of plugins for “Code Cleanup” and disable that feature.

Hurdle No. 3: Your template

If you embed an iFrame that has a width that’s longer than your content area or module width (depending on where you’re embedding the iFrame), your template will get messed up and could look terrible. Determine the maximum width of your iFrame. Some templates have this column width controlled when you click on the template name in Template Manager. Some don’t. Often you’ll have to calculate the maximum width that’s okay for the content area. Either way, it’s worth a bit of effort to figure this out. One you know the maximum width, add a width attribute to your iFrame code.

What to do?

I can’t tell you what to do because each site has different requirements. I can tell you that for Joomla sites that only have one or two actual authors (say one trainable client and myself), I turn off code cleanup in the editors and I set up no filtering in the article parameters. If I’m dealing with a site with multiple authors, filtering becomes a nice idea.

Source

Leave a Reply