Early this year I signed up with PhotoShelter to archive, showcase and sell nature and travel images online. At that point I already knew that it would not be possible to include a blog and additional information pages using PhotoShelter only (at least not in a seamless way). So I got myself a domain at Bluehost, installed WordPress and signed up with Graph Paper Press (GPP) to get a WordPress theme that makes Integrating PhotoShelter and WordPress possible.
Please note: for an updated write-up of my experiences, please see this post:
Integrating PhotoShelter and WordPress – Update.
Integrating PhotoShelter and WordPress
Getting everything up and running was easier then I expected. The main steps were:
- Getting a domain
After considering various web hosting providers, I picked Bluehost to register and host my domain. Their offer is pretty straightforward and they meet the requirements for installing WordPress. After signing up, the domain was available almost instantly. Up until now their service has been very reliable.
- Installing WordPress
Bluehost offers an auto-install and auto-update for WordPress, so you don’t have to download it from WordPress, upload it to your domain and install it, every time an update is available. During the first install a mySQL database is created and default themes are installed.
- Installing a Graph Paper Press theme
Once subscribed to GPP, you get access to 24 themes of which 7 provide integration with PhotoShelter. I downloaded the modularity theme and uploaded it to my domain via FTP. As I am working on a Mac, I use Transmit for Mac for that (I also tried the free FTP options from FileZila and Cyberduck, but didn’t like the interface too much).
- Configure the GPP Modularity theme in WordPress
After activating the Modularity theme and playing with the parameters a bit, I had my first version of my site up and running on the first day. In order to integrate with PhotoShelter, the PhotoShelter navigation needs to be enabled in the navigation settings of the theme. This adds a default PhotoShelter menu to the theme’s navigation.
- Configuring PhotoShelter
Once the theme was configured, I had to replicate it to PhotoShelter. To create the same look and feel in PhotoShelter, I first selected the GPP theme in the theme options of PhotoShelter and subsequently configured the content of each of the PhotoShelter pages. Once that was finished, I needed to convert to “manual customisation” in the theme options of PhotoShelter and replicate the GPP theme look and feel using PhotoShelter’s template generator.
- Install PhotoShelter plug-ins
To enhance the integration between GPP and PhotoShelter, I also downloaded a number of specific PhotoShelter plug-ins and uploaded them to my domain. One plug-in, nowadays provided by PhotoShelter themselves, lets you include images from PhotoShelter in your blog posts, without having to re-upload the images to WordPress. A second plug-in, provided by GPP, lets you display recently updated galleries in WordPress. Along the way I developed a number of widgets myself to compliment functionality. More on those later in this post.
Graph Paper Press and PhotoShelter offer video tutorials as well as manuals to help in the process of getting started. These materials improved a lot over the past few months.
Customising the integration
The results of the previous steps can be customised to meet specific needs and requirements. You can actually play with almost everything, if you want. However, make sure you understand the concept of style sheets before you do …
For www.niophoto.com, I customised the following elements:
A lot of the colors used can be set in the Modularity theme options. The layout can be further customised by modifying the “styles” as stored in the “style.css” file. To be able to upgrade themes without too much hassle later however, it is advised not to edit the default styles directly. It is much better to copy the style you want to change and to paste it to the bottom of the GPP theme file “custom-styles.php” and edit the copy there. The edited style will overrule the original and this way you can group all your edits in one place.
A lot of the navigation can be set in the GPP theme options. It is also possible to change the defaults by editing the menu structure as stored in the GPP theme file “nav.php.” Make sure to make a before and after backup, to be able to revert or upgrade later however.
The default search option lets you search either the blog or the image archive. I wanted to offer both options in one go, so I combined the two. If you want this too, you can download the NiO Dual Search widget here.
The standard footer contains default content, which can be complemented by using the various theme widgets available. I did not like the standard footer (too much info visible on each page), so I stripped it and moved some of the info, for instance RSS feeds, to other areas of the site.
- Slideshow on home page
The default slideshow displays a batch of images as previously uploaded to WordPress. Because these images are in PhotoShelter already, I decided to replace the default slideshow on my home page with the PhotoShelter slideshow, to avoid replication (and I like the PhotoShelter version more).
- Sign-in pop-up
By default, a client area link is provided that takes a client to a separate page for signing in. I replaced that link with a simple pop-up, to make signing in less of a hassle.
- Recent images page and sidebar gallery
Using PhotoShelter, you cannot create a page with thumbnails of recent images that updates automatically, each time images are uploaded to the archive. Therefore I have created a separate recent images page using the NiO PhotoShelter RSS Gallery widget. A page like that gives new images more attention and they get found by Google immediately with the full caption and keywords included.
I used the same widget to make a thumbnail gallery of these images in my blog’s sidebar.
One of the nice things of WordPress is that there are many plug-ins available that can complement the functionality of your site. The main ones I used are:
Integrating PhotoShelter and WordPress, by using a theme, various plug-ins and some customization, certainly fills a gap. Since recently, PhotoShelter offers clients the possibility to add additional information pages to their site, but adding blog functionality obviously is another story.
The combination of PhotoShelter and WordPress/GPP does fit my needs. Although many improvements have been made in the last couple of months, the integration however is not yet seamless:
- A key shortcoming is that the integration ignores the fact that blogs are by definition dynamic. Every new page and every new category added in WordPress requires an update of the navigation in PhotoShelter. This just hasn’t been dealt with in the design of PhotoShelter’s template generator. In addition, dynamic content in the footer is also made hardcoded when using PhotoShelter’s template generator. So for instance automatically updating a most recent posts listing in the footer across the site doesn’t work.
- The new “Official PhotoShelter plug-in” allows images as stored in PhotoShelter to be included in blog posts. Unfortunately this doesn’t automatically generate a caption. The good news however is that the IPTC headline is included in the tag of the image, so it is easy enough to make one. The new version of the plug-in was released mid July 2010 and is a huge improvement over the previous versions as provided by GPP. Until now I avoided using the plugin, as it was not reliable and stable enough, and simply use the embed codes provided by PhotoShelter. The new plug-in however is much better and actually does take away the extra step of having to go to PhotoShelter to fetch the embed code.
- The PhotoShelter Gallery plug-in, as provided by GPP, doesn’t update correctly and never shows the last gallery that was updated. That’s actually one of the reasons that I decided to create the NiO PhotoShelter RSS Gallery widget.
- Support is not integrated and in the past theme updates were not always coordinated between GPP and PhotoShelter. As a result, it was not always clear what question to ask where and when the PhotoShelter integration tool would be updated after GPP theme updates.
- If you want to track visits to your site, you can include a Google Analytics tracking code. It is not very clear however, how to approach this when combining GPP and PS. There is a lot of information on how to deal with various situations, but picking the right approach for the combination is difficult, especially when you also use a CNAME for PhotoShelter. A bit more (SEO) documentation for the combination would help a lot. I will write a post on this topic shortly as by now I figured out how to do it.
Despite the issues mentioned above, I am actually quite happy with what I achieved: a more or less seamlessly integrated website with the functionality I was looking for. Not sure if I will stick with the current colors and layout on the long run, but I had to stop fiddling to move on to the next step: adding content.
I am also quite pleased with the effort that both PhotoShelter and GPP have put into improving the integration. I hope that there is more to come and will update this post along the way.