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.
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:
- 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.
- 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).
- 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.
- 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.
- 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:
- PhotoShelter’s Official WordPress plugin: this plugin lets you include images from PhotoShelter in your blog posts, without having to re-upload the images to WordPress.
- My own NiO PhotoShelter RSS Gallery Widget: let’s you include a gallery of recently added PhotoShelter images in your blog.
- My own NiO PhotoShelter Dual Search Widget: the default search option lets you search either the blog or the PhotoShelter archive. I wanted to offer both options in one go, so I combined the two.
- 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.
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.
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.
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).
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:
- 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.
- Support is well integrated now and theme updates are well coordinated between Graph Paper Press and PhotoShelter.
- 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.
- More choices regarding the information to show underneath a thumbnail in PhotoShelter galleries.
- Gallery slideshow pages now work on mobile devices like the iPad.
- 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.
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.