Integrating PhotoShelter and WordPress – an update

Subtitle goes here

Integrating PhotoShelter and WordPress – an update
February 24, 2011 Johan Peijnenburg
In Hosting

Introduction

In april of last year I wrote about my experiences with integrating and using WordPress and PhotoShelter for the first time. I use WordPress> to facilitate publishing of blog articles and PhotoShelter to archive, showcase and sell licenses and prints of my images on-line. The Modularity theme of Graph Paper Press (GPP) served as a starting point for structuring the site as well as integrating WordPress with PhotoShelter.

Read previous article: Integrating PhotoShelter, WordPress & Graph Paper Press

Back in April of last year, I just managed to get my first site up and was using the combination for a few months. A year has past now. I have just re-done this site and also helped out a few photographer friends with their sites, so an update is in order.

Getting up and running

The process of getting up and running hasn’t changed much. Assuming that you already have galleries with images up at PhotoShelter, you will have to:

  1. Get a domain and install WordPress
    Many providers offer webhosting at reasonable rates nowadays. Examples are GoDaddy, Dreamhost and Network Solutions. I use Bluehost to host my domain. Up until now, Bluehost’s service has proven to be very reliable. Their offer is pretty straightforward and they meet the requirements for installing WordPress and running PhotoShelter plugins. Bluehost offers an auto-install and auto-update for WordPress. During the first install a mySQL database is created automatically and a few free WordPress themes are installed.
  2. Upload a Graph Paper Press theme via FTP
    Once subscribed to Graph Paper Press, you get access to 23 themes of which nowadays 9 provide integration with PhotoShelter (you will need to get one of the paid subscriptions to get access to the themes that integrate with PhotoShelter). I downloaded the modularity theme and uploaded it to WordPress’ themes directory on my domain using Transmit for Mac (examples of freeware alternatives are FileZila and Cyberduck).
  3. Configure the Graph Paper Press theme in WordPress
    After activating the Modularity theme and configuring the theme options, you can get your first version of the site up and running fairly quickly. In order to integrate with PhotoShelter, the PhotoShelter navigation needs to be enabled in the navigation options of the theme. This adds a default PhotoShelter menu to the theme’s navigation.
  4. Integrate PhotoShelter
    Once the theme is configured, you will have to synchronize PhotoShelter with it to get the same look and feel and navigation structure. The first thing you do in the theme options of PhotoShelter, is select Graph Paper Press as the theme to use. Subsequently you configure the content of each of the PhotoShelter pages. Once that is done you can synchronize PhotoShelter with the Graph Paper Press theme. You can either opt for a basic synchronization at default settings or for a synchronization that allows you to manually customize the content of the PhotoShelter pages. Please note that you will have to re-run the synchronization when you create new pages or blog categories in WordPress.
  5. Install PhotoShelter plugins

    To enhance the integration between WordPress and PhotoShelter, you can install a number of plugins that have been created specifically for use with PhotoShelter:

  6. Set up your Search Engine Optimization (SEO)
    Once you have set up your site, you have to start marketing to make sure people find it. One of the ways to do that is SEO. Both Graph Paper Press and PhotoShelter offer many options to do that. In addition you can use PhotoShelter’s SEO Cookbook and SEO Grader to get you going. There are also many WordPress plugins that can be installed to configure your site for best SEO performance.

Graph Paper Press and PhotoShelter offer great video tutorials as well as manuals to help in the process of getting started. If you want to avoid having to arrange hosting, install WordPress and a Graph Paper Press theme, you could opt for the Graph Paper Press Pro subscription or use Visual Society.

Customization

The results of the previous steps can be customized to meet specific needs and requirements. As part of the basic set-up as described above, you can amongst others do things like including your own logo, changing the site navigation, change the background and font colors and change the content of the home page and sidebar of your blog. All of this without having to know anything about html and css.

Obviously you can go further, like I did, and change whatever you want to stand out a bit more. However … make sure you know how to play with html and understand the concept of style sheets before you do (or hire somebody who does). Knowing a bit about PHP also helps.

