Finally got around to creating a dedicated gallery of landscape images from my trip to Patagonia in Argentina. It’s a relatively small gallery of 8 images, showing a few of the best images…

Feel free to click the image above to to to the gallery online, and you can also take a look through the individual blog posts about some of the photos:

ICE
Crampons
Grouse on the Glacier
Les Eclaireurs Lighthouse
Perito Moreno Glacier Trek
Moreno Glacier Argentina

I’ve been stepping up my activity on PhotoShelter recently – adding custom slideshows for my facebook fan page and allowing buyers to choose prints in a variety of different formats using the ‘self-fulfilled’ option…

My work is mostly travel-related photography focusing on landscapes, architecture and travel scenes. I’m now able to offer signed prints through my website and allow buyers to easily order the prints to their specifications. Recent projects include a look at New York icons and buildings, called ‘Manhattan – A Closer Look’. This series was also featured on PDN’s Photo of the Day. I love to travel and love photography – so it’s been fantastic to combine the two!

There’s a number of reasons I’m glad that I stumbled across the PhotoShelter offering a couple of years ago, and why I’m still making adjustments and changes using their ever-growing list of features. I’ve done a couple of reviews previously – one early PhotoShelter review here, and a PhotoShelter review update here – where I’ve mentioned some of their SEO tools and toolkits specifically for photographers.

Here’s a run-down of why I use PhotoShelter:

Archive

It’s always a good feeling – even if your off-site hard disk backup hasn’t been refreshed in a while (hey, it happens!) – all your most important photos are sitting securely on PhotoShelter’s storage system at their highest resolution. If the worst were to happen, downloading the original archived files to the computer again would be pretty easy.

Website Integration

To me, this is of huge importance; being able to make the ‘archive’ and ‘e-commerce’ components integrate fully with the main website. It means no awkward jump in look-and-feel between components. Consistency. I’m a regular reader of Smashing Magazine, which made me realise that I could take a stab at my own web re-design. The results are what you see on my current website.

After building the ‘front end’ of my newly designed website, I could then apply the exact same look, feel and branding to the PhotoShelter archive component of the site. If you’d like more info about the re-design, I created what was meant to be a short article (but turned out a tad large) about customizing my WordPress blog, my website and the integration with PhotoShelter here.

I think its hugely important nowadays for websites to be seamless and well integrated – PhotoShelter lets me do just that! Now, even if people hit google search results and go straight through to my PhotoShelter site first, they still see the same branding and cohesiveness… (is cohesiveness even a word!?)

Social Media Tools (and Facebook slideshow integration)

There’s a whole bunch of Social media tools and features built into the PhotoShelter system that allow you to easily post galleries and photos to facebook, flickr, or twitter… Take this example below – where people can click a link to buy the image directly from the article, and also get their own embed links for their use – which will link straight back to your portfolio.

Best of all – how many times have I been thankful for this feature? – you don’t have to worry about the watermarking. I normally post pictures at a small resolution to social media sites and I was worried about uploading the ‘full size’ to PhotoShelter. Luckily it’s easy to set up a customized watermark in whatever style or size that you want. The watermark then automatically gets applied to the photos when other people view them. Your original photos are left untouched, and you don’t have to faff with anything fancy in Photoshop.

There’s also a great write-up by David Calvert on the PhotoShelter blog about customizing your facebook fan page with PhotoShelter slideshows. That tutorial inspired me to set up a facebook fan page for my travel photography (long overdue), and to set up a slideshow on the custom ‘welcome’ page with some of my images. Again – the PhotoShelter system makes everything so customizable that it’s easy to set up a gallery of images that you want to appear in the facebook slideshow, but that you might not want to appear in the list of galleries that people see through your website.

‘Soft’ side of PhotoShelter

I touched on this briefly in my updated PhotoShelter review – it’s not all about the ‘product’ at PhotoShelter – I also get great information from their ‘A Picture’s Worth’ blog, as well as attending their free webinar sessions on anything from monetizing your PhotoShelter galleries to setting up Google Analytics for your site. There’s also the free toolkits that they produce, like the SEO Cookbook for Photographers or a guide to designing websites for Photography Buyers, through to the recent Social Media Guide for Photographers.

All in all, it makes you feel like part of a local community!

In summary…

I use PhotoShelter to:

- Sell signed prints to buyers, who can buy online at any time of the day
- Offer coupons and incentives to buyers
- Keep a secure offsite copy of my most valuable photos
- Market my photos through social media and slideshows using the same source photos
- Integrate the e-commerce needs of my site with my ‘front end’ website and wordpress blog
- Use their free resources – like the toolkits and blog posts…

Yep – I’d recommend to a friend!

Related Posts:

Website and WordPress Integration with PhotoShelter
PhotoShelter Review Update
Facebook Fan Page – Become a fan!

I realised the other day that I’d missed my blog’s birthday. It probably wasn’t upset or anything, but made me think that it might be time for a fresh coat of paint…

And so it began. I didn’t think it would take this long, but it’s finally finished, and I’m happy with the result. Here’s a list of things that I did, which broadly cover:

a. Setting up a test blog
b. Customizing the blog
c. Creating the ‘other pages’, like the home page etc.
d. Integrating the website and WordPress with PhotoShelter*

I’ll run through the full process that I followed below. Feel free to tune out if this puts you to sleep! Hopefully it will be useful for someone out there…

a. Setting up the test blog…

I thought this customization thing would probably take a decent chunk of time. I’m not a programmer by heart, so taking a theme which includes php, css and js, and knowing that I was wanting to customize it reasonably heavily made me slightly nervous.

Enter the test blog. By setting up a brand new WordPress test database, a new WordPress installation on my web server, and an entirely separate directory structure, I was able to create a safe ‘sandpit’ where I could work on the design without any time-pressure. I followed the detailed instructions on the WordPress Codex (Famous 5 minute install) to get things working.

I also then used the WP Admin section to export all the posts from the ‘live’ blog, and import them into the ‘test’ blog, so that I had lots of posts / pages / comments etc to test with.

b. Customizing the blog…

Customizing the blog took the largest chunk of time. Stripping out everything that I didn’t need, and hard coding as much as possible into the php files so that it meant less database calls and (hopefully) better performance. Also stripping as much as possible out of the style-sheets without unintentionally killing anything, as well as combining multiple style-sheets into as few as possible.

My main aim with the new design was complete integration between all areas of the site, and simplicity. So I had some ideas in mind when I started the process. I completed things like swapping out image files, creating fresh title images etc, re-coding headers and general page layout, and generally getting things to a point where I like the look of them.

SEO was also taken care of at this point, using a number of resources from my last post on SEO for WordPress. Things like making sure <h1> tags had page titles in them, and making sure there weren’t duplicate <h1> tags etc.

Structuring the single navigation bar was important to me, as this was going to span the entire site. It landed up becoming a balance between creating WordPress pages that the theme navigation could use, and also adding in navigation menu items manually to ensure the order and placing that I wanted, especially for non-WordPress page links, as these needed to show up on every page’s navigation, regardless of whether they were housed in WordPress or not.

I then brought a few items over from the old blog, things like the RSS subscribe links, the PhotoBlog Awards ‘VOTE!’ link, and the search boxes. Also created the ‘Contact’ group of pages, where people can email me directly, or use an online contact form, or join the mailing list.

Another thing I brought across from the old blog was the social site sharing links – basically adding a filter into the functions of WordPress to make sure that the links for sharing on facebook, digg, stumbleupon and twitter are visible on the bottom of each post, complete with the specific url for the post.

Once I had reached this point, I was happy with the design, and made the blog section of the main site ‘live’ by copying over the modified theme directory from the test blog, to the live blog. I then made sure all the hard-coded items** were pointing to the correct blog.

There’s also a load of design information on the Photo Buyer Website Survey 2009, from PhotoShelter, which has a load of survey results showing things like ‘yes, you need a search section’, and ‘yes you need to put an email address on every page, in an obvious place’… and other useful information!

