Integrating PhotoShelter and WordPress

Introduction

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 relatively easy. The main steps were:

  1. 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.
  2. Installing WordPress
    Bluehost offers an auto-install and auto-update for WordPress. The install procedure created a MySQL database and installs default themes.
  3. 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 FileZilla and Cyberduck, but didn’t like the interface too much).
  4. 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. To integrate with PhotoShelter, you need to enable the PhotoShelter navigation in the navigation settings of the theme. This adds a default PhotoShelter menu to the theme’s navigation.
  5. Configuring PhotoShelter
    Once I configured the theme, 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. Subsequently, I 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.
  6. Install PhotoShelter plugins
    To enhance the integration between GPP and PhotoShelter, I also downloaded several specific PhotoShelter plugins and uploaded them to my domain. One plugin, 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 plugin, provided by GPP, lets you display recently updated galleries in WordPress. Along the way, I developed several widgets myself to complement 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:

  • Colours
    A lot of the colours 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.
  • Navigation
    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.” However, make sure to make a backup before and after, just in case.
  • Search
    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.
  • Footer
    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 update automatically, each time you upload images 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 pop up in 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.

WordPress Plugins

One of the nice things about WordPress is that there are many plugins available that can complement the functionality of your site. The main ones I used are:

  • Yoast SEO:
    A plugin that helps in setting up search engine optimization. I looked at a number of SEO plugins but found this one quite complete and fairly easy to use.
  • Conditional CAPTCHA Anti-Spam:
    This plugin adds a so-called CAPTCHA to comments and contact forms, only when it suspects spam.

Conclusion

Integrating PhotoShelter and WordPress, by using a theme, various plugins and some customisation certainly fill a gap. Since recently, PhotoShelter offers clients the possibility to add additional information pages to their site, but adding blog functionality is another story.

The combination of PhotoShelter and WordPress/GPP does fit my needs and improved considerably in the last couple of months. The integration, however, is not yet seamless:

  1. A critical 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. PhotoShelter just didn’t deal with this in the design of PhotoShelter’s template generator. Besides that, dynamic content in the footer is no longer dynamic after using PhotoShelter’s template generator. So for instance automatically updating a “most recent posts” listing in the footer across the site doesn’t work.
  2. The new “Official PhotoShelter plugin” 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 tag of the image includes the IPTC headline, so it is easy enough to make one. GPP release a new version of the plugin in mid-July 2010 and it is a huge improvement over the previous versions. 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 plugin, however, is much better and does take away the extra step of having to go to PhotoShelter to fetch the embed code.
  3. The PhotoShelter Gallery plugin, as provided by GPP, doesn’t update correctly and never shows the last updated gallery. That’s actually one of the reasons that I created the NiO PhotoShelter RSS Gallery widget.
  4. Support is not integrated and in the past, GPP and PhotoShelter did not always coordinate theme updates between themselves. 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.
  5. 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 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 colours and layout on the long run, but I had to stop fiddling to move on to the next step: adding content. I am also pleased with the effort that both PhotoShelter and GPP put into integrating PhotoShelter and WordPress. I hope that there is more to come and will update this post along the way.