For this new version of my web site, I customized the following key elements:

  • Home page text and recent posts
    The default theme home page gives you the ability to include various “applications” for including a welcome message, various overviews of recent posts and blog content. I created a few extra applications to allow me to include my featured galleries at PhotoShelter as well as some extra text areas. I also customized the Graph Paper Press post slider application for recent posts in order to make it blend in with the design a bit better.
  • Home page slideshow
    The default Graph Paper Press slideshow displays a batch of images that you need to upload to WordPress first. Because these images are in PhotoShelter already, I decided to replace the default slideshow with the PhotoShelter slideshow. The only downside is that the PhotoShelter slideshow is flash-based, so on the iPad or iPhone you’ll only get to see a static image instead of a slideshow (more about this later).
  • Post templates
    In most cases, I want posts to have a sidebar (like in this post). In a number of cases however, I want to show an image or gallery at 950 pixels wide and have the text underneath (like here). For this I installed the Single Post Template WordPress plugin that allows me to create multiple post templates.
  • Footer
    The standard footer contains default content, which can be complemented by using the various theme widgets available. Normally the footer is the same on all pages. I wanted to be a bit more flexible and made the footer different for each type of page. So, a fairly limited footer on the home page and information pages and a tag footer only for posts without a sidebar. You’ll need to know a bit of PHP to make the footer flexible per type of page.
  • Featured gallery page
    By default, the standard gallery page of PhotoShelter gives you an overview of all galleries with limited info about each gallery. Therefore I have created a separate featured gallery overview page, to give them more attention and to be able to add a decent description (which is also good for SEO).
  • Recent work on main home page and on PhotoShelter home page
    To showcase my recent work, I have included my own NiO PhotoShelter RSS Gallery widget on my main home page (click “Recent work” at the top), as well as on my PhotoShelter home page which I renamed to “What’s new”. Including the widget like this, should give new images more attention and they get found by Google immediately with the full caption and keywords included.
  • Blog and blog category pages
    All Graph Paper Press Themes have their own way of presenting overviews of blog posts by date, category or tag. This is actually one the things you should check when selecting a theme. I preferred the way the “On assignment” theme presents these overviews and copied the related file (archive.php) over to modularity and subsequently tuned the lay-out a bit.
  • Image in RSS feed
    The RSS feed of a post normally either include the whole article or just a summary. I wanted to show a summary in combination with a featured image only. To do that I applied a change to the theme, which is described in more detail in another post: Showing Featured Images In Your RSS Feed.
  • Search pop-up
    In my quest to remove as much clutter from the site as possible, I decided to move the search option (based on my own NiO PhotoShelter Dual Search Widget) to the main navigation at the top and hide it behind a small icon … needed to dive into writing jQuery a bit for that 🙂
  • Tune styling across the WordPress and PhotoShelter domains
    Once you have run the basic synchronization between the Graph Paper Press theme and PhotoShelter, you will notice that there are a lot of minor differences in the way things are presented or styled. I opted for getting rid of all the small differences using CSS styles. Most objects used on both platforms have a style class or style id and therefor can be customized. Please note: to be able to upgrade themes without too much hassle later, it is advised not to edit the default styles directly. It is better to copy the style you want to change and to paste it into the custom styles area of the GPP theme options or into the GPP theme file “theme-css.php” and edit the copy there. The edited style will overrule the original one and this way you can group all your edits in one place.

The fact that I had the option to customize things to my own liking, is one of the key things that drove me into the arms of Graph Paper Press theme and PhotoShelter. As mentioned above, this is not something you can do without the knowledge about the underlying technology or at least the willingness to learn.

WordPress Plugins

One of the great things about WordPress is that there are many plugins that can complement the functionality of your site. It is quite easy to go over the top and have too many though. I have chosen to only use the ones I felt I really needed. The most important ones are:

  • Greg’s High Performance SEO: a plugin that helps with setting up the search engine optimization. I looked at a number of SEO plugins and found this one quite complete and fairly easy to use.
  • Simple Tags: a plugin that extends tagging for WordPress. I use it because it provides tag suggestions upon writing posts and it includes a nice tag cloud widget for my blog sidebar. It also shows related posts at the bottom of posts if desired.
  • Google (XML) Sitemaps: this plugin generates a sitemap which can be fed to Google, Yahoo, Bing, etc. to get your pages listed in their search engine. All WordPress pages are added an kept up-to-date automatically.
  • SexyBookmarks (by Shareaholic): adds a list of social bookmarking icons to each of your posts.
  • Hyper Cache: a cache system for WordPress that improves WordPress performance. I found this one to improve performance a touch more then other more well known caching plugins.
  • Wordbooker: this plugin provides integration between the blog and Facebook. It basically pushes posts to Facebook and synchronizes comments between them. It is not a perfect plugin yet, but it is the best one I could find.
  • WordPress Database Backup: safety first. A plugin that creates a backup of your WordPress database on demand or as scheduled. I have set it up to automatically mail me a back-up once a week.
  • Single Post Template plugin: allows for using multiple post templates (the same as for pages).

