Photo Blog

http://pa.photoshelter.com/ image/I0000GSFFDBc71tc

http://pa.photoshelter.com/c/mbphotography/image/I0000GSFFDBc71tc

PhotoShelter Tutorial: Embeding an Image in WordPress

You have pictures on PhotoShelter, and a WordPress blog to keep your fans and clients up-to-date. 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 PhotoShelter display page.

(2)  Embed the image (or gallery of images, for that matter) as a Flash movie

Probably the easiest way to embed a PhotoShelter image into your blog is to simply insert it like you might any other photo, with a couple important tweaks. In this post I’ll walk step-by-step through the process of adding a simple non-Flash image so you can see how I do it. For brevity, I’ll go through the Flash method in another post.

So say I want to insert an image of my cute puppy Jasper:

[JASPER IMAGE]

Get the image

1. First, in WordPress, I go to the spot in my post where I want to insert the image, and click the Add an Image icon (the first one to the right of “Upload/Insert”), which opens the Add an Image window.
2. I want the image to come directly from PhotoShelter, rather than creating a new copy and uploading it to WordPress, so I click the “From URL” tab. Now I need to get the URL from PhotoShelter that links to my puppy picture.

[IMAGE OF “ADD AN IMAGE” WINDOW]

1. 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.).
2. To get the link, I click the far right icon above the image labeled – wait for it – “Get Link.” This opens a dialog box with some links to the image in a couple different formats. Click on the “Image Link” to select the URL and hit Ctrl-C (Mac: Cmd-C) to copy it.

[IMAGE OF “GET LINK” WINDOW]

1. I then head back to WordPress, and paste the URL (Ctrl/Cmd-V) into the field labeled “Image URL.” (Having both sites open in different tabs or browser windows is really useful for all this back-and-forth, by-the-way.) Now I don’t want all the code provided by PhotoShelter, only the specific URL. So I remove all non-URL code, keeping only the part between the single quotes beginning with “http://…”:

[CODE SNIPPET: <img src='http://c.photoshelter.com/img-get/I0000GSFFDBc71tc/s' />]

[IMAGE OF “ADD AN IMAGE” WINDOW WITH INFO FILLED IN]

1. I enter a title for the picture in the “Image Title” field, and a caption in the “Image Caption” field (which also functions as the alt text). (Depending on how your blog is configured, your picture may or may not display a caption. Better to display a caption, though – especially for the all-important Search Engine Optimization (SEO).)
2. This next step is key, so I hope you’re still awake: When someone clicks the image in the blog, I want them to be taken to the PhotoShelter page that displays the image and lets buyers download a comp, buy it, etc.
3. So I head back to PhotoShelter, and this time in the “Get Link” window I copy the “Page Link” code. This is the URL that points back to the display page for this image. Now back to WordPress, where I paste the URL in the “Link Image To:” field.

Get the image display page URL

[IMAGE SHOWING PS AND WP WINDOWS AND URLS]

1. BUT WAIT: if I use the link as-is, it will point to the generic PhotoShelter page, with all their branding (not mine). To link to my customized page, I need to modify the URL.
   1. If you visit the customized image display page and look at the URL, you’ll notice it’s almost the same as the one you pasted into WordPress with one exception: the part that points to your customized page.

[IMAGE SHOWING URL IN ADDRESS BAR]

1. So you need to manually add this snippet to the URL in your post. It’s always the same, so you add the same thing to all Image Display URLs. In my case, I add “c/mbphotography/”
   1. i.      http://pa.photoshelter.com/ image/I0000GSFFDBc71tc
   2. ii.      http://pa.photoshelter.com/c/mbphotography/image/I0000GSFFDBc71tc
   3. And now I finally hit the “Insert Into Post button.” Ta-da! You may or may not be finished at this point, but I like to do a little more customization. The image that’s inserted into the post may be too large for you (it is for me), so I next adjust the size.
   4. I click on the image, and then click the little image icon in the upper left to Edit Image. This brings up a window where you can either just use the little slider thingy to adjust the image size by percentage, or, if you’re a little bit of a control freak like I am, you can click the Advanced Settings tab and enter precise dimensions.
   5. That’s it!

