I’ve been trying out a couple of different CMS’s recently and the only one that comes close, in my opinion, to Wordpress is Expression Engine. I love Wordpress for it’s simplicity. It’s extremely easy to build a site structure and also extremely easily to make structural changes and themes. Sometimes I think Expression Engine can be overkill, especially for the sites that I’d otherwise use Wordpress. But Expression Engine can be a great CMS for powering a Flash website. It is for that reason I’m writing this little article.

I need to get something off my chest first though. One of the things that really gets on my nerves is setting up some sort of site structure in Expression Engine. Everything in EE seems open ended in that there is no one correct way of doing things. You can create a structure based on categories, pages, templates or a combination of those. There’s probably other ways. This is great, except there is no way to spit out the structure in EE similar to the way that Wordpress does it with it’s native pages and categories functions.

There are plugins that will do it but if I’m building a website I like to keep plugins and modifications to a minimum, but sometimes it’s just not possible without them. You could perhaps hardcode a navigation structure into a template, but that defeats the purpose of a dynamic site structure. There are other gripes that I share with others, but I won’t go into them here.

However, one thing that Expression Engine does have up it’s sleeves is its template engine, which includes the ability to create XML templates. I’m not a fan of the EE template engine, it can be labour intensive, but the XML template is a cool functionality that you can’t ignore. Can you see where I’m going with this? If we could create an XML template that would spit out a navigation structure and site content we’d be onto a winner! We could feed that XML file into our flash website to generate our site structure and content. With the revamped XML (E4X) handling that came with AS3 this will be a breeze for a flash developer.

The good thing with EE is it’s free to use for non-commercial uses, which makes it a perfect candidate for those looking for a CMS to power a blog or personal website. Something I’d normally recommend Wordpress for. But if you were to use Expression Engine I’d like to use this article to show you how I’ve managed to set up a site structure in Expression Engine similar to what I’d do in Wordpress.

The method I’m going to outline below requires a couple of Extensions; FieldFrame , nGen File Field and File. These three add enormous functionality to Expression Engines upload capabilities.

With any site I build in Wordpress I use either Pages or Categories to lay out my site structure. You can use Pages in Expression Engine but that module is not available in the non-commercial version of the software, so we’re left with Categories. The great thing about Categories in Expression Engine is they work very similarly to categories in Wordpress. You can even reorder categories which comes in handy for deciding the order of menu items on your website.

Category Order

I also like Wordpress’ ability to attach multiple images to a post regardless of whether or not they are used in the body of the post. You can do something similar in Expression Engine with the FieldFrame and File extensions. We know we can output our Category information to an XML template, and the good news is you can do the same with the File fields.

For example, lets say you in one of your custom field sets you create a field called slideshow_images. The field type would be FF_Matrix. We’re going to use a Matrix to allow you to specify a file upload field and also another field for the caption. You can add as many fields as you want in a FF Matrix field type. Amazingly handy. See below.

Creating a Matrix custom field

Remember, you’ll need to have an upload location set up already. Make one if you already haven’t done it.

Once you’ve finished making that custom field, make sure your field group is assigned to a section/blog. When you go to publish an entry in that section/blog you’ll see something similar to the screen grab below…

Custom Field ready

See the Add Row button? Fantastic. Every time you want to add more images to your entry just click that button and a new row will appear under the existing ones.

Now, let’s say you want to output the values of your slideshow into your XML template. You’d do something like this…

<?xml version="1.0" encoding="UTF-8"?>
<categories>
  {exp:weblog:categories category_group="1" style="linear"}
    <page>
    <category name="{category_name}" url="{category_url_title}" id="{category_id}" parent_id="{parent_id}" >
    {exp:weblog:entries category="{category_id}" rdf="off" dynamic_start="on" disable="member_data|trackbacks"}
      <title>{exp:xml_encode}{title}{/exp:xml_encode}</title>
      {if slideshow_images}
        <slideshow>
          {slideshow_images}
            <image caption="{exp:xml_encode}{slideshow_caption}{/exp:xml_encode}"
                path="{exp:xml_encode}{slideshow_image}{/exp:xml_encode}" />
          {/slideshow_images }
        </slideshow>
      {/if}
    </page>
    {/exp:weblog:entries}
  {/exp:weblog:categories}
</categories>

The above snippet of XML code loops through all categories in category group 1. It checks to see if the entry in the category has a custom field called slideshow_images and if it does to loop through them all outputting the image URL and caption. The order of the categories returned is dictated by the preference for that category group. You can set it to either alphabetical or custom. I use custom because it lets you reorder your categories as you see fit. I’ve only shown the images and title tags, but hopefully you get the idea.

It also gives each category’s ID and parent ID, making it easy to create a structured navigation.

I’ve seen some horendous instances where categories have been used for the navigation where the category is the actual page rather than an entry assigned to that category. This leads to all sorts of problems including an extremely disorganised CMS. It also makes it hard to see what entry is what. I’ve even seen instances where one entry has been created an assigned to a category just to hold one image. With the plugins described here you don’t need to do that. Just create your entry and upload all the images to that entry and assign that entry to the category. A gallery page is the perfect example.

On a final note, this article is not meant to be comprehensive nor illustrate the way you should do things, merely it is based on my own experiences and what I’ve found to be the best way for me to go about building a site and navigation structure in Expression Engine for flash websites. I’d really appreciate your thoughts, suggestions and alternatives.