c. Creating the ‘other’ pages…

I wanted the home page to be completely different to a ‘blog’ look and feel, but to keep the same navigation and key elements to keep the uniformity. I also made the decision to keep the homepage outside of the WordPress installation, so that if anything happened to the database or the WordPress install at least some parts of the site would still work.

I used the exact same headers and footers, and then stripped out all the blog related content from the main content area, to be replaced with a single (no slideshow) picture. This is easy to rotate whenever I have the urge, and I kinda like the simplicity of the single stark image that I have up there currently. It’s also linked straight to the blog post about that particular image.

The other pages which needed some manual intervention were the portfolio pages. These individual galleries are the only pages on the site where the usual navigation gets dropped, in favour of 2 simple grey links in the top left corner – one leading back to the portfolios page, and one leading to the ‘contact’ page. Leaving the rest of the page simple enough so that people can enjoy the photos without navigation distractions, but also giving people the important options if they land on the page from a search engine or other external source.

At this point, I copied all the ‘other’ pages, from test file names, to the real file names so that they became live all at once. Now everything has the same look and feel throughout the site – apart from the PhotoShelter Archive.

d. Integrating the website and WordPress with PhotoShelter…

This is where the css and js got slightly intimate. I had a few choices here, and decided to go with probably the hardest one. Personally I think it’s the most resilient, and should hopefully hold up well!

Option 1. Use an <iframe> to embed the PhotoShelter archive into the ‘Image Archive’ tab on my website. This seemed pretty straightforward, and I actually built it and tested it like that initially. The thing that held me back was that if someone arrives at the PhotoShelter site directly, then it would look pretty bare, because it would be missing all the navigation that is housed on my website (which would be outside of the <iframe>. So the user would probably get totally confused. Well ok, not totally confused, but it would really bug me.

Option 2. Throw in the headers and footers from my website / the WordPress installation, to the manual customization section of the PhotoShelter admin pages.

So I went with option 2. This is where I found that a lot of the PhotoShelter styles overlapped with the WordPress theme styles. Styles like ‘nav’ and ‘header’ and a number of others were giving me overlap-grief.

The way forward was to copy a set of the style-sheets and the necessary java-script files over from the WordPress install, to a separate directory on my web-server. I could then edit those to change all the calls to the shared styles, to something different. e.g. from nav to differentnav. Or header to differentheader.

Luckily PhotoShelter makes this process pretty easy to test things, with a handy preview feature so that you can quickly take a note of where you’re at, without leaving the editing section. Headers and Footers were soon copied over to PhotoShelter and were no longer clashing with the WordPress / website install.

Next up, was to check through the different pages within the PhotoShelter site. Luckily all the PhotoShelter pages use the same headers and footers, so once I’d resolved all the css and js issues, the entire site worked almost right away with the new branding. Best of all, if someone went to archive.orangeblob.com directly, they see an exact match of all the navigation and branding from the main site. The ‘Image Archive’ tab is even highlighted, so you would only realise you’re not in the main site by looking at the url.

That’s it!! At that point, all the different components were up and running. I took a backup of the WordPress database, the installation directories and the entire home directory off-site, just for good measure. I also took the opportunity to further secure my WordPress installation as per the Smashing Magazine ‘securing WordPress’ link below.

Tools or resources that really helped:

1. Firebug – ‘helped’ isn’t the right word here. It would be like Bond with no Q. Or Holmes without a Watson. Totally essential for anyone wanting to hack html and css to pieces.

2. Smashing Magazine – for providing awesome design related articles. And they always send out some WordPress love from time to time, like this useful article on Securing your wordpress install / protecting the wordpress admin area.

3. VMWare – meant that I could test out the website (nothing too hairy, just checking the navigation works, and that the different pages and components display properly with the different style-sheets. I normally test with Mac OS-X (Firefox and Safari) and Windows (Firefox, Safari, Chrome, IE8, IE7, and the dreaded IE6).
Browsershots is an alternate method. It lets you supply a url, and then it shows you lots (and lots) of screen-shots of what that site looks like using a whole host of different browsers. You can’t really test the actual use of things like navigation menu drop downs though.

4. Website Grader or a similar tool. Once you’re done with everything, run this and let it check out your site… it’ll give you some useful pointers if you forget alt tags, 301 redirects, etc. A similar custom-grader for PhotoShelter is the SEO Grader which specifically looks through and checks your PhotoShelter archive setup, and gives you tips on where you need more attention.

thanks for reading!

tim

Edit: With exquisite timing, (the day after I completed my own WordPress and PhotoShelter integration) I got an email saying that PhotoShelter have actually developed a partnership with Graph Paper Press. Head over to the PhotoShelter info page to see more on integrating your PhotoShelter archive with Graph Paper Press WordPress themes.

Definitely worth taking a look through the link and the videos they provide if you’re looking for an easier way to do the integration (the PS page links to two videos, but if you click through to the Graph Paper Press vimeo site, they have a few more related to WordPress/PhotoShelter). They also have some sample sites which you can look at, as well as some funky looking customizations for the WordPress side of things, like embedding galleries and images on the blog without leaving the WordPress admin area. Looks really slick and probably simple to implement ‘off-the-shelf’.

However, with that said, I think even with this knowledge I would follow the same path that I did above, as I selected a very specific starting-point theme with the type of navigation and look and feel that I required, then customized it relatively heavily before applying it to the rest of my website, and integrating with the PhotoShelter archive. There’s also a number of steps above which can be applied to both methods, such as hard-coding php files for performance, streamlining css files, using a test blog setup, customizing headers and footers in the PhotoShelter admin pages etc.

Let me know about your experiences in the comments!

Related Posts:

PhotoShelter Review
PhotoShelter Featured Photographer
Flatiron Peak, NYC Photo

I’ve entered into the Photoblog Awards 2009, in the hope of becoming a ‘nominee’. Not sure how many votes exactly this needs (20? maybe?), but if you have a moment, and you enjoy reading the blog here, please head over to the Photoblog Awards link, and click on the little ‘vote’ text, underneath the current number of votes displayed…

Yeah, I know, you have to create an account, but it takes about 20 seconds, and it only asks for minimal info – you pretty much need to make up a username, and use your real email address.

Looking at the current list of ‘candidates’, it just goes to show how many photo blogs there are out there nowadays, and how many people are not only taking photos, but blogging too.

There’s a number of familiar photo blogs on there, like ‘Chromasia’ and ‘Captured’ (from the Denver Post) but there’s also a number that I’ve started following from seeing them on the Awards site. So it seems like a good idea for everyone.

Anyway, if you do have a moment, please feel free to vote for orange. blob. blog. by clicking on the image above!

thanks!

I’m going to split this into two parts… the first part for those who couldn’t give two hoots about SEO, and the second part for those who could…

I’ve redesigned my orangeblob Travel Photography Website, and enabled the new version now! There’s an updated Travel Gallery as well as an easier navigation system on every page of the site.

So that’s pretty much it for part one. Please take a look at the new site design and new photographs, and let me know what you think!

On to part two…

There’s a couple of reasons that the redesign came about. Back about 4 months ago-ish, I started the overhaul of the site, and only got halfway through. That half was spent doing all of the SEO and ‘background’ changes which seemed to take ages, and had absolutely zero impact on the visible design of the site.

I’d been reading up on SEO (Search Engine Optimization) at the time, and decided that I needed to make a load of changes to the website in order to take advantage of what people were telling me for free, and what hopefully would start to have an impact on search-engine-sourced hits on my website.

There’s a bunch of sites that I used, but the main one that got me started was this ‘Yoast.com’ article about SEO for WordPress. Sure, there’s some stuff in there which is specifically for the WordPress blogging tool, like the plugin recommendations, but a whole load of it really applies to any blog or website that you create.

Someone also then recommended Google Analytics as a tool to start analysing all the data, and collecting the site-hits data. I follow the Google Analytics blog, and they actually recently did a post about installing the tracking code and getting started. Well worth a read if you’re thinking of setting it up.

So after a bunch of reading, and signing up to Google Analytics, I made a load of ‘back-end’ changes…

Back-end Changes:

1. Install the Google Analytics code – see above for a link on how to do it. It’ll drive you mad unless you think ‘templates’. Otherwise you’ll be trying to add this to every single page you ever create.

2. Re-jigged all my headings and subheadings – These were a bit of a pain because of the way that the theme that I’m using with WordPress was set up. That, and my (at the time) not-so-great knowledge of css! Anyway, got them re-hashed so that H1 is meaningful on all pages – for the front page it’s the title of the blog, for blog posts it’s the heading of the blog post etc. And most importantly there’s only one H1 on a specific page!

3. Links – I’m now more careful about how I use my links – I used to always fall into the ‘click here’ trap, but now realise that it’s a whole lot more meaningful (both to users and to search engines) to put what you’re linking to, in the link. See the above link to the SEO for WordPress article to see my new-found knowledge in action!

4. Limited links – I also re-jigged links that were appearing on the site. I was overloaded with links taking you to the same pages over and over again – like the posts-by-date listing, the categories pages, the ‘tags’ pages etc etc. All of these different routes eventually take you to a blog post which is linked to by a bunch of other routes. I eventually made the decision to keep only the categories links and the by-date links.

5. Plugins – I installed and then configured the Robots Meta Plugin for WordPress (lets you stop engines from indexing stuff twice – e.g. once through the date links, and once through the category links – which can affect your rating as a site), and also the Headspace plugin for WordPress which lets you add more useful information for the ‘title’ and ‘description’ tags for your posts.

Since doing the initial changes, I noticed a few more useful articles on SEO in general which are also worth a look. Like the 12 Easy Mistakes that Plague Newcomers to the SEO Field, or a pretty good article and Webinar from PhotoShelter, on ‘Why SEO Matters to Photographers’, which also touches on using keyword identification in the video.

So after all that, I began to feel more comfortable about the tags, the headers, the links, etc which my site was built on. Now time to focus on the front end. Again, taking some of the hints from the Yoast article, and also taking into account a timely article from Photoshelter – Photoshelter’s Photo Buyer Website Survey 2009 – I decided to rebuild the front-end.

Incidentally – you know the best thing about those survey results? (they’re well worth a read by the way). It’s the fact that I no longer feel bad about all those times when I have been to someone’s website, and mouthed obscenities when it’s resized my window or opened another full screen window. I can’t help but politely reason with the window that if I had wanted you resized, then I’d have resized you myself.

Anyway. Onto the ‘front-end’ stuff…

Front-end Changes:

The Web Site:

1. Background colour – urm, no more reason than ‘I fancied a change…’, and my old website was based on a black background. So I decided to go with a clean white background for my website and archive, which also then fell in line with the white background that I was already using on my blog.

2. Created a template and re-used it throughout every page on the site, which includes the background faded-line thing at the top of the page, the navigation bar (on every page throughout the site), and the copyright information. Also kept everything ‘branded’ with the same orange/grey colour schemes.

3. Email address. This one was tricky. I’ve always hated the spam-aspect of emails displayed on web sites from the fact that there are crawlers roaming through internet pages looking to harvest email addresses. However, after seeing the PhotoShelter survey results (see above) regarding the fact that ‘email address always visible’ falls into the ‘do this’ section of website design, I decided to display it as an image. It can still get farmed etc… but it’s a no-win, no-win situation…

4. Keep the 4 links to the different sections of the site (blog, about, contact, portfolios) and also add one to the orangeblob Archive section, so that people don’t have to go into the portfolios menu, and then into the Archive option.

5. Added a search box to the front page so that visitors can easily search the archive for images by keyword.

The Blog:

1. Finally got rid of the useless ‘Portfolios‘ page, which was a page displaying a link, which you then had to click on to get to the actual Portfolios page. Yuck.

2. Added a few much-needed major links on the right hand side of the sidebar. Like the ‘Subscribe‘ link, the ‘Buy Images‘ link and the ‘Portfolios‘ link. If visitors come in directly to the blog area, I’d want them to be able to have access to all of these links at-a-glance.

3. Updated the Blog Post template so that at the end of every post is a link saying ‘Why not subscribe (linked) to the feed to get notified of other articles as they are posted…’. Again, in case someone comes in directly to a post, the reminder at the end of the post might nudge them in the subscription department.

4. As the Yoast article suggests, I changed the comments link from saying ’0 comments’ to a more friendly ‘Please leave a comment’ when there are 0 comments. When there’s 1 or more, then it displays the number of comments.

And that’s about it!

Please feel free to let me know what your thoughts are, or if you have any of your own SEO tips that you want to share!

I know it’s only been a couple of months since I last updated the ‘Gallery’ section of my website, but I had a niggling feeling that 3 galleries was too much, and I wasn’t really comfortable with the whole ’1 2 3′ labeling system. And with the SlideShowPro plugin for LightRoom, it’s pretty easy to update the galleries…

So… I’ve now re-done the landing page for the galleries slightly – with a link to a ‘Travel‘ gallery, and one to a ‘Personal‘ gallery. I’ve purposefully kept both galleries under 16 images too, so that the preview icons all fit on one page within the window.

Other new things with the galleries – I removed the title and the logo links from the flash part of the gallery, and instead added these manually after the creation of the gallery directory. The whole thing (excluding choosing and ordering the pictures) took not more than about 30 mins.

Once the export of the two galleries was complete, I then quickly edited the index.html file within the gallery directories, and manually updated these items:

1. Added google analytics information to the code
2. Updated the page title, description and keywords meta tags
3. Added a page ‘header’ which included the copyright tag and a link back to my galleries landing page so people visiting the gallery can navigate back to my main page easily

Overall the process is pretty easy – I did a post on SlideShowPro a while ago that basically came to the conclusion that I love this tool, and for $25 it’s incredible value. I’m still there!

So if you haven’t already, feel free to check out the gallery landing page with links to the two new galleries HERE.

Finally got round to sifting through the maze of options provided with one of the latest versions of SlideShowPro the other day. I’ve had the software for a while now, but have so far only used it as a quick ‘slam images together, upload’ method. I’ve now finally gone through all the settings that I like/dislike/changed, and saved them as a template in Lightroom. Upshot is that I’ve now updated all my galleries at: http://www.orangeblob.com/portfolios.html….

Views on the plugin? I like it. I bump into a few photography sites on the net which use the SlideShowPro solution, and that always makes me a little worried – am I just doing the same thing as everyone else? But I’m not exactly a flash developer born and bred, and this really does exactly what I want it to. It lets me showcase images in galleries that I can create in LR, exactly as I do for any other collection of images, and then publish them. All pretty easily.

Things I like:
- Just about everything is customisable
- You can preview everything in a browser before you even export the gallery
- Integration with Lightroom is great – you have to remind yourself now and again that it’s not actually Adobe software
- It looks professional, on a not-huge-amounts-of-work level

Things I don’t like*:
- I’d like to be able to hyperlink the titles or descriptions in the headers of the galleries
- I’d like to be able to customise the HTML behind the page. e.g. I’d like to be able to edit the ‘index.html’ template so that my google analytics code always gets put up automatically, or to be able to edit the html ‘title’ and ‘description’ of the page.
- Urm, that’s about it… no other complaints!

Anyway, I’ve updated my online galleries – with some new images (new, depending on when you last looked at it) and with some improved formatting. I have a background=black website… it’s been on my to-do list for ages to get rid of the dark grey background to the slideshow. Make it black already.

Check out the new galleries here: http://www.orangeblob.com/portfolios.html

There’s an about page with stuff about me (really?), and also links to a contact page. Next up is the portfolios section which links back to my main site, with some updated galleries.

Hope you enjoy it, and thanks for visiting!