Improvements

Both Graph Paper Press and PhotoShelter have improved a lot, since I wrote my previous article about the combination. Most of the shortcomings I ran into a year ago, have been addressed. Key improvements for me are:

  1. The PhotoShelter’s Official WordPress plugin, that makes it possible to easily drop images as stored at PhotoShelter into posts, works flawlessly now. You can specify the size and whether or not to include a caption. It also includes the IPTC headline in the alt tag of the image which is good for SEO. You can also use the plugin to include a slideshow of a gallery into a post.
  2. Support is well integrated now and theme updates are well coordinated between Graph Paper Press and PhotoShelter.
  3. The urls for my PhotoShelter pages have improved a lot. They used to start with “www.photoshelter.com/c/niophoto”. Now they start with “niophoto.photoshelter.com”, which is a lot better.
  4. More choices regarding the information to show underneath a thumbnail in PhotoShelter galleries.
  5. Gallery slideshow pages now work on mobile devices like the iPad.
  6. New features like the ability to use a photo wall, filmstrips and portfolio slideshow pages have been added

Not all is perfect though and probably will never be as expectations will keep rising. My personal top 7 of things I would love to see improved:

  • Non-flash based embeddable slideshows
    PhotoShelter has a very nice option for generating slideshows which can be embedded anywhere. A major (or maybe even unacceptable) downside is that these slideshows are flash-based and as a result won’t work on mobile devices like the iPad.
  • Improved portfolio pages
    Portfolio pages are a new feature of PhotoShelter. They show a mobile device friendly slideshow of a gallery with a next and previous option. The navigation option that is included conflicts with the jQuery of Graph Paper Press however. In addition the “show caption” option underneath the slideshow is a bit typical. The caption is also the only info you can to show about an image. The “more info” option is also a bit strange as it differs from how it is done elsewhere in PhotoShelter. Normally you click the image to go to details. Here you need to click a separate link and clicking the image is the same as clicking “next”. As mentioned, the feature is new and PhotoShelter is probably already working on improvements based on the feedback they received. As it stands now, I prefer using the regular slideshow option for galleries as these are also mobile device compatible.
  • Resizing watermarks
    PhotoShelter allows you to upload a custom watermark for your images. The watermark doesn’t resize with the size of the image displayed however. So the watermark shown on a small version of your image will have the same size as on a large version.
  • Dynamic WordPress content in PhotoShelter
    Dynamic content in the footer is made hardcoded upon synchronization between PhotoShelter and Graph Paper Press. The same applies to the parts of the navigation that dynamically added in WordPress (for instance new pages or blog categories). As a result a most recent posts listing in the footer and the navigation won’t update in the PhotoShelter part of the site, without re-running the synchronization. Not sure if it is possible, but would love to be able to use dynamic WordPress content in PhotoShelter.
  • Including image quality selection options when embedding images
    Images as stored at PhotoShelter are converted to sRGB and compressed prior to being displayed. This is done to improve performance and to make theft less interesting. The current level of compression in combination with conversion to sRGB can in some cases be a disadvantage though. Images, even if they are shot with a pro-level camera and ditto lenses, do not always get displayed as you would want them to (especially if they for instance have a larger area of gradient blue sky). I would love to have the option to influence compression levels a bit, especially when I am embedding them in WordPress posts or on other sites.
  • The Graph Paper Press Gallery plugin should look at the update date of a gallery
    The PhotoShelter Gallery plugin, as provided by GPP, only looks at the creation date of a gallery when sorting. I would prefer it to look at the last update date or ideally to give me a choice between the two. The strange thing is that PhotoShelter has a similar widget which only looks at the date when a gallery was last updated.
  • Improved documentation for including Google Analytics tracking
    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 want to use the latest version of the Google tracking code (a-sync). A bit more documentation for the combination would help a lot.

Conclusion

PhotoShelter offers clients the possibility to add additional information pages to their site. Adding blog functionality however is another story. Combining PhotoShelter, WordPress and Graph Paper Press makes this possible in a fairly seamless way. I am impressed with how well the Graph Paper Press themes are constructed and how flexible they are. They facilitate customization very well and synchronizing the lay-out with the PhotoShelter back-end is easy … and if needed, great support is available from both GPP and PhotoShelter.

I am very happy with how the site looks an feels across the WordPress and PhotoShelter domains and have received quite some positive feedback from clients and colleagues. Site traffic is booming since I have implemented the new design early 2011, partly as a result of the great SEO improvement options offered by the Graph Paper Press Theme, WordPress plugin’s and PhotoShelter’s SEO cookbook.

