» How to make your own personal ShutterPoint gallery
 
As you might have seen, I have a nice page on this site which displays all my photos placed on ShutterPoint.

If you want to have something similar, this tutorial is just for you. I've tried to be as clear as possible. Being someone who is very familiar with the Internet, I might have skipped essential information for people who are less experienced.

I do have to assume some basic knowledge of uploading files to your website account. If you do not know how to do this you miht want to visit the site of your webhosting service. It is very likely that they have information on this subject.

Requirements

Yes, unfortunately there are some requirements.

  • A website
  • PHP support, with support for opening remote links
  • About 100kb of free space on your website.
PHP is a "server side" scripting language. The code will be executed on the webserver, before it is sent to the person who visits your site. For your visitor the page will be 100% the same as a normal webpage! Unfortunately, not all (free) webhosting services give their users (or customers) the ability to use PHP. If you are not sure, we can test it with the following method:

- Create a new textfile on your computer with the name: test.php
- Put the following text in this file:

<?

$job = "photos!";
echo("I like making " . $job);
?>

- Upload this file to your website
- Open the webpage (for example: http://www.persistentrealities.com/shutterpoint/test.php
- The output should be: "I like making: photos!". If you do not see this, then you do not have PHP unfortunately.
- Note: I have included the 'test.php' file in the zip file below, which contains everything you need.

Getting the ShutterPoint data
We need to find a method to get the photos you have submitted to ShutterPoint. Fortunately ShutterPoint has a nice technology available called "RSS feed". This technique is commonly used to supply the latest news on various sites. Or to show the last number of posts on a forum, for example. RSS is using XML (Extended Markup Language). XML defines "data" like HTML does for markup. I won't go too deep about this, so please visit W3Schools for this.

The ShutterPoint RSS feed contains everything you wanted to know about your photos:

  • Title
  • Description
  • Link to the shutterpoint page
  • Submission date and time
  • Thumbnail url
  • Rating
  • View
  • Width
  • Height
  • Keywords
  • Price
The RSS feed that matches your account can be found here ("Syndication RSS Feed for Your Photos"). Click here to see an example RSS feed (my one).

Every photo has an <item> tag:

<item>
<title>Altitude: 10km</title>
<description>This is the view from one of the seats which are located more at the front, before the wings. Canada is below. The altitude of this picture is about 10km</description>
<link>http://www.shutterpoint.com/Photos-ViewPhoto.cfm?id=217628</link>
<dc:date>2005-07-30T10:37:00-05:00</dc:date>
<enclosure url="http://www.shutterpoint.com/photos/P/20050730_103751_airplane engine wing_thum.jpg" type="image/jpeg" />
<rating>7.88</rating>
<views>274</views>
<width>1392</width>
<height>2043</height>
<keywords>engine,plane wing,plane,airplane,mid-air,in air,sky,flight,fly,airborne,clouds,altitude</keywords>
<price>50.00</price>
</item>
This is for one of my photos ofcourse. If you use your personal RSS feed, the data would be about your photos, ofcourse!

Some programming...
Okay, now that we know where to find our data, we can use it. To use it in PHP, we have to use some kind of library or wrapper to use XML. I strongly suggest using this one: http://keithdevens.com/software/phpxml. I have tried quite a few, but they all choke on the thumbnail tag (<enclosure url>. And since I want to display thumbnails, I simply needed that. The source code for using XML is simply just one file: http://keithdevens.com/software/phpxml/xml.php.

Save this file somewhere on your harddisk, on a place so you can get it easily.

Now that we can have an XML wrapper, it's time to do some minor programming. Don't be afraid, I put the code ready to download . If you are familiar with PHP/HTML/CSS then you have a significant advantage though.

Step 1):

Make a new (text) file in the same directory as the xml.php file. Name it like "gallery.php" for example. Or "index.php". Also open this file in your favorite text editor. Notepad will work. Microsoft Word probably too. But I strongly recommendend a plain simple text editor.

Step 2):

Add the following code:

<?
include "xml.php";
?>
This code will tell PHP to include the XML class which we downloaded from Keith's site. Notice the <? and >? This tells the webserver (the program sending the webpages to the visitors) to start the PHP processing. These "tags" need to be opened and closed. Anything outside these tags is plain HTML.

Step 3):

