I’ve never really loved WordPress. There. I said it.

But it is very powerful, well supported, partic­u­larly suited for blogging, and widely deployed, so was a natural choice for this website.

It does come with its own baggage, however. For one thing, it’s not so easy to develop locally and deploy remotely; having to keep the MySQL data­bases in sync is a mess trying not to hose some­thing up on one end or the other. Tools like iTheme’s BackupBuddy help a lot, but you still end up having to manually blast your devel­opment database over the remote database for each deployment. That’s OK, I suppose, for the main live site, as the updates shouldn’t be happening all that often. But it’s less fun on a remote staging server that sees more devel­opment work.

Don’t forget the darned wp-config.php file. Overwriting the remote version with the local version kills the site and requires some hand-editing to get it going again. The whole business is not as easy and clean as I would like.

And, really, WordPress can often be overkill. Take, as an example, my Bob Rockefeller Photography website. It has a simple blog (that is well overdue for some new content), about and contact pages, port­folio galleries, and an area for clients to view their proofs. Hardly an appli­cation for an enterprise-scale CMS (Content Management System).

What About Kirby?

There are a number of NoDB (no database) CMSs around from static site gener­ators such as Hammer for Mac and Jekyll to a group of dynamic site creation tools lead by Kirby and Statamic. I decided to move Bob Rockefeller Photography from WordPress to Kirby as a test of Kirby’s abil­ities and as a way to make devel­opment and deployment easier. I have plans to upgrade the client areas of the site and I want to get set up for that work.

What made me look to Kirby? In no special order, I like:

No Database – nothing to sync, nothing to migrate, nothing to query, nothing to mess up. The structure of the site is defined by the orga­ni­zation of the file structure. Metadata is stored inside files as simple text.

Your File Structure Is Your Site’s Structure

Plain Text – use either plain text, HTML or Markdown for content. I really like writing blog posts in Markdown; I can do it on any device, with nearly any program, do it anywhere and then just save it as part of the site when it’s done. And Kirby (through its kirbytext() function) under­stands Markdown Extra for more formatting power than John Gruber designed into the original Markdown. If that’s still not enough, you can create your own exten­sions to kirbytext() in a file named kirbytext.extended.php added to you plugin folder.

PHP Templates – no need to learn yet another template language. The rest of the framework is written in PHP, PHP is a natural language for web devel­opers to use anyway, and it’s perfectly good for creating templates of any complexity. Sticking with JavaScript, HTML, PHP and Markdown works for me.

Dead Simple Sync – just upload any changed files right over the existing ones. The local site is exactly the same as the remote site. I use MAMP Pro for local devel­opment and then Transmit to sync the local directory to the remote directory.

Expressive Syntax – so clean as to be nearly self docu­menting. Kirby is really a simple (but not simplistic) PHP devel­opment framework (think a much lighter weight CodeIgnitor or Laravel). Want to return an object loaded with all the articles in the blog?

Need to create a pagi­nated list of blog posts in reverse alpha­betical order?

Handy Toolkit Included – get more utility func­tions in the Kirby Toolkit, the under­pinning for Kirby itself. This will be important to me as I work on the new client area features. Having a PHP framework to build with is a good thing.

Documentation – there is a lot of it on the Kirby home site. And tuto­rials, too.

Support – a must have and it’s there. On the web is a forum frequented by Kirby users. And there is access via email to Kirby’s developer Bastain Allgeier; I’ve had several help email exchanges with him as I got myself up to speed.

If I were to write down a couple of my admit­tedly few gripes with Kirby, I would wish for a much better tool for moving WordPress content to Kirby and a tutorial on hooking into Kirby with AJAX. But, under­standing that Kirby’s intent is to be light­weight, these are probably just nits to pick.

So there you have it. I would recommend that you take a look at Kirby (go see the FAQ, first) if you would like to simplify your blog or need to develop websites with some­thing a little more light­weight than WordPress, but don’t want to have to start from scratch.

At first I was put off by the JSON formatted appli­cation pref­er­ences that had to be edited as text by “hand.” But that feeling passed as I dug deeper and deeper into what Sublime Text, the current darling of the text editing world, can do.

I had been using BBEdit for all of my heavy-duty text editing needs. It’s a classic power tool that I orig­i­nally bought back at a MacWorld Expo in Boston — so you know how far back it goes for me. But for web design work, I had wandered off to Coda for its conve­nient inte­gration and pleasant interface, but found it limiting as I started moving towards local MAMP devel­opment and SASS. My last revision to this site was done with indi­vidual tools, including BBEdit and I described my approach in a previous post.

