Using IFRAMEs to add powerful features to your VB5 Forum

[BirdOPrey5]

In previous versions of vBulletin to create a page based on an IFRAME required either creating a custom PHP file and template or installing a 3rd party modification. With the new Site Builder in VB5 Connect it is now quick and easy to add content to your site via IFRAMEs.

In this example we will add a powerful online photo-editor to your site. Users will be able to load, edit, and save images in a photoshop like interface. The photo editor is provided free by http://pixlr.com. They allow it to be embedded in an IFRAME on your site using code like this:

<iframe src="http://pixlr.com/editor/" scrolling="no" width="100%" height="600">This page requires an IFRAME compatible browser.</iframe>

Scrolling options, width, and height are all values we can choose. I strongly suggest using 100% width on IFRAMEs with a set height in pixels. This usually renders well in most browsers. Anything in-between the <iframe> tags will be shown in browsers that either do not support IFRAMEs or have them turned off- At this time I know of no browser that doesn't support IFRAMEs but you should include a message or something just in case.

To integrate the editor into VB5 Connect we must first create a new page-

With "Edit Site" turned on, click on the "New Page" button at the top of the page:



Next, click on "Change Layout" and choose "100%"



Next click on "Add Modules" choose "Generic" and Select "Static HTML"



Now drag the "Static HTML" module onto the page and release. Then click on the pencil icon to edit the module-



On the configuration page enter "Photo Editor" for the title, and paste in the code above as the Static HTML content. You can drag the corner of the box to make it larger so you can see all the content you pasted in. Finally click SAVE.



Now, back at the top of the page, click "Save New Page"



Next you are prompted to give the page a name, call it "Photo Editor." You will see the URL is automatically created you can keep this default URL unless you have reason to change it. Next add Keywords and a Description for your Meta tags. This will help search engines and other pages determine the content on this custom page. You must also provide a name for the new custom template this page will use, use something that describes the page, I chose to call it "photoedit." The exact value isn't important. Finally click OK.



You should now be returned to the new page and photo editor should be visible in all its glory. If you do not see it, refresh the page-



You now have an integrated photo editor in your site.

There is other content you can add into IFRAMEs as well although the pxlr photo editor is probably the most popular. Before wrapping an IFRAME around a page please make sure the site allows you to do this. Many sites like IMDB and others specifically mention in their terms of service you are not allowed to "Frame" them on your site. Generally government sites like NASA, The National Weather Service, and the like do not have any such restrictions. If you found the URL to weather map for example on weather.gov you could frame that.

Finally now that you have your photo editor you may want to add it to your Navbar so users can find it. To do this make sure Edit Site is enabled again and click on the "Navigation Bar" button- and on the page that comes up choose "New Sub Navigation Option"



Enter the Title of "Photo Editor" (or anything else you wish to call it) but in the Target URL make sure you use the URL that was automatically created when saving the IFRAME page, for us it was "PhotoEditor" (no space). Optionally you can edit the usergroups allowed to see this link.



Press OK and finally "Save Changes" at the top of the page.

You have now added the Photo Editor as a sub-navigation menu item and you will see it like this:



Now users will have easy access to your site's photo editor. Of course you could have made this a full nabvar button instead of a sub-navigation item if you wanted, or you could link to it in any other way you choose.

[keiahnig]

Fantastic, thanks for the tutorial. Much appreciated

[IggyP]

hmm, i tried this with https and it forced a new tab redirect instead of loading in an iframe...cant even edit the page again to delete it because it redirects too fast...hmm

[BirdOPrey5]

In the Admin CP -> Settings -> Options -> General Settings there is a setting to disable PHP and HTML modules. That will let you get to the page and edit the module.