Photo Blog

You have pictures on PhotoShelter and you have a WordPress blog. You want to insert an image in your blog that links back to the image on your PhotoShelter site where buyers (and Google) can find it. Great idea. How do you do it?

There are two basic ways to embed an image into your blog so that it links to its PhotoShelter page:

1. Insert the image as a normal picture, and link it to the image’s display page (which I wrote about in a previous post)
2. Embed the image as a Flash movie (which I discuss here).

Using Flash is actually easier (fewer steps), and there’s the bonus of have the little “Buy” button in the lower right, to help prompt visitors in case they’re not sure what to do. Note that embedding a Flash image also allows visitors to get the embed code and use your image on a different site; if you don’t want visitors to be able to do that, don’t use the Flash embed technique.

Whichever method you use, hopefully this quick tutorial will get you up and running. (Note that this is geared specifically for WordPress, so other blog software may be different in the details.) I’ll run through the process step-by-step, inserting an image using both methods so you can see how I do it.

So say I want to embed an image of the Smith River, from the Smith River National Recreation area in Northern California (near Crescent City):

You need a Flash plug-in

First thing first: To make things easy, you’re going to want to get a Flash plug-in for WordPress. I use Kimili Flash Embed and that’s what I’ll base the tutorial on.

Get the image

1. I want the image to come directly from PhotoShelter, so I need to get the “embed” code from PhotoShelter for the picture I want.
2. I log in to my PhotoShelter account and find the picture I want to insert, navigating to the view showing the image details (IPTC, EXIF, etc.).
3. To get the embed code, I click the far right icon above the image labeled “Get Link.” This opens a dialog box with some links to the image in a couple different formats. I click on “Embed” to select the code and hit Ctrl-C (Mac: Cmd-C) to copy it. You can paste this code in Word, Note Pad, or your favorite text editing program – this is just a place to hold the code while you set your options.
   

   The Get Link window in PhotoShelter

Fill in the Flash info

1. In WordPress, I go to the spot in my post where I want to insert the image, hit “Enter” to create a new paragraph, and click the little red Flash button, which brings up a window with a bunch of fields to fill in.
   

   The Kimili Flash Embed window in WordPress

2. Now I don’t want all the embed code provided by PhotoShelter, only certain parts (marked in green below), which I’ll paste into the appropriate fields.

   <object width="500" height="352"><param value="http://pa.photoshelter.com/swf/imgWidget.swf"></param><param name="allowFullScreen" value="true"></param><param name="FlashVars" value="i=I0000dqBPdlLPMew&b=1"></param><param name="allowScriptAccess" value="always"></param><embed src="http://pa.photoshelter.com/swf/imgWidget.swf" type="application/x-shockwave-flash" allowScriptAccess="true" FlashVars="i=I0000dqBPdlLPMew&b=1" allowfullscreen="true" width="500" height="352"></embed></object>

3. I start by choosing “static publishing” for the “Publish method.” (This method is a little more universal since it doesn’t rely on JavaScript.)
4. I then select the movie parameter from the embed code I copied and paste it in the “Flash (.swf)” field.
5. I next set the dimensions I want. You can either use the default dimensions in the embed code, or choose your own. If you change the dimensions, make sure to use the same aspect ratio as the default dimensions, otherwise your image won’t display correctly.
6. I need to enter a few more variables, so I click “more” in the “SWF Definition” section of the Kimili Embed window to reveal more options.
7. The default CSS class is “flashmovie.” I use a custom CSS class for these kinds of objects to make sure their centered, so I enter it in the “class” field; but this is purely optional.
8. Finally, I set the optional variables to the same values as in my embed code:
   1. allowscriptaccess = always
   2. allowfullscreen = true
   3. Select the “FlashVars” code and paste it in the “fvars” field at the bottom of the Kimili window. This is important – it’s the reference to  your specific image.
   

   The fields to fill in for Kimili Flash Embed

9. When you have everything entered, click the “Generate” button at the bottom. This will generate the correct code, and insert it in the post.
10. That’s it!

Now that wasn’t so bad, was it?

Tags: insert image, PhotoShelter, Tutorial, Website Design, WordPress

This entry was posted on Monday, September 28th, 2009 at 8:28 pm and is filed under PhotoShelter, Tutorial, Website Design, WordPress. You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.