Embedding LOGD Visualizations in Drupal

Level:

TWC LOGD Portal

Contributor:

Alvaro Graves

Description:

How to correctly embed LOGD demos in Drupal page

Table of Contents

Introduction
Copy & Paste
Javascript
Adding a table of contents
(X)HTML Compliance
Path
Example

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  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 () 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
…

Linking Open Government Data

Menu

User login

Navigation

Share