CMS Review: Hero Framework

By John Faulds

Hero Framework is billed as a white label, open source PHP website content management system (CMS) and development platform which shares the same CodeIgniter framework as ExpressionEngine. It is developed by Electric Function who also created Membrr, the only add-on for EE that (currently) handles subscriptions.

Hero is a free CMS but it also offers a full-featured ecommerce add-on for $195. But as when I tried Concrete5, when I gave Hero a run I was looking for an alternative CMS to ExpressionEngine that I could use for simpler sites.

Installing and setting up Hero was a breeze. In fact, if it wasn't for one particular aspect which I'll come to soon, I would've gone from first installation to whole site completed in a couple of hours.

Design and templates

Like Concrete5 and Wordpress, Hero works with themes that can be installed and uninstalled and creating a custom theme just involves copying a default theme and modifying it to your own design. Hero is powered by the Smarty Template Engine, so anyone already familiar with it will be able to get up and running quickly. I've never used Smarty before but found the template structure to be very similar to the template partials approach to templating in EE as proposed by John D. Wells and taken up by Mark Croxton's Stash module.

{extends file="layout.thtml"}
{block name="title"}{$title} — {$smarty.block.parent}{/block}
{block name="body_class"}{$url_path}{/block}
{block name="content"}
	{$body}
{/block}
An example of a basic Hero Framework template

As you can see from the template above, a ‘framework’ template, layout.thtml, is called, into which the contents of the template is inserted. layout.thtml contains the parts of the template that are common to all pages, i.e. the section, masthead, global navigation, footer etc.

The toolbar of the Hero Framework control panel.

From the Design menu item you can see in the toolbar pictured above you can set your theme but you can also edit all its files using the Theme Editor. There's not much reason why you'd work in a textarea in a browser when you could use your favourite text editor, but one thing you do need the Theme Editor for is for mapping URLs to particular templates. The only other menu option under Design, and one which is one of Hero's best features, is the Menu Manager.

Screenshot of the Menu Manager in the Hero Framework control panel.

As the screenshot above shows, the Menu Manager makes it easy to create menus from both pages on your site and external links. Including a menu in a template is as easy as {menu name="main_menu" show_sub_menus="yes"}.

Publishing content

The other main sections accessed from the control panel toolbar are the Dashboard, Publish, Members, Reports and Configuration. The Dashboard lists your most recent activity, Members and Reports I didn't need for the simple site I was working on and Configuration includes site settings most of which I didn't need to change (although I did need to install one additional module). That leaves Publish as the only other area we really need to look at.

Screenshot of the Publish menu dropdown in the Hero Framework control panel.

Most of the submenu items in the screenshot above are included by default. The ones that I added for the site I was working on were Manage Project which required its own custom fields and Manage Galleries which was added when installing the Gallery module.

Publish New Content takes you to a page where you choose the type of content you want to publish before then being taken to a publish form.

The Manage… menu items list entries published in different content types.

Blogs/Content Listings is where you create the sections which would be managed from the Manage News link. I didn't need a news section or blog for the site I worked on so didn't explore this area much. Likewise with the RSS Feeds section.

Under the Forms section, you can create pages to which you can attach different form templates. There's a textarea where you can insert text which will appear above the form and also specify who the form should be sent to, where the user should be redirected to after the form is submitted and what the submit button should say (although that could just be hard-coded into the template).

Topics is something else that I didn't delve into for the site I was working on so best refer to the documentation.

Screenshot of the different custom fieldtypes available in Hero Framework.

Content Types is the place in the control panel where you find Hero's other main strength. Here you can create new content types and add custom fields to them, much like you would with ExpressionEngine. For the site I used Hero for I needed to display building projects with address and client details and image galleries. Address and client details just required simple text custom fields, but it was when I came to attach more than one image to an entry that I ran into a stumbling block.

Gallery module

With ExpressionEngine, if I want to attach multiple images to an entry there's a few ways to do it using add-ons: Matrix, Grid Lite, Assets, Channel Images. With each of these you attach your images to the entry you're creating and then output those images when outputting the rest of the information attached to the entry.

With Hero, this wasn't so easy to do, and required a few trips to the support forum to get the exact process sorted out.

There is an add-on, the Gallery module (which isn't linked to from the main site but rather found during a thread search of the support forum), which can handle attaching multiple images, but the process is a bit roundabout, and to my way of thinking, a bit backward.

To attach multiple images to a project entry, I had to first create a gallery entry and then create a project entry to which I then related the gallery entry I'd just created with a relationship custom field. So from a usability perspective it's not ideal because I'm having to create two entries for a single piece of content.

Then in the template, rather than pulling the gallery information into my projects template, I had to do it the other way round, pulling the projects info into the gallery template. This is because displaying of images only worked properly using the template that is installed with the gallery module. The projects were related to the gallery by ensuring that the project and gallery entries had the same URL path.

Conclusion

As I mentioned earlier, without the requirement to attach multiple images to entries, the entire process of installing Hero, learning enough about how it works to get the job done, and building the site would've only taken a couple of hours. The gallery module thing threw a bit of a spanner in that works. Because of that I probably wouldn't use Hero again for projects that require adding multiple images to lots of entries. But for sites that only have a single gallery, or a single page of galleries, or for lots of other scenarios, I think Hero would be a good choice. Those other scenarios also include the ability to do ecommerce which I haven't tested out, so it'd be good to hear from anyone who has used it for that purpose.