Mojomotor - First impressions
Ever since Ellislab announced the release of MojoMotor I’ve been waiting for a chance to try it out, and as it was a wet weekend I decided to give it a whirl.
- easy editing… click an editable region and start editing!
Installation
It was a true Ellislab style easy install. Upload the files, create a database and run the installer. Enter a few details, click, and done - ready to login.
During the install you’re give a choice a blank site, or the “default site” which contains some sample layouts. Ever the optimist I decided to start with a blank slate. Incidently you can optionally import your own design during installation.
The admin toolbar
The first thing you’ll notice after logging in is the toolbar. There’s no admin back-end and you manage all your sites stuff from here:
- Layouts - create 3 layout types, “Webpage”, “Style sheet” and “Javascript” (think “template editor”!)
- Pages - add new pages, arrange navigation links and modify page properties
- Members - create admin and editor accounts
- Settings - general info such as site name, default home page, show “in page” login etc
- Utilities - PHP info and EE export feature
Creating templates… err layouts
If you’re used to creating templates in ExpressionEngine you’ll be more than comfortable here - in fact it’s cosy slippers time!
To understand layouts imagine you have two page types, main column + sidebar, and single column. To replicate these in MojoMotor you’d need to set up two layouts, one for each variation. Each layout is a complete HTML document, minus content, from DOCTYPE to the closing HTML tag.
As I started with no preinstalled templates I created my layouts offline and pasted the code into the layout editor (not forgetting to upload the images as well!).
Editable areas are created simply by adding a unique ID and class to a DIV tag, that’s it, MojoMotor will do the rest for you when you save the layout.
Example of HTML to add an editable region for the top part of my home page layout
<div id='home_intro' class='mojo_page_region'>
{mojo:page:page_region id="home_intro"}
</div>
Bear in mind that everything inside these DIV tags will be editable!
You can also use layouts for storing CSS and Javascript. For both you can use external files if you like, but if you use a layout to hold CSS, and call it with a tag, it will output as a style block in the HEAD, same principle for Javascript. That may make some people cringe but we’re not building Rome.
For everything else MojoMotor uses a simple tagging system for controlling items in a layout, using EE-like syntax.
| Tag | Type | Function |
|---|---|---|
| mojo:site:site_name | Site | Outputs the name of your site |
| mojo:site:site_path | Site | Outputs URL to resources (ie external CSS file) |
| mojo:site:site_url | Site | Outputs the sites base URL |
| mojo:site:link | Site | Used in layouts to define a link path |
| mojo:site:login | Site | Outputs a login link in a layout |
| mojo:site:page_list | Site | Outputs a link menu in a layout |
| mojo:page:page_title | Page | Outputs the title of a page |
| mojo:page:keywords | Page | Outputs the meta keywords field |
| mojo:page:description | Page | Outputs the meta description field |
| mojo:layout:stylesheet | Layout | Outputs CSS from a CSS ‘layout’ |
| mojo:layout:javascript | Layout | Outputs Javscript from a Javascript ‘layout’ |
| mojo:layout:append_content | Layout | Output code at the end of the document, useful for Analytics or Javascript |
| mojo:setting:version | Setting | Outputs the current MM version number |
Managing pages and navigation
You can modify key page information such as Title, Meta tags and URL title, as well as specifying which pages to include in your site main navigation (or indeed what to exclude!).
Building your main nav menu is a breeze, you can rearrange the order that pages are displayed, and create a page hierarchy (good for drop down menus) using an uber-cool drag ‘n’ drop.
Inline editing- the fun bit!
Once you’ve set up one or more editable “regions” in your layout you can then load any page up for editing. When you’re logged in editable areas are highlighted, just click to load the editor, make your edits, and save. Very easy!
MojoMotor uses the popular CKEditor using a simple set of buttons by default. If you want more buttons you can modify the config file (default location: system/mojomotor/config/ckeditor.php) that gives you a few presets, or create your own.
The verdict
Dammit Ellislab, this is starting to look like a Mini-Me, or actually like a Mini-Mee - cue “Yeah, baby, yeah”!
I love MojoMotor. It’s clean, easy to set up, easy for the end user, and given Ellislab’s pedigree I can see this growing into a thoroughbred Micro CMS. Have a look at my MojoMotor information microsite that explains the user perspective, or visit the official MojoMotor site for the full monty.
by Rob Allen | Filed in Content management