I-Frame inserting in Joomla

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?
hl=en&amp;q=gmap&amp;ie=UTF8&amp;ll=13.074874,80.25419&amp;spn=0.045079,0.009213&amp;output=embed”>
</iframe>

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 🙂

Joomla installation.. do it now

Before we start in to our joomla installation lets make things available that we may need in the whole work for our installation..
we will need a WAMP server to make our joomla work on a Window’s local host, for which we might need to download Wamp and also the joomla pack from the below given links..

For WAMP server – http://www.wampserver.com/en/download.php

For Joomla – http://www.joomla.org/download.html

alright, so once the stuffs are ready lets kick start with the creation of a database of our webite in joomla. This can be done, by doule clicking on Wamp which display wamp icon in our pallet in the task bar near the clock pane down here. On left click on this icon we get a option of phpMyAdmin, click and this opens a page in our browser which is our Wamp database home page. Here we just do as shown below to create an instant of our joomla site database…

just click on “create” will finish our task.

Then comes the real installation of our joomla site. So as downloaded from the above link we get a rar file, extract files in a folder named joomla in the drive path like “C:\wamp\www\”. Now simply get to your browser and type the url – “http://localhost/&#8221; which gives the localhost WAMP dashboard as shown below

click on the joomla folder in the dashboard, which opens up the easy to install wizard of joomla.. lets check the steps one after the other..

Step 1: Language – select your language from the list and click on next,

Step 2: Pre installation check – just check if all the settings are standard as are shown,

Step 3: License – Just give a look at the license and go next if you are comfortable with it, do not forget Joomla is a complete open source 🙂 🙂 is that not a great thing for a developer.. hurray.

Step 4: database – this is where you configure the database settings for your joomla site. So the values as per a Wamp localhost are, for your host name it must be “localhost”, user name as “root” and the password remains blank. There after simple click on next and so our database is done here.

Step 5: FTP configuration – As we are on a localhost we do not have to bother or worry about this and simply select “no” and go on to the next step.

Step 6: Configuration – And here comes our site configuration settings, first of all lets give our joomla site a name.. i have given it as “joomsite”, make your own choice. Then lets give a email id for adminisrator’s purpose. But since we are on a localhost, the mail does not makes any sense for now. But it is important once you take youe site online. Fine then we have a option to enable whether we need any default items created prior to our site launch that will help any starter. So make your choice and finally its all done, ignore all other settings here on Configuration for now.

Step 7: Finish – So its all done for the installation. Is n’t it simple. It was like we just spent a break but have almost done it all for once.. here on its all fun working on Joomla, we just have to play with all the fantastic resources that joomla provides. Here we get a message stating us to delete the “install” folder from the joomla,

we might get to spot this folder at “C:\wamp\www\joomla”,here just delete or remove the install folder and once again come back to the installation page and give the url as “http://localhost/joomla/administrator/&#8221; then as a admin use the password we gave in the installation..with the email id that we specified.
This is how your admin panel looks..

and this is your default joomla site which can be viewed by cicking on the Preview option in the admin panel on the top to show our site as below..

This is just an empty stuff… i woul share few magic og joomla, just visit the links of few good and awesome joomla made websites,

http://quizilla.teennick.com/

http://cricbuzz.com/

http://www.lakefranciscottages.com/

http://www.guggenheim.org/

http://www.tgdaily.com/

http://ihop.com/