Popular Posts
Find Your Images Online Using Reverse Image Search on Google
Video Demo: Retouching Portrait Photography Using a Photoshop Quick Action
5 Ways Photographers Can Give Back
14 Respected Photographers' Plans to Jumpstart Their Photography Business in 2013
Are Photography Contests Worthwhile or Worthless?
Six Standout Night Photography Tips to Help You Master the Craft
The 40+ Items Every Photography Assistant Needs Now
Rant: I Love Photography
13 Digital Point-and-Shoot Cameras Used by the Pros
Pro Wedding Photo Ideas: 25 Creative Shots
Home » Digital Photography Workflow » How to Embed Large Photo Slideshows in WordPress using Fancybox
How to Embed Large Photo Slideshows in WordPress using Fancybox
Posted by:
Date: April 14, 2010
|
13 Comments
Music photographer and PhotoShelter’s new marketing associate, Chris Owyoung teaches us a great way to embed large-format slideshows into our WordPress blogs. Don’t worry, there’s (almost) no coding necessary!
By Chris Owyoung
The recent release of PhotoShelter’s new embeddable slideshows, featuring 20+ customizable options, prompted me to look for a bigger and better way to integrate them into my WordPress blog. The solution (seen in the video below) is elegant and relatively easy to replicate.
If you have a compatible WordPress blog keep reading and find out how it’s done.
Can’t I add photos and slideshows to my blog already?
Yes, WordPress has the ability to embed things like photos, slideshows and videos by default. However the size of the photos or slideshows will always be limited by the size of the content area of your WordPress template. If you’re like me and your clients prefer larger photos than your template allows, you have a problem!
What is this WordPress thing?
Like many photographers who are marketing themselves to google and the thousands of potential clients it provides, I turned to the WordPress blogging platform to help strengthen my SEO and to give clients a way to get to know me (and my work) before they call or email.
After following the advice in PhotoShelter’s SEO Cookbook for Photographers for a couple of months, my website went from page six on google to page one for nearly all of my targeted keywords and phrases. With my SEO strategy nailed down, I focused on ways to make my blog entries more engaging to visitors. I discovered that when people talk about ways to add functionality to WordPress, they’re speaking about either themes or plugins.
Themes vs. Plugins
There are many great themes for blogs, including some beautiful WordPress templates built for photographers by Graph Paper Press. However, if you’re like me, you’ve discovered that it’s very hard to customize or add functionality to an existing theme with some serious coding know-how. This is where plugins come in.
What are Plugins?
In an alternate reality where clients grow on trees and pay double the going rate, plugins are a ground breaking new treatment from the Hair Club for Men. In this universe, plugins are tiny pieces of software that add functionality to larger programs. Fortunately, there are thousands of plugins written for WordPress and many of them are built specifically to display photos and videos.
My Method
Combine big, beautiful PhotoShelter slideshows with the FancyBox plugin for WordPress and wow your visitors. The process has 15 steps (gasp!) but don’t worry, most of them only need to be done once.
Step One
Log into your WordPress blog and click on “Add New” under the Plugins area of the Appearance Tab on the left side of the screen.
Step Two
Type “fancybox” in the search form at the top of the page and click the Search Plugins button.
Step Three
In the list or search results, find the “FancyBox for WordPress” plugin written by Jose Pardilla and click the Install link on the right side of the screen.
Step Four
After the plugin has successfully installed, return to the Appearance Tab on the left side of the screen and click on Installed.
Step Five
In the list of installed plugins find “FancyBox for WordPress” and click on Settings.
Step Six
Click on the Galleries tab and change the behavior to “Use a custom expression to apply FancyBox.”
Step Seven
Click on the Other tab and change the Frame Size to the width and height (in pixels) of your PhotoShelter slideshow.
Step Eight
Take a break, send your mother an off-color electronic greeting card and breath easy, you’ll never have to touch any of that stuff ever again.
Step Nine
Create a new post.
Step Ten
Switch to HTML mode in the WordPress post editor. I know you’re afraid, but I have confidence in you. In the blank area, write the code exactly as you see in the example below.
Step Eleven
Log into PhotoShelter, and grab the link to the image that will trigger the FancyBox slideshow.
Step Twelve
Paste it into your WordPress post. Example below:
Step Thirteen
Go to a gallery in your PhotoShelter account, click on “Embed This Gallery” on the left side of the screen and get the embed code for the PhotoShelter slideshow you want to feature inside the FancyBox. (The embed codes for single PhotoShelter photos and vimeo or youtube videos work too).
Step Fourteen
Paste it into your WordPress post. Your finished code should look something like this.
Step Fifteen
Click Save Draft and then Preview to see your slideshow in all it’s big beautiful glory. Congratulations, you’re done!
13 Comments
4-15-2010
I am clearly doing something wrong but…..The end result for me is a static display of the first chosen image that you embed. Then when I click on it it goes to the slideshow which is overlaid on the static image but displaced somewhat with an asymmetric white border round the slideshow box and the static image displayed but underneath the slideshow. Looks appalling. This can’t be right can it? I think that I faithfully typed in the code honouring all spacings etc but it looks terrible. Any clues? I would post it for peeps to see but I’m reluctant to have it live to be honest even for trouble shooting. Needless to say I know less than nothing about coding etc. It was all going so well:-) Regards. Patrick.
4-15-2010
Ok. Now that I have checked Chris’s site (doh!) I see that it is mostly correct what I have done. Er…can’t say I like it though. Sorry about that. Many thanks to Chris for the work done to show us how its done however. Regards. Patrick.
4-15-2010
Thanks for sharing this advice. I played around with it and noticed that you need to add a 15th step :) In order to get the slideshow displayed correctly, you need to define the size of your slideshow in the Fancybox settings under the “Other” tab. My slideshow size is 950×712 and so changed the default settings to that size. I hope that helps.
4-15-2010
Hi, Many thanks for this. But anyone knows a method for a free account of WordPress? or for wordpress.com not org. Again thanks in advance
4-15-2010
@Patrick Baldwin, Hello fellow low light performance photographer! Thanks for the comment. My guess would be that you included the static image in the code that calls up the slideshow, which is why both the static image and the slideshow are being pulled into the FancyBox. However, this matters quite little if you don’t like the way FancyBox looks to begin with. =) If you want to give it another go, send me message through my website.
4-15-2010
@Jurgen You have a really GREAT website. You’re providing your clients with lots of good, well organized information. It’s a very good presentation of your style of shooting and the services you offer. I’ve added in the step as you’ve pointed out. Thank you! Keep in touch! Chris
4-15-2010
Hi Herman, Visit http://wordpress.org/ to get a free install.
4-15-2010
Chris, Thanks for the insight. I’d love to do this, but here’s the (possibly stupid) question. I’ve been using a WordPress.com site for over a year, as opposed to the Wordress.org site. I’d like to switch over to utilize the customization features, slideshows etc since .com doesn’t allow plug-ins. Is there any way to switch from a theme on the WP.com platform to WP.org without losing all of the content etc? Thank you, Todd Bigelow
4-16-2010
Hi Chris Great tutorial. But how did you make the license link in the bottom of your slideshow? Johnny
4-16-2010
@Johnny, That’s a good question. The license link on the bottom of my FancyBox windows is something I added after the article was written. It’s just an image I made in Photoshop that links to the corresponding gallery in my PhotoShelter archive. I’ll add the instructions later today.
4-28-2010
Hi, Excellent instructions – but is there a way to set the size of the trigger image from the gallery when it appears on the blog? Also, can it link to a slideshow of a private gallery or does the gallery have to be public?
4-14-2013
Any chance you can update this for 2013?
6-13-2013
Very good post! We will be linking to this great article on our site. Keep up the good writing.
Comment