Friday, May 14, 2010

How to ebmed a piece of code

If you want to, for example, add a youtube movie clip to a page, or basically paste any piece of embedding code that a website gives you, just follow these few easy steps.

Firstly, the WYSIWYG editor does not allow you to paste the embedding code into it. If you try to "trick" it by adding it to the Source View section, it will appear to work, but the next time you want to edit the page, it probably won't work at all.

For this I have created a section what I call Page Extras - this allows you to add any number of extras to your page, and come in 3 categories: WYSIWYG extra, which is just a WYSIWYG editor like the normal one, HTML extra, allowing you to paste raw HTML coding onto the page, and Form extra, allowing you to link a form you've built with the Form Builder.

So, to add that raw HTML code (like the embedding code given to you by YouTube, or Google Calendar for example), first go the list of pages. In the Actions column, you will find the various available actions. The second to last action is Page Extras, with the icon 

Go ahead and click on it, and you will see a screen that looks like the following (if you don't have any page extras loaded for the page):

It gives you the option to add either a WYSIWYG extra, HTML extra or Form page extra.

Click on the second icon: 

This will allow you to paste the code given to you by YouTube or whichever site you used, and voila, you've just added raw HTML coding to your page.