Description:
How to correctly embed LOGD demos in Drupal page
Introduction
Using Drupal to publish demos can be useful for giving a uniform appearance. There are, however, a few issues to be considered.
Copy & Paste
A quick and dirty way is to copy and paste an HTML file into the body of a Drupal node. Remember to copy every
<script> that is in the
<head> (excluding the head of course). Also, copy everything that is inside the
<body> tag (again, excluding
body).
Javascript
Although Copy & Paste is quick, you may want to have a more elegant approach. Choose as input format
PHP Code and for each javascript file use the function
drupal_add_js: This function will add at the header a javascript tag with the filename included on it (example below). There are similar functions for
css,
feeds and
links.
If you want to include other elements (for example, an external javascript file) you can use a more general
drupal_set_html_head which allows you to add any tag in a header.
Adding a table of contents
Thanks to the
ToC module, it is possible to automatically generate a table of contents based in the header tags (
<h1>, <h2>, ...). In order to do so, we need to add at the beginning of the body the
[toc]. For most of the tutorials, there is no need for teaser, so we need to add the
<!--break--> string at the very beginning (so we are telling Drupal that the teaser should be of size zero and thus avoid conflicts with the ToC module. Finally, at the beginning we only need to add
<!--break-->
[toc]
at the beginning of our tutorial or demo.
(X)HTML Compliance
Remember to always check that the resulting webpage is valid to the standards. You can use
W3C Validator to do that. A common mistake is not to mark javascript as
data so it may be (wrongly) interpreted as markup: To avoid that you can use
<![CDATA[ right after the
script tag and finish with a
]]> right before the closing
</script>. Alternatively you can use comments (
<!-- code here -->) although the semantics are different (
CDATA is used
to escape blocks of [character data] text containing characters which would otherwise be recognized as markup, while comments
are not part of the document's character data).
Path
In URL path settings choose a meaningful path (usually the title of the demo). Remember to replace whitespaces, for they lead to confusion, and when the URL is encoded, it will change " " to "%20".
Example
<?
drupal_add_js('site/default/myfile.js');
drupal_set_html_head('<script type="text/javascript" src="http://example.org/my/external/file.js"/>');
?>
<script type="text/javascript">
/*<![CDATA[ */
function myFunction(){
alert('this is a function');
}
/* ]]> */
</script>
more HTML here
…