23 thoughts on “Integrating PhotoShelter and WordPress

  1. Pingback: WordPress Website with PhotoShelter integration - Anette Mossbacher

  2. Sophie says:

    I’m really enjoying the design and layout of your website. It’s a very easy on the eyes which makes it much more enjoyable for me to come here and visit more often. Did you hire out a designer to create your theme? Outstanding work!

  3. Pingback: Integrating PhotoShelter, Wordpress and Graph Paper Press | Wordpress Develop

  4. Gilbert Romane says:

    Thats what I was thinking of doing. I will sign up for a year as well. Unfortunately I already have a PS account or I would definitely have used your promo code to get us both discounts 🙂

    I am going to use Bluehost as well, am happy with what they offer for services for the price. Is there any discount codes there that I can use to get you some financial benefits?

    Thanks for your help, hope your site proves as successful as the info you provided to me was.

    All the best.

    Gilbert.

    • NiO says:

      Hi Gilbert,
      You're welcome! Not sure if Bluehost or GPP offer a discount. You can try using the links to Bluehost and GP on this page.

      Please do keep me posted on how it is going with your site and good luck,
      Johan

  5. Gilbert Romane says:

    Johan, I agree with you. I have learnt that lesson a while ago, no point in trying to do it all yourself. I guess I fell into some old habits 🙂 I think I will go down a similar path as you. One thought that has come to mind. PS say they will be supporting WordPress plugins and I'm hoping all/more themes in the future. To download the supported themes from GPP you need to sign up at least from there free account. But all the supported themes are a child theme of the Modularity theme, which is only downloadable with a paid account. Am I correct on this? Did you sign up with GPP and pay for a Pro account?

    As for self-fulfilled prints, that is exactly my intention. I am just trying to decide if I want to pay someone 8% for my sales, whether prints or download. But I think i have decide on this now.

    Again, your time is much appreciated.

    Gilbert.

    • NiO says:

      Gilbert,
      Yes, to get to the right GPP themes, you will have to sign up for at least one quarter ($49). I signed up for an annual account at GPP myself and for a standard account at PS ($329). You could go for a pro account at PS ($549), but the only thing you would get extra is for that storage space. You'll get a one-time discount of $20 resp. $30 if you use my (or someone else's) promo code btw.
      I opted for the annual account at GPP because I expected that I would upgrade or move to a different theme at least once in the first year.
      Cheers,
      Johan

  6. Gilbert Romane says:

    Thanks Johan, I am starting to think your path is the way to go myself. I wonder though, after looking at features of bluehost as to why there would even be a need for PhotoShelter at all. Bluehost has all the space one could need, email, themes, wordpress plugins for e-commerce (such as zencart and others), galleries, etc. I realize Photoshelter has already setup some of these options and would make the whole process easier and quicker or have I missed some fundamental feature of Photoshelter all together? If one could put all this together then I wouldn't need to pay someone a percentage of my print sales and collect all the profits myself. I guess it comes down to how much time you want to spend on setting up your own site?? Your thoughts are greatly appreciated.

    Gilbert.

    • NiO says:

      Hi Gilbert,

      PhotoShelter is not perfect, but they do wrap all the different tools into a package in which they play quite nicely together (others like SmugMug do to btw). This includes archiving, lightboxes, searching, selling, printing, SEO, Picscout, etc. I agree that it is possible to construct something yourself with the various free tools available, but do you want to spend the time figuring it all out? You will definitely save money, however time is also money, unless the tech side is your hobby. I was just afraid that I would spend a lot of time, with the risk of getting frustrated or ending up with something that didn't look too great. I decided that I'd rather spend time on my images and adding content.

      Don't get me wrong, going the PS/GPP route did also cost plenty of time because of my customisations and was sometimes also frustrating, but I do feel I did save time and am happy with the result.

      Btw if you use PhotoShelter you can still opt for self-fullfilled printing and selling licences directly

      Hope this helps. If you need to know more, just let me know. Cheers,

      Johan

  7. Gilbert Romane says:

    Hi Johan, love the info in your article, really helps understand the partnership between GPP and PS a bit more. I am contemplating whether or not to use a hosting service that supports WordPress and then download GPP's PS supported themes to load. But I am wondering if would be simpler to just pay for the Elite web hosting service by GPP and have WordPress pre-installed and hopefully make a smoother process in all. Did you consider this at all? Have you found using a seperate hosting service and your own install of WP to be more controllable? I have asked for details about the hosting package from GPP but still have had no reply.

    thanks in advance.

    Gilbert.

    • NiO says:

      Hi Gilbert,

      Thanks for the feedback!

      Initially I also looked at Visual Society (which I think is the same as the elite service) because I thought that would be easier. At that time they were no longer accepting new clients however, so I moved on. To be honest, getting a domain, auto-installing WordPress and uploading a first theme was surprisingly easy. It gets time-consuming when you start fiddling with the look and feel of the theme.

      In retrospect I am glad that I went down this route. I now manage multiple domains through Bluehost and can upload themes, plug-ins and custom pages as I see fit. Not sure what that would be like in the alternative.

      Cheers,
      Johan

  8. Steve Roberts says:

    Hi Johan,

    Great article

    – I liked the idea of the photoshelter gallery slideshow so much I implemented it in my blog – took a little bit of playing but I got there eventually. Took a while to get it centered if not at the 950px size ( more due to my ignorance than anything 😉 ) but got there in the end

    Problem with the standard GPP slideshow was having to upload seperate images again after allready putting them on photoshelter, this way is much simpler.

    GPP and Photoshelter integration isnt what I would call "seamless" but i do like it.

    Any chance you could email me the search box code as well?

    Thanks

    Steve Roberts

    • NiO says:

      Hi Steve,

      Glad you like the article. I will be sharing more experiences soon. And I do like the combination too, and it is improving gradually.
      Btw: Don't hesitate to ask for input if you need it while completing your site! You should try to make the slideshow 950. I think it will look much better!

      Re the widget code: I should take some time to just make it available from my site … will send you an email with the code.

      Cheers,
      Johan

  9. John says:

    Great review Johan, thanks for pulling it together. I still think the combo is the best fit for me also but now have a better appreciation of some of the problems I'll face.

    I love what you did with both the search box and the slideshow. Using the PS slideshow makes so much sense and saves having to upload images twice. If you could share how you did both I would really appreciate it.

    Thanks in advance.

    John

    • NiO says:

      John, thanks and your welcome! Regarding your question:

      For the PhotoShelter slideshow, I first went to my PhotoShelter gallery, opted for "embed this gallery" and played with the lay-out until I was happy. Subsequently I pasted the resulting embed code in the slideshow.php file for the theme (in the app directory), after deleting the default code of GPP. It's actually pretty easy. Just let me know if you need more info!

      For the combined PhotoShelter/Wordpress search: I made a Javascript-based search widget for that, which I am happy to share. I'll mail you the code.

      Regards, Johan

  10. Djuna Ivereigh says:

    Looking good 🙂

    I'm working through the same PS+GPP growing pains at blog.djunapix.com.

    How did you muster that blog/archive search box??

    Many thanks 🙂

    Djuna

    • NiO says:

      Hi Djuna,

      I coded the blog/archive search myself. I can send the code to you, if you want … you can then use a text widget to implement it.

      Cheers,
      Johan

  11. Steven Hight says:

    Salutations Johan,

    Your new site looks great.

    Thanks for taking your time to assist me in the pursuit of your wonderful search box invention. As set out in my email – it didn't work on my first attempt, and I need to concentrate on preparing and upload more content into the archive.

    I don't yet have the skills to make Search Box nirvana work, but eventually who knows.

    Your PS & GPP journey is well described above. I can relate to much of what you have set out, especially the frustrations of integration and the lack of co-ordinated assistance between the two organisations. I would hesitate to recommend the process to someone who has never had any html/css coding experience as the journey can be daunting. Self help via the PS & GPP forums is difficult to pin point and the learning curve is steep for the un-nerdishly inclined.

    I also have reservations about usability for editorial customers. Media and Agencies can be a fickle bunch. While seamless integration sounds good, my first attempts resulted in a confusing layout. I wanted some customers to arrive at and stay within the secure archive. If they get pushed onto the Blog by a click accident I want them to get out easily via the menu or backpage button. Because the integration process imports menus from the Blog I had to completely rethink a combined navigation menu strategy.

    Those fortunate to have the skills, or with access to a nerd can produce wonderful results. Sites like yours provide the frustrated like myself with the inspiration to plug on.

    Great pictures by the way – which after all is said and done, is the reason for it all.

    Content is KING.

  12. Pingback: Tweets that mention Integrating PhotoShelter, Wordpress and Graph Paper Press -- Topsy.com

  13. Pingback: Integrating PhotoShelter, Wordpress and Graph Paper Press | WordPressPlanet.com

Leave a Reply

Your email address will not be published. Required fields are marked *