Home

Embedding LOGD Visualizations in Drupal

Level: 
TWC LOGD Portal
Contributor: 
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
…
Your rating: None Average: 3 (1 vote)
  • Login to post comments
  • 4239 reads