Drupal 6 Flash interface via Views, Views Node Feed, and XML (w/ Imagecache bonus)
We are making a flash 'headline widget' that reads from a view and I had the job of getting the information 'to' flash. XML was my first thought but eventually started solving via flashvars. flashvars was clunky and ugly, though we did get it working.
Something inspired me to go the XML route even after it was "solved", which should have been the obvious choice in the first place. I came across http://drupal.org/project/views_node_feed which unfortunately wasn't ported to 6. Fortunately, someone had written a patch (http://drupal.org/node/298695#comment-1256975) which worked.
You can find a prepatched version in that thread as well.
What I needed was to send
- The Title
- The subtitle
- The nid
- The Imagecache version of the headline image
I followed the directions:
- Created a node feed at /admin/settings/views_node_feed (headline_widget)
- Created a view (I actually edited a different one, no matter) and added a "Feed" display
- Clicked "style" and selected 'Views Node Feed'
- Clicked the little gear (settings) icon next to 'Style: Views Node Feed' and selected headline_widget (the only one at the time
- added a path: headline-widget.xml
If you to that page (headline-widget.xml) you will probably see a list of the titles of the nodes that the view is generating.
Its basically printing $node->title over and over again which you can see at /admin/settings/views_node_feed/edit/headline_widget (if you named it headline_widget like i did).
There are two boxes, the first is the template for the wrapper. It has to contain
***VIEWS_NODE_FEED_ITEMS***
which it replaces with anything that is in the second box.
In the top box I have:
<?php print "<?xml version=\"1.0\" encoding=\"ISO-8859-1\"?>"; ?><br/>
<stories><br/>
***VIEWS_NODE_FEED_ITEMS***
</stories>
Note: you may have to use html encoding for the lt and gt signs.
The bottom is mostly straight forward, especially without the imagecache.
<story><br/>
<title><?php print $node->title; ?></title><br/>
<nid><?php print $node->nid; ?></nid><br/>
<img><?php print $node->field_headline_image[0]['filepath'] ?></img><br/>
<subtitle><?php print $node->field_subtitle[0]['value']; ?></subtitle><br/>
</story><br/>
What's going on here should be pretty obvious. field_headline_image and field_subtitle are both cck fields. We get access to $node for each node in the view. We can display it however we want, we choose to wrap it in XML tags.
I also wanted to use an imagecache version of the image. The imagecache module, if you don't know, is a really slick way of automatically optimizing images on the server side, so you don't waste bandwidth or pre-scale images for your particular display. It's pretty simple to set up. I had an image cache preset called 'headline_widget' which scaled the picture down to 300x150. Instead of putting the file path for headline image directly, I called the theme function for the imagecache preset I had made. That function returns a full <img src=... tag, so I used preg_replace to strip off the tag and just leave the URL for my optimized image.
<img><?php
$preset = "headline_widget";
$imgsource = theme('imagecache', $preset, $node->field_headline_image[0]['filepath'], $node->field_headline_image[0]['data']['alt'], $node->field_headline_image[0]['data']['title']);
$imgpath = preg_replace("#<img src=\"#","",$imgsource);
$imgpath = preg_replace("#\" alt=.*/>#", "", $imgpath);
print $imgpath;
?></img><br/>
The result is a beautiful xml file that is easy for flash to read instead of a hacked to death tpl.php file outputting an embed tag with ugly flashvars="var1=some+thing&var2=some+other+thing"
<?xml version="1.0" encoding="ISO-8859-1"?> <stories> <story> <title>Editorial Test</title> <nid>53</nid> <img>http://xxx.us/sites/default/files/imagecache/headline_widget/headline/images.jpeg</img> <subtitle></subtitle> </story> <story> <title>Restructuring Carbon Credit Markets</title> <nid>6</nid> <img>http://xxx.us/sites/default/files/imagecache/headline_widget/carbonmarket_1.png</img> <subtitle>Perhaps the system can transform into the solution.</subtitle> </story> <story> <title>Finding Global Solutions to Climate Change <nid>12</nid> <img>http://xxx.us/sites/default/files/imagecache/headline_widget/headline/berg.</img> <subtitle>The problem of global climate change is far more severe and immediate than we understood even a few years ago. As the newest scientific data demonstrates, we have at best a narrow and fast-closing window in which to reduce carbon loads in the </subtitle> </story> <story> <title>Blog Review: It's Getting Hot in </title> <nid>13</nid> <img>http://xxx.us/sites/default/files/imagecache/headline_widget/hot.jpeg</img> <subtitle>Ever wondered what happened to the anti-globalization and climate change protests of the late nineties and turn of the </subtitle> </story> </stories>
Comments
It worked
Hey thanks man, this worked like a charm, combined with SWF Tools you can make some powerful flash+drupal websites.