Douglas Green

An independent web designer & developer in Charlottesville.

Main navigation

Articles

Website launch for Wilcox Design and the Smithsonian National Museum of African Art

by

I recently completed the website for the Smithsonian National Museum of African Art online exhibition Sailors and Daughters: Early Photography and the Indian Ocean World. I was hired by Wilcox Design for the front-end development and custom WordPress theme development.

The project was built with the blank starter theme Underscores and Bootstrap on the front-end. The exhibition required multiple display types for each section. We made use of the Masonry plugin for jQuery, RoyalSlider, and an image zoom plugin. All content is editable by the client.

See more details on the project page, or view the exhibition.

Moving this site to WordPress

by

ExpressionEngine (EE) is well suited to a custom site design. It’s the fastest way that I know of to convert a static custom site design into a dynamic site powered by a CMS. I’ve been using the software since 2008 to build custom websites for my clients. I’ve always appreciated the approach that EE takes to site design. The general idea is that you fold the CMS into your design, and not the other way around.

Back in 2008 or so when I was looking for a CMS to use, the standard approach of most CMS software was to build your design on top of the CMS framework. There was an existing structure that you had to deal with, and good luck if you wanted something a bit more out of the box. You could wrench your average CMS into a pretzel to get it to do approximately what you wanted, and you were then stuck with markup that was less than ideal, odd class names, weird structure, and general wonkiness.

If I remember correctly, my first experience with a CMS (aside from websites with a custom back-end) was with Mambo, which was eventually forked into Joomla. It had a lot of useful features like advertising banner campaign management and a mailing list, but it felt like using a sledgehammer to drive a nail. Try to use a blunt object for a task that needs precision and you end up with a mess.

In my search for the perfect CMS, I evaluated many along the way: WordPress, Movable Type, Textpattern, LightCMS, Joomla, Drupal, SilverStripe, concrete5, Squarespace, and others that I no longer remember. I eventually found my way to ExpressionEngine. When I first tried EE, it was refreshing. I could add the template tags into my design very easily. Converting a static site to a dynamic one was now a matter of hours and not days.

At the time, I had also worked with WordPress on and off but considered it more of a blogging platform. I always liked the WordPress environment and considered the interface more user friendly than EE, but it did not suit my need to easily build a site with a custom design.

EE has worked well over the years for building custom sites. However it does have some drawbacks. Maintaining the software itself is a bit of a hassle as it requires a manual update, or the use of a plugin. Updates don’t always go smoothly and sometimes things break. My own installation became a bit unwieldy due to changes in design, and use of the Multiple Site Manager. And there are core features that are simply lacking and require the use of third-party plugins.

Recently, I needed to update my portfolio, and make sure all pages of the site used a responsive design. I made a few attempts at redoing the design, but ultimately it became easier to switch to WordPress and use an existing theme. I spend my days implementing custom sites for individuals and companies, and I just did not have the motivation to build my own design on the off-hours.

I want to get back to generating content and working on side projects when I’m not handling client work. Switching to WordPress frees up some time otherwise spent on updates, maintenance, tweaking the design, and allows me to focus on the content.

If you have a significant amount of text content, WordPress is ultimately a better tool to manage that. Drafts are saved automatically, revisions are built in offering a form of version control, previewing content works well, and different user levels assist with multiple authors. The process of writing just feels smoother on this platform than it does on ExpressionEngine.

One could argue that it’s just a matter of picking the right tool for the job. I will still use EE to build custom sites. I am also using WordPress more to build custom sites due to client demand. For the time being at least, this site will be running WordPress. I look forward to the next version of EE, and with some needed updates, I could be convinced to move back.

Removing index.php with ExpressionEngine and Media Temple

by

Two recent ExpressionEngine projects are hosted at Media Temple in the “DV” environment. Due to how the server is set up, the normal method of removing index.php from the URLs will not work. ExpressionEngine needs a “?” in the rewrite rules in this specific case. Otherwise, an error of “no input file specified” will be generated. This is just a minor issue to keep in mind if you are using ExpressionEngine and Media Temple DV hosting, but one that could break your site if not fixed. These types of problems tend to make an appearance when moving a site from development to production, resulting in a Google search on error messages, or a look through notes on past projects.

Change this:

RewriteRule ^(.*)$ /index.php/$1 [L]

to this:

RewriteRule ^(.*)$ /index.php?/$1 [L]

Reference:
Stack Overflow

ExpressionEngine Secure Mode forms

by

While working on a couple of recent ExpressionEngine projects, we needed to process forms directly using PHP in the EE templates. We were seeing a mysterious error after submitting the form, “This form has expired. Please refresh and try again.” It turns out ExpressionEngine needs an extra hidden field to account for security settings within the system. Adding the hidden field allows the form to be processed without a problem.

<input name="XID" type="hidden" value="{XID_HASH}" />

References:
Stack Overflow
Secure Mode blog post

Create a responsive video play button overlay

by

A project I’m working on now involves redesigning an existing site, and converting it to a responsive design using the Bootstrap framework. One part of the home page has a list of video thumbnail images. We wanted to overlay a play button icon on the image to give an indication of what will happen when a user clicks on a thumbnail. This is pretty simple when you have a fixed size image, but it gets a little trickier with responsive images. The trick to making it work was adding a float to the containing element.

Here’s a demo with source code: responsive video play button demo.

Upgrading ExpressionEngine to 2.7.3

by

I just recently upgraded ExpressionEngine (EE) from version 2.5.5 to 2.7.3. It took multiple attempts to get it right. There were a string of PHP errors after upgrading, some due to an incompatible third party plugin. The major issues had to do with the newly reconstructed relationships. EE relationships changed with version 2.6, and the new format is incompatible with the old format. If you used relationships in your templates in the past (I did), your template code needs to be updated when you upgrade. Conveniently, the upgrade routine alters existing templates to use the new relationship format. Even so, I still had a number of PHP errors after upgrading.

In spite of having relatively straightforward templates, I could not get the new EE relationships to work. So I gave up on the native EE relationships and used Playa instead. It worked right away.

The EE upgrade process should be easier than it is at this point. It’s really not that difficult, and it usually goes smoothly. But when there is a problem, it can take some time to correct. Ideally, developers should be able to update the system from the control panel. It would be nice to have the ability to rollback an update from the control panel as well. But I don’t see either of those things being integrated into the software anytime soon.

When the upgrade process breaks existing sites, I think there is a problem. I understand that between major software releases there may be changes made and features introduced that are substantially different enough to require changes to the sites using the software. For example, moving from Drupal 6 to 7, or ExpressionEngine 1 to 2. But EE 2.6 was supposed to be a minor release, and yet the change in how relationships are handled was a big enough change to break existing code. The change to relationships should have been backwards-compatible, or the change should have been held off to the next major release.

One may ask, “why bother upgrading if it’s such a hassle?” Part of my job is to keep client sites current. That usually means that my own site becomes a testing ground for software updates. I also may want to add another site with the multiple site manager. The only way for me to do that is to update the entire system. I may test out the new relationships format in the future, but for now, Playa seems to be the more stable alternative.