DIY website with Lightroom & Wordpress

Whoa, what gives? Yes, you are absolutely reading about a Wordpress-based photography site on a blog that is no longer based on Wordpress. I seemed to get a fair bit of traffic on my site from people wondering how to do this, so I am leaving these posts here for posterity. That said, the internet world has evolved quite a bit in the last four years, so I now use a system that is simpler in some ways, but immensely flexible. So read about this newer flat-file CMS approach as I document it over the next few months.

The first part of this series of how-to posts will begin with a short discussion of the components I have used to build this site and my reason for using them.

Lightroom

There are a whole lot of reasons you may want to pick up a copy of Adobe Lightroom. Just google “Lightroom” and allocate a few days for reading all the reviews and opinions about this piece of software. I won’t get into any deep analysis of the reasons for using it other than to say that it is a superb organization and editing tool for photographers who are mainly interested in taking and quickly preparing their photographs for some sort of output. I use the Web Export module in Lightroom to create HTML galleries that can then be easily added to my website as ‘galleries’. The beauty of this approach is that some clever code-jockey at Adobe has done all the heavy lifting for you by coding up a nice clean HTML gallery generator with thumbnails, images and navigation that works. All the user has to do is choose some of the parameters for this gallery in an interactive pane on the Lightroom Web Gallery menu.

That said, you can also just use Adobe Bridge to do the same thing if you already have a copy of Photoshop and don’t want to buy another piece of software. It appears that Apple Aperture also has a web output capabilities of some sort that will allow HTML gallery creation.

Why HTML instead of flash ? The short answer is this: the rapidly increasing use of mobile devices such as iPhones, Androids, iPads and other ‘not-computers’. Many of them either cannot display Flash-based websites or do so poorly. Just the way it is. And the way it appears to be headed. So I made the conscious decision to redo my whole site so that it could be displayed easily from any computer or mobile device. In some ways this is a good thing anyway because the HTML will degrade nicely if a site visitor happens to be using an older browser or has chosen to block all Flash content on general principles.

Wordpress

Wordpress is a free, open source content management system that was originally designed for creating blogs. But the fact that it is built on an underlying MySQL database made it an irresistible starting point for creating dynamic, CMS-like websites. By the time release 2.6 was out, it had grown up into a very impressive piece of software that could be tweaked into a very nice content management system. That free price part of the equation didn’t hurt either.

What are the advantages of Wordpress?

  • It is free
  • It has a very large installed base and thus a large number of users and a very large support community
  • It has a very good underlying design that allows the site content to be kept separate from its appearance through the use of Themes
  • It has another very large assortment of extensions called Plugins that allow the user to add functionality that is not in the basic software

Thesis

The final ingredient that is very useful is the Thesis theme for Wordpress. There are a gazillion themes available for Wordpress, some free, and some for sale. The problem with the large majority of these themes is that you pretty much have to shop for the look that you want. Sure, you can modify the themes yourself, but it requires a proficiency in HTML, CSS and PHP to make sure you don’t just mess things up completely. In short, most of the pre-packaged themes are pretty much out-of-the-box, take-it-or-leave-it affairs.

Thesis, on the other hand, is more of a framework for creating themes. Users with no knowledge of CSS or PHP can create a nice customized website by just using the control panel that appears in the Wordpress dashboard when the Thesis theme is enabled. The control panel allows you to change the layout, size, and color of virtually every component of your site. It allows you to create a customized menu structure for navigating your site. Anyone who can set the privacy options to their liking on Facebook will find that creating a custom Thesis is a cakewalk in comparison.

But the cool thing about Thesis is that it has an underlying structure of ‘hooks’ that allows the knowledgeable web lackey to completely customize pages, posts and virtually every part of the visual appearance of the site by adding and deleting components as needed. Need to move the menus below the header? No sweat, just use a hook to remove it from one place and add it back in to another.

The next part of this series of posts are going to be some specific hacks and resources I have found to be useful in my website redesign process. Stay tuned…


categories:  portfolio, web design, presentation   tags:  lightroom, thesis, wordpress