Integrating PhotoShelter and WordPress

How to combine PhotoShelter and Wordpress

Integrating PhotoShelter and WordPress
April 28, 2010 Johan Peijnenburg
In Hosting

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 easier then I expected. 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, 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.
  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 FileZila 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. 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.
  5. 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.
  6. 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:

    • Colors
      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.
    • 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.” Make sure to make a before and after backup, to be able to revert or upgrade later however.
    • 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 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.

WordPress Plug-ins

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:

    • Yoast SEO: a plugin that helps in setting up the 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.

/ul>

Conclusion

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:

      1. 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.
      2. 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.
      3. 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.
      4. 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.
      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 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.

If you are interested in using PhotoShelter or Bluehost and want to sign up for a trial, please consider using the image buttons below to get yourself (and me) a discount …

Join PhotoShelter & Save!

Comments (27)

  1. Steven Hight 10 years ago

    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.

  2. Djuna Ivereigh 10 years ago

    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

    • Author
      NiO 10 years ago

      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

  3. John 10 years ago

    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

    • Author
      NiO 10 years ago

      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

      • John 10 years ago

        Just got your mail Johan, thanks for sharing. I'll give it a try this week and let you know.

        Cheers

        John

  4. Steve Roberts 9 years ago

    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

    • Author
      NiO 9 years ago

      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

  5. Gilbert Romane 9 years ago

    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.

    • Author
      NiO 9 years ago

      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

  6. Gilbert Romane 9 years ago

    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.

    • Author
      NiO 9 years ago

      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 customizations 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 licenses directly

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

      Johan

  7. Gilbert Romane 9 years ago

    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.

    • Author
      NiO 9 years ago

      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

  8. Gilbert Romane 9 years ago

    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.

    • Author
      NiO 9 years ago

      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

  9. Fred 9 years ago

    Good Article!

  10. Sophie 9 years ago

    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!

Pingbacks

  1. […] Continue reading here: Integrating PhotoShelter, WordPress and Graph Paper Press […]

  2. […] This post was mentioned on Twitter by Art Tech. Art Tech said: Integrating PhotoShelter, WordPress and Graph Paper Press http://bit.ly/cvWqzc […]

  3. […] Update: for more info on how this site was constructed, please see this post: Integrating PhotoShelter, WordPress and Graph Paper Press. […]

  4. […] Update: for more info on how this site was constructed, please see this post: Integrating PhotoShelter, WordPress and Graph Paper Press. […]

  5. […] I can now focus on catching up with my post-processing backlog and I hope to be posting and sharing a lot of new images in the first months of the new year! I’ll also be writing a new post on my experiences with PhotoShelter, WordPress and Graph Paper Press, as a follow up on my previous review (see here). […]

  6. […] Read this article: Integrating PhotoShelter, WordPress and Graph Paper Press […]

  7. […] as a starting point for structuring the site as well as integrating WordPress with PhotoShelter.Read previous article: Integrating PhotoShelter, WordPress & Graph Paper PressBack in April of last year, I just managed to get my first site up and was using the combination for […]

  8. […] big thank to Johan Peijnenburg that wrote a valuable post about Integrating PhotoShelter, WordPress & Graph Paper Press and shared some useful plugins like the Dual Search Widget and the PhotoShelter RSS Gallery […]

Leave a reply

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

*