The toughest part of this tutorial is the following section. I'm going to demonstrate a plain simple "crude but effective" method to show your images in a HTML table. No layout stuff yet! Only plain simple only what we really need.

This should follow the previous code:

<html>
<head>
<title>My photo gallery</title>
</head>

<body>
<?

//Syndication url:
$url = "http://www.shutterpoint.com/Synd-User.rss.cfm?user_id=PERSISTENT&limit=100";

$data = file_get_contents($url);
$xmldata = XML_unserialize($data);

//We want items only, not the other stuff:
$pointertoitems= $xmldata["rss"]["channel"]["item"];

//Loop through all:
$rowcounter = 0;

?>
<table>

<?
//Loop through all items
foreach ($pointertoitems as $item)

{ $thumb = $item["enclosure attr"]["url"];
$keywords = $item["keywords"];
$title = $item["title"];
$price = $item["price"];
$link = $item["link"];
$date = $item["dc:date"];
$desc = $item["description"];
$rating = $item["rating"];
$views = $item["views"];
$width = $item["width"];
$height = $item["height"];
if (($rowcounter % 3) == 0) echo("<tr>");
?>

<td>
<?=$title?> (Rating: <?=$rating?><br/>
<a href="<?=$link?>" title="<?=$keywords?>">Order</a><br/>

<a href="<?=$link?>" title="<?=$desc?>"><img src="<?=$thumb?>" alt="<?=$keywords?>" border="0"/></a><br/>
$<?=$price?><br/>
<a href="<?=$link?>" title="<?=$keywords?>">Enlarge</a><br/>
<a href="<?=$link?>" title="<?=$keywords?>">Order</a><br/>
</td>
<?
if ((($rowcounter+1) % 3) == 0) echo("</tr>");

//Increase row counter:
$rowcounter++;
} ?>

</table>
</body>
</html>

Notice: All links will have automatically the affiliate id appended to it as well. The affiliate id is stored in the RSS feed.

Step 4):

Save the file!

Step 5):

Now you have to upload your file to your webhosting space. If you do not know how to do this, please check your webhosting provider. It's very likely that they have information about this.

Result:

Now, open the website in your browser. The above code will return something like this:

Shutter point tutorial

Which is pretty neat already!

Now, you can apply simple HTML formatting to everything. Make prices bold when they are low priced, make ratings green when it's above a 7.00, you name it! The options are virtually endless. I have created a few templates in a zipepd file which you can use, and which demonstrate a few things. The plain one (as shown above) is also included. If you have suggestions, please give them!

Configuring your RSS feed

ShutterPoint explains it fairly well on their own page: you can configure the RSS feed to be generated in a certain format. For example, you can order the photos by rating, or submission date. It's also possible to tell the RSS feed how many photos you want to have returned in the list. Changing the feed URL will immediatly result in a different photo gallery. Your gallery will always be 100% up to date.

One problem...

There is one thing that personally 'frustrates' me a bit. Generating the stream every hit takes some time, and when you want to have all your photos returned, it might take a while. There are two methods to 'solve' this. A reasonable way, and a better way.

The reasonable way::

When someone requests the photo gallery page, a check is made how long the previous visit was of someone. If the delay has been more than a certain amount of time, refresh the RSS feed, and store it automatically to a file (on the webserver). Otherwise, load the XML lightning fast from the file and experience no delay.

Pros: Depending on your site, most users experience a fast gallery.
Cons: Every certain amount of time (hour?) one person will have to wait just a bit longer.

The better way:

A cronjob is used (if the webserver runs linux), to download the RSS feed automatically to a file on the webserver, every 15 minutes. No one will experience a delay.

Pros: Always fast. No one experiences a delay.
Cons: You will need to have access to the cronjobs. Which is unlikely on many website providers.

Source code and Templates:

Download this file for all the source code and templates to get started immediatly on your own ShutterPoint gallery.
Check out this page for a live demo ofthe templates.

Conclusion

This tutorial has hopefully learned you how to use the ShutterPoint RSS XML feed in PHP. I know this tutorial might be a bit overwhelming to some people, but hopefully most of it is understandable. Feel free to contact me using the ShutterPoint system! If you made a nice template and want to share it on this site, feel free to tell me about it.

If you really liked this tutorial, you can always sent me a small donation on my paypal account. The ShutterPoint expiration date is coming near, and I haven't been fortunate enough to sell a photo yet... .