Insert the image and adjust size

PhotoShelter Tutorial: Embeding an Image in WordPress

You have pictures on PhotoShelter, and a WordPress blog to keep your fans and clients up-to-date. 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 PhotoShelter display page.

(2) Embed the image (or gallery of images, for that matter) as a Flash movie

Probably the easiest way to embed a PhotoShelter image into your blog is to simply insert it like you might any other photo, with a couple important tweaks. In this post I’ll walk step-by-step through the process of adding a simple non-Flash image so you can see how I do it. For brevity, I’ll go through the Flash method in another post.

So say I want to insert an image of my cute puppy Jasper:

[JASPER IMAGE]

Get the image

1. First, in WordPress, I go to the spot in my post where I want to insert the image, and click the Add an Image icon (the first one to the right of “Upload/Insert”), which opens the Add an Image window.

2. I want the image to come directly from PhotoShelter, rather than creating a new copy and uploading it to WordPress, so I click the “From URL” tab. Now I need to get the URL from PhotoShelter that links to my puppy picture.

[IMAGE OF “ADD AN IMAGE” WINDOW]

3. 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.).

4. To get the link, I click the far right icon above the image labeled – wait for it – “Get Link.” This opens a dialog box with some links to the image in a couple different formats. Click on the “Image Link” to select the URL and hit Ctrl-C (Mac: Cmd-C) to copy it.

[IMAGE OF “GET LINK” WINDOW]

5. I then head back to WordPress, and paste the URL (Ctrl/Cmd-V) into the field labeled “Image URL.” (Having both sites open in different tabs or browser windows is really useful for all this back-and-forth, by-the-way.) Now I don’t want all the code provided by PhotoShelter, only the specific URL. So I remove all non-URL code, keeping only the part between the single quotes beginning with “http://…”:

[CODE SNIPPET: <img src='http://c.photoshelter.com/img-get/I0000GSFFDBc71tc/s' />]

[IMAGE OF “ADD AN IMAGE” WINDOW WITH INFO FILLED IN]

6. I enter a title for the picture in the “Image Title” field, and a caption in the “Image Caption” field (which also functions as the alt text). (Depending on how your blog is configured, your picture may or may not display a caption. Better to display a caption, though – especially for the all-important Search Engine Optimization (SEO).)

Get the image display page URL

7. This next step is key, so I hope you’re still awake: When someone clicks the image in the blog, I want them to be taken to the PhotoShelter page that displays the image and lets buyers download a comp, buy it, etc.

8. So I head back to PhotoShelter, and this time in the “Get Link” window I copy the “Page Link” code. This is the URL that points back to the display page for this image. Now back to WordPress, where I paste the URL in the “Link Image To:” field.

[IMAGE SHOWING PS AND WP WINDOWS AND URLS]

9. BUT WAIT: if I use the link as-is, it will point to the generic PhotoShelter page, with all their branding (not mine). To link to my customized page, I need to modify the URL.

a. If you visit the customized image display page and look at the URL, you’ll notice it’s almost the same as the one you pasted into WordPress with one exception: the part that points to your customized page.

[IMAGE SHOWING URL IN ADDRESS BAR]

b. So you need to manually add this snippet to the URL in your post. It’s always the same, so you add the same thing to all Image Display URLs. In my case, I add “c/mbphotography/”

i. http://pa.photoshelter.com/ image/I0000GSFFDBc71tc

ii. http://pa.photoshelter.com/c/mbphotography/image/I0000GSFFDBc71tc

Insert the image and adjust size

10. And now I finally hit the “Insert Into Post button.” Ta-da! You may or may not be finished at this point, but I like to do a little more customization. The image that’s inserted into the post may be too large for you (it is for me), so I next adjust the size.

11. I click on the image, and then click the little image icon in the upper left to Edit Image. This brings up a window where you can either just use the little slider thingy to adjust the image size by percentage, or, if you’re a little bit of a control freak like I am, you can click the Advanced Settings tab and enter precise dimensions.

12. That’s it!