Linked Up Design

I have been working with a client that was looking to be able to display a group of pictures on their site. We originally where looking at a slide show type display which usually are a great display for a site but I really wanted to do something a bit different being that his type of site is pretty cookie cutter with regards what they are selling and only having so many possible designs.

I started to play around with Highslide which for some of you is a bit old school by now but do remember that I set this blog up as an educational blog, not promoting new products. You can go to http://www.linkedupdesign.net/test/ and see one there many types of Highslides there are.

You should also go to their site http://highslide.com/ and find one that works for you. I strongly suggest following their instructions and donating, this is open source and the designer made this as easy as buttering toast so support the cause.

Below you are going to find a very simple way to display multiple pictures using PHP and a MYSQL Database.

Please pay attention to the fact that I set this up to go along with another table that has form information that is being uploaded so the picture table is a completely different table. I have also set this up so the client can upload this through a CMS system so I have added a delete function to this which is embedded in to the picture display.

Because this is also being set up into an active edit page, there is no connection to the database so you will have to set that up for this to work. Here it is:

First this is to set up a new table with 2 columns “product_id_fk” varchar 32 and the second “image_path” varchar 64.

<?php
$id = $_GET['id'];

if(!empty($_GET['path']) && !empty($_GET['del'])) {
$path = $_GET['path'];
$query = “DELETE FROM image_relations WHERE image_path = ‘$path’”;
mysql_query($query) or die(mysql_error());
}

if(isset($_FILES['image_upload'])) {
$target_path = “uploads/”; //This is the name of the file on the server where the pictures are being uploaded to so you will need to set up this folder on your server with the correct path.
$rand = rand(10000,30000); //This puts a random number along with the $basename so you can add pictures with the same name without any display problems.
$basename = basename($_FILES['image_upload']['name']);
$file = $rand.”-”.$basename;
$target_path = $target_path . $file;
if (move_uploaded_file($_FILES['image_upload']['tmp_name'], $target_path)) {
$query = “INSERT INTO image_relations (product_id_fk,image_path) VALUES (‘$id’,'$file’)”;
mysql_query($query) or die(mysql_error());
echo “The file ” . $basename . ” has been uploaded”;
} else {
echo “<strong>There was an error uploading the file. Please try again.</strong><br />”;
echo $_FILES['image_upload']['name'];
}
}
?>

<br /><br />
<table width=”550″ align=”center”>
<tr>
<td width=”550″ align=”left” valign=”top”><hr />
<h4>Add image:</h4><br />
<form enctype=”multipart/form-data” method=”POST”>
image:
<input name=”image_upload” type=”file” />

<br />

<input type=”submit” value=”Upload”/>

</form>
<h4>Additional images:</h4>
Click Image to delete.

<?php
$a = 0;
echo “<table width=’450px’><tr>”;
$xyquery_2 = “SELECT image_path FROM image_relations WHERE product_id_fk = ‘$id’”; //This might have to be changed based on the second table you set up for the pictures
$xyresult_2 = mysql_query($xyquery_2) or die(mysql_error());
while ($path = mysql_fetch_array($xyresult_2)){
if($a > 3) //3 is a random number based on the size of the pictures I have set up and the size of the table that I set for the clients site.
{
$a = 0;
echo “</tr><tr>”;
}
//Display each record.
echo “<td bgcolor=’#ffffff’ colspan=’1′><a href=’(this is the page you are pulling the id from).php?id=$id&path=”.$path[0].”&del=1′><img src=’uploads/”.$path[0].”‘ width=’100px’ height=’100px’ ><br /></a></td>”;

$a++;
}
echo ‘</tr></table>’;
mysql_close();
?>

<br style=”clear:both;” />

</td></tr></table>
Save the page and use a <?php include_once(“additional_image”); ?> in the area that you want this to display on the CMS and to display this on a page you will need to have a connection to the database and call the database you are working with and then use the dispaly each record section. There is one change you will need to make so the delete function is removed which is below:

//Display each record.
echo “<td bgcolor=’#ffffff’ colspan=’1′><img src=’uploads/”.$path[0].”‘ width=’100px’ height=’100px’ ><br /></td>”;

$a++;
}
echo ‘</tr></table>’;
mysql_close();
?>

<br style=”clear:both;” />

</td></tr></table>

I basically took out the function to delete the picture. If you are having any trouble with this just let me know.