I-Frame inserting in Joomla

October 31, 2010

Inserting an Iframe in joomla:

Have you ever tried adding up an IFrame code in to HTML of your Joomla article adding. If not then try adding, it will end up in a failure as it did for me.

Joomla does not supports the direct adding up of your IFrame content through the normal article adding or HTML module adding.

And a solution to this is by simply creating a module of your own of type “Wrapper”.

Okay, so without much ado, lets straight away jump in to the execution,

I had my client to add up a venue location map to be embedded from the Google maps, so as usual i had created my article page of location and added up the Iframe, something like this,

<iframe width=”425″ height=”350″ frameborder=”0″ scrolling=”no” marginheight=”0″ marginwidth=”0″ src=”http://maps.google.co.in/maps?

and then to the dismay and surprise, my page was blank as below.. the code IFrame was not even detected and was removed from the article.

The solution i was able land up with was to add a module and bring it on to the article. Wondering how??? Do go by these steps,

Check for the Extensions –> Module Manager, and go for New module on the right top of the menu area.

and now select the wrapper type of module from the list and that shows up the below parameters to enter,

Module Suffix is not a mandatory and is out of context to this issue,

URL is where we enter the URL from the IFrame code,

The height and width has to be as required for the IFrame to be displayed on the page,

Auto Height is optional

Auto Add – has to be Yes

Target is also not a mandatory for this issue.

The most important is the Positon on the left side of the page shown below, where instead of selecting from the predefined one, we can straight away go for typing a Self defined position name,

So finally the Custom position made module of type Wrapper is ready to be used.

How do we add it to our article?

Its as easy as adding any normal content,

Just add the belo code in to the place where you want the IFrame to appear in yopur article,

“{loadposition module_position}”

so to our created module we have the code to be added as,

“{loadposition map_venue}”

and yipee.. we have succeeded and the outcome is as below,

All your queries and comments are welcome. Love sharing 🙂

%d bloggers like this: