With the addition of certain very help PHP functions that were released in version 5.0, the integration of XML and PHP is now simpler then ever.
Why XML over a database driven solution? I could discuss all the reasons for and against but at the end of the day in a case like a photo gallery it really comes down to personal preference. For me its all about ease of use and not adding complexity to something that at its core should be very easy and straight forward. XML offers accessibility, readability, flexibility and you don’t need to start playing with database tables and fields to achieve results fast.
While I endeavor to write this for the common person the below article does assume a basic understanding of XML and PHP. If you want to understand more about either topic a good starting place is the w3Schools website which offers great free introductory tutorials on standard web technology.
Download Tutorial Files
The Basics
I’ll be basing my photo gallery off a simple XML document, which I’ll detail here. Please feel free to download a copy of the source files to follow along with me. Now I don’t pretend to be an expert at writing XML, so feel free to suggest any changes in the comments section.
<?xml version=”1.0″ encoding=”ISO-8859-1″? >
<gallery title=”Random” description=”Random photos I like”>
<albumName>Random Photos</albumName>
<image>
<title>Alamo Square, SF</title>
<tnPath>thumbs/tn_alamoSquare.jpg</tnPath>
<lgPath>photos/alamoSquare.jpg</lgPath>
<tnWidth>45</tnWidth>
<tnHeight>45</tnHeight>
<width>500</width>
<height>375</height>
</image>
<image>
<title>Alcatraz, SF</title>
<tnPath>thumbs/tn_alcatraz.jpg</tnPath>
<lgPath>photos/alcatraz.jpg</lgPath>
<tnWidth>45</tnWidth>
<tnHeight>45</tnHeight>
<width>500</width>
<height>375</height>
</image>
…
…
</gallery>
This basically allows me to describe an image by giving it a title, url paths to the location of the photo and its thumbnail, and the width and height of each. I’ve decided to use relative paths for the images here although in the tutorial files I’ve used absolute paths to the image URL to add flexibility in using the code anywhere in your site.
Now, using the simpleXML function in PHP we can write some code to connect to the above XML document.
<?php
// set the XML file name as a PHP string, make
// sure the path to the xml file is correct.
$myPhotoList = “photos.xml” ;
// load the XML file
$xml = @simplexml_load_file($myPhotoList) or die (”no file loaded”) ;
?>
That’s all that’s needed to connect to our XML file. Now we can assign PHP variables with specific elements from the XML document by use the variable $xml->element as follows:
<?php
// set the XML file name as a PHP string, make
// sure the path to the xml file is correct.
$myPhotoList = “photos.xml” ;
// load the XML file
$xml = @simplexml_load_file($myPhotoList) or die (”no file loaded”) ;
// assign the albumName element to a string
$nameOfAlbum = $xml->albumName ;
echo $nameOfAlbum;
?>
The above will print “Random Photos” which is the value of the XML element albumName.
Display All Photos
Now that we have connected to the XML document we can start iterating through its data to display all the photos listed in the document.
We do this using a foreach loop. I have never been a big fan of using foreach loops but they really aren’t too bad.
<?php
…
// load the XML file
$xml = @simplexml_load_file($myPhotoList) or die (”no file loaded”) ;
// assign the albumName element to a string
$nameOfAlbum = $xml->albumName ;
//iterate through all images in the XML
foreach ($xml->image as $image) {
…
}
?>
All the foreach loop says is “loop through every <image> element in the xml document assigning its data to the variable “$image”. We now have access to all the information in the <image> node. Lets use this information to generate the code for an HTML img tag.
<?php
…
foreach ($xml->image as $image) {
print “<img src=\”$image->tnPath \” alt=\”$image->title\” width=\”$image->tnWidth\” height=\”$image->tnHeight\”>”;
}
?>
I know it looks complicated but its really not, we’re simply using the print statement to output html code that will look something like this:
<img src=”thumbs/tn_alamoSquare.jpg” alt=”Alamo Square, SF” width=”45” height=”45”>
For those of you scratching your head over \” , it lets us use the quotation marks inside of the string without terminating the string itself.
After the foreach loop has been executed we should have a list of img tags that will display the number of images described in the XML document. In the example used above the code generates the following results:
Now that you have all of your images listed you can use CSS to style them any way you wish. I have used this code to produce a group of 6 thumbnails to the right in the sidebar. I have gone one step further and made them be displayed in Cody Lindley’s Thickbox.
Stay tuned for Part two of this tutorial where I will extend the php to randomly pick 6 images from the XML document so that every refresh of the page displays a different set of images from your gallery.
