As the learning curve for out-of-the-box content management systems flattens out, hand-coded HTML pages are becoming something of a rare bird. With services like Facebook, Wordpress, Tumblr, and a hundred others, there simply isn't as much call for hand-coded, one-off web sites. However, they still have their place - either in sites like this one, where I like posting experiments in a variety of languages, or for more professional organizations, where HTML wireframes or interactive comps would be more useful than static Photoshop documents and Powerpoint presentations.
Therefore, I took it upon myself to figure out how to serve up individual, custom HTML pages from within the confines of this site, which is a custom installation of Drupal 7, hosted at Drupal Gardens, and served up as cloud-based Software-as-a Service.
It is quite simple, actually. First, you need to have a static HTML page, which either contains within it everything you need, or has links to the appropriate outside assets. These could be images, external stylesheets, Flash movies, or the like. So if you have something like this:
<!DOCTYPE html>
<html>
<head>
<title>Static HTML Page Demo</title>
<style>
* {margin:0;padding:0;}
body {background:#ffffff;}
p {font:12px/18px arial,sans-serif;color:#333333;}
</style>
<script type="text/javascript" src="/sites/mysite.drupalgardens.com/files/my-groovy-code.js"></script>
</head>
<body>
<p>Welcome to my wonderful website</p>
</body>
</html>
...in a file called, say, "static-html-page-example.html". Then, in order to put it in a place where it is accessible to the world, you can do the following:
Log into your Drupal Gardens website
Click on "Configuration"
In the "Media" box of the configuration page, click on "Media browser settings"
In the "Allowed file extensions" text area, add html to the end. Be sure to use a space to separate it from the other extensions.
Click "Save configuration".
In the upper bar of the content area, click on "content"
When the main content page opens, click on the "MEDIA" tab on the right side of the page
In the new screen, click "+ Add File"
drag your HTML file onto the "add file" area (or browse to it and click "add"), then click "Start Upload"
You will now see your file appear in the list of media assets for your library. Click on it.
You should now see a page, the content of which is a link to your static HTML page. If you click that link, it will take you to that page. Click here to see how it works.
See? That was easy! Once you have your assets created, all you need to do is organize and upload.
You will only need to performs steps 1-5 once. After you add a file extension, it is there for good.
Since Drupal Gardens has constraints over and above a normal Drupal install, some allowances must be made. Here are a few things to watch out for:
Every external asset in your static page - images, videos, Flash files, style sheets, etc., must also be uploaded to the Drupal Gardens media directory. The same process you used to serve up your static HTML file also applies for these assets. You shouldn't need to add file extensions for images or videos, but you might for Flash (swf), and you will for Javascript (js) and style sheets (css).
Since every asset is served from the files directory, you need to make sure you acount for this when you create the HTML page. The path to all of you assets will be "/sites/mysite.drupalgardens.com/files/myAsset.css". Be sure to add the leading slash.
Alternately, you could add a <base href="/sites/mysite.drupalgardens.com/files/"/> element in the <head/> element of your static HTML file (information here). This would cut down on the amount of modification you would need to do when moving the static site from your computer to Drupal Gardens. You could simple add the tag to all of your HTML files right before you upload everything.
Again, since all uploaded media, files, assets, etc. for your entire Drupal Gardens site are stored in a single directory, it is important to name all of your assets in such a way that it is easy to determine which asset goes with which project. I have found that using a prefix is a great way to keep things organized. Here are a couple of examples:
"20120126-index.html"
"20120126-image-0.jpg"
"20120126-stylesheet.css"
"clientname-index.html"
"date-client-file-1.html"
There! The best of both worlds: A managed Drupal environment, and the ability to upload and serve custom, static HTML pages if and as the need arises.
So I am pretty sold on Drupal Gardens as a base for most of my future development projects. However, there are still a couple of useful pieces missing, that are out-of-the-box available on a full Drupal install. Specifically, the Services module. Services allow alternate means of accessing data stored in the Drupal database. So if I want to, say, use Drupal as a content management system for a Flash game, I can just pull information in as and when I need it, by referencing a URL and passing the appropriate parameters.
Drupal Gardens doesn't allow that yet. Well, technically they do, but only in very specific ways, none of which are ideal for using Drupal as a straightforward CMS. Having said that, apparently adding this functionality is something they are looking into.
But enough carping! It is possible to use DG as a CMS for a Flash (or AJAX, or Silverlight, etc) application, provided you only need to pull content out of the database, not put it back in. It just takes a bit of a work-around to get everything up and running.
Note: The rest of this post assumes a familiarity with Actionscript, DrupalViews and RSS feeds. If not, take a few minutes to read up on them.
The Views module allows the contents of a view to be published as a Page, as a Block, or as an RSS feed. Say I am making a role-playing game, and I need to populate the world therein with wildlife. To keep things simple, each critter has the following information points:
name
description
terrain (where the creature might be encountered)
associated element ( from the classic 5, for combat purposes)
So after entering data for several animals, you would end up with a table which looks something like this:
Name
Description
Terrain
element
squirrel
cute, fluffy, voracious
forest
wood
camel
cute, fluffy, spits a lot
desert
water
walrus
truly, nature's most majestic animal
plains
earth
...at least, that's how it looks in the database. To get it into Flash (in Drupal Gardens, at present) requires a little more work. But not a lot more work.
Pulling the RSS feed of a view is quite simple. Just create a "feed" version of an existing view, and set up a URL path for it, and voila! You have a feed of the contents of a view.
However, note that the actual contents of a view, when delivered in an RSS feed, are all packed into the <description> tag of the view, and include all of the HTML which would normally be rendered in the page. It looks something like this:
All well and good, except boy, are the contents of the DESCRIPTION tag ugly. That is because the angle brackets, ampersands, quote marks and non-breaking spaces have been re-written as plain text character entities. In a sense, they have been rendered as a picture of source code, rather than source code. There is a simple fix for this: When Flash pulls in an RSS feed (or any other XML-based document) it pulls this content in as plain text. It is not structured as XML until after it is loaded into the Flash movie. This means that the string can be parsed internally, and all of the character entities turned into their respective text elements. E.g. each instance of ">" can be replaced with a ">". The simplest way might be the following line of code:
var newString = oldString.split("<").join("<").split(">").join(">").split(""").join("\"").split(" ").join(" ");
var myXML = new XML(newString);
If that is run on the preceding big ugly bit of RSS feed, then the contents of the DESCRIPTION tags would suddenly look like this:
Now the contents of the DESCRIPTION element of the RSS feed XML are structured and can be parsed using the Flash XML tools. In this instance, you would look for the contents of the elements div.field-name-field-monster-element a, div.field-name-field-monster-terrain a, and div.field-name-body p.
You will note that there are a lot of extra DIV tags, and many of them have huge long class names and/ir IDs. This is not a problem for two reasons: first, the data is well-structured, and second, it is consistent. Unless there are changes to the structure of the View in Drupal Gardens - e.g. changing the "terrain" data field to be called "territory" instead - every time the data is pulled from this RSS feed for this View, it will have exactly the same structure. Having five records or ten thousand won't change things.
So there it is: An overview of how to access Views information from a Flash movie, via RSS, in Drupal Gardens.
For the most part, putting this site together went smoothly. Sure copy-and-pasting 700+ blog entries was a bit of a chore, as was going through every post to find which ones had diigtal assets which needed to be re-hosted. Tiresome, but not difficult.
In every previous version of this site, if I had a Flash movie which I wanted to show off, I would either post it in-line in the blog, or put it on its own page and link to it, or only show a teaser image on the front page and embed the animation in the full post. For this site I wanted something new. You've all seen light boxes - you click on a thumbnail photo, and a translucent overlay appears over the site, and the relevant content appears therein. I decided to go with one of those.
There are myriad ways to create a lightbox. All involve Javascript and CSS, and most of them are good at what they do. I decided to go with ShadowBox.js because it supports all kind of content; not just Flash and/or images. I ran it through a few static page tests, and it had everything I needed.
Getting it hooked up in Drupal Gardens ("DG") was a little more challenging. Since DG users don't have access to modify the actual templates of the site, using external code files can be a little challenging. The DG help files recommend creating a block in the header and copy-and-pasting the javascript into a plain text file, and embedding it directly in the HTML for a page. This is what I have done in the past, but having just uploaded over a hundred Flash movies and photos to the content area of the site, I decided to try something new.
It turns out that you can upload any kind of content you want to the content/media area of DG. You might need to make changes in the configuration area of your site to allow for the upload of e.g. a .js or .swf file, but it can be easily done. There is one thing to note: Nothing loaded into this area is processed on the server. If you upload a .php file, it will be served as plain text, NOT processed through Drupal/PHP. Fortunately, for Javascript, I don't need it to be processed. Plain text is just fine.
Accessing the Javascript is easy; everything uploaded to the media library on DG is in the /sites/mysite.drupalgardens.com/files/ direcctory. To access it, I created a block which contains a <script> tag, which links to the new files at /sites/mysite.drupalgardens.com/files/shadowbox.js. Everything worked on the first try.
More technical notes to follow, as I figure out how to do more things in Drupal.
Recent comments