One of the things I found while making that revision was that BBEdit’s syntax coloring was not good for SCSS and pretty poor at handling a combi­nation of PHP and HTML code. In fact, it just plain sucked; colors were haphazard and instead of helping to under­stand the code flow, it made it harder. Throw in the fact that it’s interface was starting to look dated, plus a few more niggling details, and I was off looking at the alternatives.

Click For A Screenshot

A couple of after­noons spend futzing around with TextMate 2 (the open source, alpha level, replacement to the venerable TextMate), Chocolat and even the very young Brackets, lead me to Sublime Text (now in version 2). What is it that Sublime Text can’t do? I’d say not much, as the features list suggests:

• Split screen editing
• Multiple cursors (you have to just try that once)
• Highly customizable via XML and JSON config­u­ration files
• Python scriptable and extendable
• Goto anything (lines, files, symbols, …)
• Project sidebar
• Configuration synchro­nization via Dropbox
• Slick, modern interface
• And, as they say, more …

Continue reading Sublime Text 2 Is Really Good

You may have read my previous article about combining WordPress with other tools to create an online gallery and photog­raphy sales system for my Bob Rockefeller Photography website. For that, I put together WordPress running a home-grown Headway Themes framework theme (for most of the site), a customized NextGen Gallery plugin (for port­folio image galleries) and a customized version of the ProofBuddy web appli­cation (for client proofs and ordering). And it worked pretty well.

But. It turns out that the Headway Themes framework is less that I really want (don’t get me started). And ProofBuddy’s design is a little dated (not that I’m a great web designer). And perhaps the worst problem is that to make any changes in look or style of the combined site, there are three CSS files to edit and keep consistent (one for each of the parts). Maybe three parts wasn’t such a good idea. So I went looking for options, again.

This time I landed back on my favorite WordPress framework, Genesis. I’ve used Headway Themes, looked closely at PressWork and studied Thesis Themes. Each has a strong following of web designers and each has their strengths. But Genesis’ combi­nation of solid code design, excellent docu­men­tation, flex­i­bility and user support makes it my choice. Again. Maybe for good.

I knew I wanted to get away from two separate tools for the display of my port­folio images and the sale of other prints. On one level it makes sense to get the best tool for each job, but the main­te­nance and upgrade issues were just going to be too great over time. And cost is always a consid­er­ation. ProofBuddy has a nice pricing model in that the base version is free, while the more powerful Pro version costs $150. NextGen Gallery is also free. Free is good. But some­times free is not free.

Why Photography Orders?

Before selecting ProofBuddy for the last project, I had looked into Photography Orders. It is a well designed web appli­cation created with FasterMVC and therefore uses the popular and powerful Model, View, Controller (MVC) approach to appli­cation design. Among the many advan­tages of an MVC design is that creating themes (the View part) can be more cleanly sepa­rated from the logic driving the appli­cation (the Model and Controller parts). It’s also nice in that it comes with the full source code so the only limit to your customization possi­bil­ities is your programming skill.

But Photography Orders has no free version. It’s $295 and you get all the features and all the code. That was, and is, a higher priced solution than I want. But I was lucky. Luke van de Paverd, the force behind Photography Orders, contacted me and offered me a free copy in return for writing up my expe­ri­ences with it. And so here we are.

This product is designed to be a stand­alone web appli­cation, not an inte­grated piece of a WordPress driven site. And I wasn’t about to give up WordPress with its features, plug-ins and Genesis. That left me with the mission of crafting a solution that made it look as if Photography Orders was a part of WordPress, which is just what I had to do with ProofBuddy.

Thankfully Luke has been a lot of help with back and forth emails between Georgia (me) and Australia (him). He’s straightened me out on mistakes I was making and I hope I lead him to a few improve­ments along the way. But you are reading this at the same time he is; Luke hasn’t contributed to nor edited this article. I welcome his input in the comments, of course, but this part is all my own.

The WordPress Part

The entry point to the site is via a static WordPress page that contains an accordion slider to introduce my port­folio. The code for that is Accordionza, by Geert De Deckere and costs just $11. It is certainly worth that as it comes with the source code and good documentation.

The Home Page Image Accordion

