Archived ExpressionEngine Uncategorized

Dynamic HTML grid with ExpressionEngine


This article is going to be a long one so sit back, relax (if you can) and get ready to do some EE hacking … ok, not hacking, creation. 🙂


I’m going to make a few assumptions for this article, as follows.

  1. You know your way around the ExpressionEngine control panel and are familiar with terms like template, etc.
  2. You know what jQuery is have an idea of what it is used for.

The Situation

Recently I’ve been doing some work on the redesign of the website for Erin King Photographer. Part of the redesign is the requirement for Erin to do 99% of the site management herself, without the need to refer back to me.

I realised that I’d need absolute control over the layout, styling & site architecture for this to work – that meant WordPress wasn’t an option for this version of Erin’s site. Now, I’m not saying WordPress couldn’t do the job (we still run Erin’s blog part of the site on WordPress. In my opinion, though, WordPress forces a shift in focus from design to content management – good for some but not what I wanted.

The Desired Layout

It looks simple (and is, when rendered), but this is the layout we’re trying to get to. Don’t forget this must be built & rendered dynamically, not hard-coded in the page’s markup.

Dynamic HTML grid for displaying products
The desired layout

The Decision

Some time ago I decided the new site should run on ExpressionEngine. The ability to control absolutely everything and yet still have the power of a full CMS made the decision pretty easy (plus, Digital Formula runs on ExpressionEngine).

*cough* I’ll leave this article where it is, but Digital Formula runs on WordPress, now. 😉

The Problem

The first issue I ran into (which I knew was coming) was that ExpressionEngine’s native file module, while powerful in its simplicity, does lack a couple of what you’d expect to be standard features. For example, it’s difficult to control the order that files are displayed, unless they all have a different date and time in the database. It’s also impossible to manually set the file order in the control panel and have that order obeyed during page rendering.

Archived ExpressionEngine Uncategorized

ExpressionEngine Plugin – Entry Age

Today I threw together a quick plugin as I couldn’t find an easy way of doing what I wanted without putting JavaScript in my templates.  The plugin, called ‘Entry Age’, allows you to specify a message that can be displayed if the entry being viewed is older than a certain age.

Why a plugin?

I’m assuming that someone else out there will find this useful.  I’m sure plugins like this exist already but, if they do, I can’t find them.

For an example of what the plugin looks like when it finds an outdated entry, please see this article: Move ExpressionEngine to a different server (and yes, the content there is actually outdated).

Can I get it?

Of course you can.  If you want to download Entry Age and try it out, you can head over to my GitHub page any time. 🙂 Entry Age 1.0 on GitHub.

Hope it helps someone.

Archived ExpressionEngine Uncategorized

Fixing QuickSave extension for EE2

I recently upgraded my ExpressionEngine installation from version 2.1.1 to version 2.1.3 build 20101220.  The installation worked fine but I found that the excellent extension from VayaCode, QuickSave, didn’t put the preview or close buttons below the entry’s fields.

Luckily the fix was pretty simple – all I had to do was re-add the appropriate code to the /system/expressionengine/config/hooks.php file.  Here’s the code:

Fixing the QuickSave EE2 extension:

$hook['post_controller_constructor'][] = array(
   'class'    => 'Quicksave_ext',
   'function' => 'cp_tweaks',
   'filename' => 'ext.quicksave.php',
   'filepath' => 'third_party/quicksave'

After making this small change your QuickSave extension’s Save, Save and Preview & Save and Close buttons will be back where they’re supposed to be.

Archived ExpressionEngine Featured Uncategorized

Move ExpressionEngine to a different server

Why move ExpressionEngine?

Good question! I run a local development environment at home so that I can simulate the production environment at ICDSoft as much as possible. When I make significant changes, however, this means I have to up and move my ExpressionEngine instance from my development server to my production server.

What do I need to do before beginning?

The process is actually fairly simple.  That said, always take the appropriate precautions before making any changes to a production environment, i.e. backup everything now including your existing file and the ExpressionEngine database.  After that it is highly recommended that you check your backup to make sure it’s recoverable later.

Ok, I’ve backed up.  Now what?

You’ve backed everything up?  Good.  Here are the steps I followed to move my ExpressionEngine instance from my development server to my production server.

Prepare the database

  • Clear all ExpressionEngine caches.  DO THIS FIRST.
  • On the new server, if it doesn’t exist already, create the database ExpressionEngine will use.
  • On the new server, if it doesn’t exist already, create the database user that ExpressionEngine will use to connect to your database.
  • Dump the existing database to a backup file.  How you do this is up to you but I personally use phpMyAdmin to backup the database to a ‘zipped’ file.
  • Upload your database backup to the new database.
  • Confirm that your database user can connect to the ExpressionEngine database.

Prepare the ExpressionEngine files

  • Compress your existing site, probably to a ZIP file.
  • Upload the archived files to your production server.  
  • Uncompress the archived files into the appropriate directory.  Please note that most people simply FTP the files to the new server but I choose to do it this way as it’s much quicker to transfer a single ZIP archive than it is to transfer the thousands of files ExpressionEngine uses one at a time.  I use a small PHP script to decompress the uploaded archive – you’ll need to make sure your host allows this before it’ll work for you.  Anyway, here’s the source.

Decompress uploaded archive:

echo "Unzipping ...";
echo "Done!";

Obviously you’ll have to change to the name of your uploaded archive …

Archived ExpressionEngine Uncategorized

Allow EE code in EE with ‘Allow EE Code’

One of the great features of ExpressionEngine is that you can change pretty much everything that affects layout. EE tags are a big part of this but I found that by default you can have EE tags inside templates, obviously, but not inside entries. Putting EE tags into entries will simply show the EE tags in the browser when viewing the entry – not good. So, how do we do this?

The first step is to download and install the ‘Allow EE Code‘ plugin, a first-party plugin from the makers of ExpressionEngine. As always the best place to get info about the EE plugin manager is the EE documentation.

Without going into too much detail the remaining steps are as follows.

  • Edit your custom fields, in particular the ones you’ll be using EE tags in. Edit the list ‘Default Text Formatting for This Field’ and make sure the option ‘Allow EeCode’ is set to ‘Yes’.
  • Unless you set the default text formatting drop-down box on the previous screen to ‘Allow Eecode” you’ll also need to set ‘Allow override on publish page?’ to ‘Yes’.
  • Next time you edit or publish an entry you’ll be able to have EE tags in your entries IF you set the default text formatting option to ‘Allow Eecode’. If not you’ll have to change the default text formatting from ‘XHTML’ to ‘Allow Eecode’. See the previous setup if you don’t have that option available.

I was trying to do this so that I could use the Freeform plugin by Solspace inside an entry instead of inside a separate template.

Hope that helps someone. 🙂