I would definitely recommend the Graph Paper Press / PhotoShelter combination to any photographer. The themes already look great out of the box and can be personalized if you want to get your hands dirty.

So what do you think? Was this useful? Did I miss anything? Please do leave a comment and do not hesitate to contact me if you have questions!

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!
Bluehost Web Hosting

Comments (31)

  1. Dave Pattinson 7 years ago

    Excellent article!!! I will have to try some of those other plug-ins you recommend. Your site is amazing!!!!

  2. Sam Soares 7 years ago

    Great article! just recently i’ve transferred my site from full flash (don’t ask) to a fusion of photoshelter and gpp, best thing i could’ve done! Thanks for the plugins, very useful list!

  3. Harald Walker 7 years ago

    Two downsides of a tight integration between a WordPress blog and Photoshelter are vendor lock-in and handling Photoshelter downtime (usually several hours during deployment of updates, which happens ca. 4 times a year).

    I’ve been regularly using my images, hosted by Photoshelter in blog posts. That helped to increase the amount of images indexed by Google but it also makes me very dependent on Photoshelter and the availability of their service. When they update the services the image servers should continue working as long as possible, preferably without interruption.

    Regarding image compression and resizing by Photoshelter you also have to consider file sizes. Many Photoshelter powered pages (like those using their photo wall feature) are too heavy, increasing loading time (esp. bad on mobile devices), which also leads to a lower SEO ranking.

    What I am missing is a good, complete and fully documented API as we know it from other internet companies in the web 2.0 world. The current API is too limited and makes development of plug-ins too complicated or even impossible.

    • Author

      Thanks for the feedback Harald.
      I agree with your point on dependency. Personally I am not bothered with the downtime however, as it is like you say only a couple of times a year and it’s communicated well ahead. Regarding file sizes I would definitely like to have the option when I need it. In some case I could live with a longer load time.
      Cheers, Johan

  4. John Corson 7 years ago

    Love your site design! I am working on a partial redesign of my site as well, and just signed up and started integrating with Photoshelter last night. I was wondering how you got the small zoom button on your images that pops up a larger preview of the image. Is that a photoshelter option or did you have to do some customizing for that? I couldn’t seem to find it in the PS backend.

    Keep up the good work!

    • Author

      Hi John,
      Thanks for the compliment! The small zoom icon is one of the less well-known PhotoShelter options. You can set in in the widget for the image. Good luck with the integration!
      Cheers,
      Johan

  5. Jay Daviot 7 years ago

    Super impressed with your clean, crisp layout… I am currently setting my site up and only wish I found this post earlier! Would have saved me a heap of time. Cheers.

  6. Julieta Baison 6 years ago

    Hey would you mind letting me know which web host you’re utilizing? I’ve loaded your blog in 3 different internet browsers and I must say this blog loads a lot quicker then most. Can you recommend a good web hosting provider at a honest price? Cheers, I appreciate it!

  7. Janet Taylor 6 years ago

    Thanks so much. This was incredibly helpful, and your site is gorgeous.

  8. Hans 6 years ago

    I have a photo site that I am developing, and we have been using the GPP/PhotoShelter combo for some time now. Recently with the security update on the timthumb.php script we have found that the site is broken because we were depending on PhotoShelter to provide the thumbnails. Looking at your site I see that you are uploading the images into the posts. I have trouble with the idea of updating 400+ posts and uploading a photo per post to make this all work again. Do you have any suggestions?

    Also does your plug-in have the same security issues because it uses the timthumb.php script?

    Lastly, you have some very breathtaking shots.

    Thanks
    -hans

    • Author

      Hi Hans,
      I started uploading featured images for each post wen I moved to version 2.9.4 of modularity last year. I did that to enable me to also include a featured image in my RSS feed and not so much for timthumb. Glad I did that as it avoids the isue you have when I upgrade to a newer version.
      Apparently my plugin also had the security issue as it uses timthumb in the background. There is a new version of timthumb available without those issues and I have just tested that with my plugin yesterday and all seems fine. I will be making an updated version of the plugin available in the coming days.
      Lastly, thanks so much for the compliment on the images. It all is still a work in progress (and hopefully always will be), so the feedback is appreciated!
      Cheers, Johan

  9. Cees Maas 6 years ago

    Hi Johan,
    Thanks very much for the excellent article! I bought a Photoshelter subscrition yesterday, using WordPress for years now and gonna try the integration with GPP as you described.
    Your website is by far the most beautiful and functional one I met on the net.
    Best,
    Cees

    • Author

      Thanks Cees! Looking forward to seeing your new site. Don’t hesitate to ask questions!

  10. Michael 6 years ago

    I’m curious, what is meant by “Photo Shelter integration” in the GPP themes that offer this feature?

    Do you know of any other (non-GPP) themes that offer this capability? I just wonder because of the thousands of WordPress Themes out there it seems unfortunate to be limited to 9 themes (that require reoccurring cost).

    Obiviously, as exhibited by your beautiful site, these are capable and nice looking themes. I would just like to know if there are any alternatives to investigate before beginning.

    Please and Thank You,

    Michael

    • Author

      Thanks for the compliment Michael!
      With this option you can integrate your image galleries as hosted on PhotoShelter seamlessly in the WordPress theme. You would need to have an account at PhotoShelter obviously 🙂
      I don’t think that there are other WordPress themes that offer the same option.
      Re the costs: you can just go for a 3-month subscription, select your theme and build your site with it and then drop the subscription. The themes usually keep working when there are upgrades of WordPress.

  11. Margarita 5 years ago

    Hi Johan,

    What an awesome post! Thank you for explaining this in such clear manner. Exactly what I was looking for!

    I have one question: Is is necessary to use a Graph Paper Press theme to integrate Photo Shelter into WordPress? I quite like my WordPress theme and I am keen to keep it, but I can’t deny the benefits of being able to take the potential clients straight to the PhotoShelter’s ordering page from my website. Just wondering how theme-limited that option is.

    Thanks again for the awesome post!
    Margarita Steinhardt

    • Author

      Hi Margarita,

      In principle, it is possible to integrate any WordPress theme with PhotoShelter. What it boils down to is that you need to copy relevant parts of the header and footer of the WordPress theme to the PhotoShelter master templates, include links to your style sheets in there and then complement these with styles for PhotoShelter classes and id’s.

      It does mean that you need to know what you are doing and to be a bit hands on with html and css styling.

      Cheers,
      Johan

  12. kintarasan 5 years ago

    Thanks for writing up the PhotoShelter + GPP integration. It’s been very helpful in helping me decide if it’s worth moving from Zenfolio and my own customised WP installation to this.

    So two years on from this post, any further thoughts on what’s improved and what your top 7 wish list items are? Also, any advice about migrating to PhotoShelter?

    • Author

      Hi Sam,

      I was actually planning to write an update to this post in the coming weeks as there have been quite a few improvements and still a few to come 🙂

      Key improvements:
      > Much better back-end to manage images, galleries and collection
      > A lot more options for print fulfillment
      > Higher quality jpg’s (which obviously also has a downside)
      > The plugin for including images in WordPress posts had improved a lot

      My wish list: main thing for me are html5 slideshows. It has been confirmed though that they will be coming soon!

      Cheers,
      Johan

      • kintarasan 5 years ago

        @Johan: Thanks for the reply and I look forward to reading your post about the rest of the changes. 🙂

  13. Dozza 4 years ago

    In the quest for responsive commerce CMS for photography, I’ve been looking at this solution as an option. I called photoshelter today and they are developing natively responsive themes that will eventually negate the Graph Paper/WP integration.

    There’s a beta program underway at http://www.photoshelterbeta.com

    • Author

      Hi Dozza,

      Thanks for commenting. I am actually one of the beta-testers. So far I am very happy with where things are going with these responsive themes! 🙂

      Cheers,
      Johan

  14. Olivier P.Beroud 3 years ago

    Hello Mr Johan!
    I’m beginner, so be kind!!! I try to follow your excellents advices for integrating GPP/WP with PS but what about the so called “BEAM” is it possible or we must stick on the ”clasic”

    I have hard time… but I’ll work hard till the end!
    Many thanks. ( POS: I’m in Les Diablerets, in case!

    Best Regards

    Olivier

    • Author

      Hi Olivier,

      My apologies for the late reply! With Beam you have much less possibilities. It really is very different technology and as a result much harder to integrate with WP. It is possible to include a blog page in Beam, but to be honest I have not tested it myself yet …

      Just let me know if you want to know m ore 🙂

      Best regards,
      Johan

Pingbacks

  1. […] this article: Integrating PhotoShelter, WordPress & Graph Paper Press – Update | Alpine Nature & Landsca… Tags: gpp, photography, photoshelter, templates, […]

  2. […] Please note: for an updated write-up of my experiences, please see this post: Integrating PhotoShelter, WordPress and Graph Paper Press – Update. […]

Leave a reply

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

*