It took me a couple of attempts to get it running under WordPress, but in the end all that was really necessary was to load its necessary scripts in the functions.php file of my theme like this:

And then you start it up with this in the head via the Genesis Simple Hooks plugin:

The rest of the WordPress setup is pretty ordinary. It’s just a blog with a few other static pages. I designed the CSS to make the site what it is, with an eye towards being able to customize Photography Orders to match.

The Photography Orders Part

The My Selections Display

I wanted to be sure that the switch from WordPress theme code to Photography Orders code was seamless from the users’ point of view. I didn’t want the two parts to feel like two separate sites; they are to be one. The more recent versions of Photography Orders have a theme base that allows them to sell premium themes that are rela­tively easy to install. That also allows me to make a theme of my own that won’t be over­written by future updates to the Photography Orders code.

That’s important. I’ve already had to do one emer­gency fix to the site when it was running NextGen Gallery after NextGen Gallery was updated via the WordPress dash­board and messed up some of my customizations.

As I mentioned above, the MVC style coding of Photography Orders also allowed me to make changes to the look of the site, even to the point of where things went on a page, without having to dive into the base code. Any changes there would be subject to updates that could break my work.

Photography Orders is easy to work with; though I had the advantage of Luke’s knowledge and guidance. Others may have to work with Luke, as well, because there is no formal docu­men­tation for the API or other innards of the code. Having said that, Luke was always quick with an email reply that answered my questions.

I found Photography Orders to be well-developed with lots of func­tion­ality. There are inter­faces to many popular payment systems (I imple­mented PayPal’s) and the CSS is well written and easy to expand or override for customization. The client interface is modern and easy to use, there is an option to allow discount coupons and the pricing system is flexible enough to let you pick your print sizes and prices.

Another handy feature for customization is the translate settings section of the admin dash­board. Most of the text strings you see in the interface can be changed here without having to make hard edits in the code. That’s great is you need to change the language. But you can also use it to rephrase those strings, which I did on several occa­sions to make the site more “local.”

Lightbox Evolution In Action

Most of my PHP work, as opposed to my CSS work, was to change the way public galleries were handled. I wanted to use them as my port­folio galleries because this would be the way to elim­inate the NextGen Gallery part of my previous setup. With a little cutting and splicing, and the use of the JavaScript lightbox Lightbox Evolution, there are now nice large images for viewing with no other distrac­tions. This exercise shows the value of having the source code to work with when making customizations.

As an aside, Lightbox Evolution is the only lightbox tool that I was able to find that could handle “retina quality” images. It’s just $14 and it has an option that will take the original image size, scale it (I used 50%), and display the image in a classy lightbox. So I upload images at twice the size I want to display, Lightbox Evolution scales and displays them, and then folks with retina displays see high-resolution images while the rest of us still see nice images. The current version on CodeCanyon does not yet do this, but the author, Eduardo Sada, added this addi­tional feature at my request and will be releasing that func­tion­ality in version 1.6.9.

All in all, I’d recommend Photography Orders for the photog­rapher who needs to set up an online sales system, but does not want the continuing expenses of a PhotoShelter or a PhotoDeck. You can get pretty far with the premium theme pack and the software. And if you have even modest HTML, CSS and PHP skills, you can make some nice customiza­tions. With a few more skills, it’s not too terribly hard to even do as I did in creating a hybrid WordPress/Photography orders site.

A Few Wishes

I wish that Photography Orders did a few more things that are not on the current devel­opment roadmap.

• Allow the client to maintain a profile and edit her contact infor­mation directly
• Give each photo a name field in the database instead of only using the file name
• Upgrade the graphics for the new retina displays (espe­cially important for photographers)
• Save the cart for each user profile rather than each computer

As a developer, I would have liked to have run Photography Orders locally in a MAMP envi­ronment; but for some reason, it just wouldn’t run there. Neither I nor Luke spent much time trying to get it to, so maybe the problem isn’t all that complex.

I Like It

After a couple of weeks of part-time work, I think I have the photog­raphy website I want. Potential clients can look at my port­folio, read my blog and get the necessary contact infor­mation. From the same site, and with the same interface, clients can review their proofs and place print orders in a simple to use and attractive system. In the future, I have only to manage the custom CSS in two places and I know the Photography Orders code is upgradable without messing up my work.

Now, if Ryan, over at ProofBuddy, follows through with his concept of ProofBuddy as a full-scale WordPress plugin…