Help on how to make photo gallery functions

spacepoet · October 10, 2011

Hi:

I found this photo gallery tutorial online:

http://www.sitepoint.com/php-gallery-system-minutes/

I uploaded it and it works really well, but I'm stumped on how to add the functions listed at the bottom of the tutorial.

I want to be able to add, edit, and delete Categories and Photos.

It has the code to do it, but it doesn't give and examples.

Can someone show me how to make them work?

I really do not understand where to add them, if I need to make new pages, etc.

Any insight would be great!

titan21 · October 10, 2011

These are just functions supplied by the library so you can call them in anyway you like. You could use a form based method or perhaps AJAX?

spacepoet · October 10, 2011

Hi. Thanks for the reply.

I know they are the functions, but i dont quite understand what page to add them too, how to call them, do i need to add more code or pages, etc.

Hoping for some direction.

Do you have any examples of what you mean?

Thanks!

titan21 · October 12, 2011

Can you post some of the code you've generated so far and we'll see if we can help?

spacepoet · October 19, 2011

Hello:

Certainly can do so. I'm really not much further along that what the tutorial lists.

But, I like the gallery they have because it is simple and not over-bloated.

But, they don't show how to create, edit, delete the categories or photos, which is a bit furstrating.

Really, all I want to do it be able to make a category, and assign photos/photo captions to each category.

And, edit or delete them as I need to.

So, this is the database tables:

CREATE TABLE gallery_category (
  category_id bigint(20) unsigned NOT NULL auto_increment,
  category_name varchar(50) NOT NULL default '0',
  PRIMARY KEY  (category_id),
  KEY category_id (category_id)
) TYPE=MyISAM;

CREATE TABLE gallery_photos (
  photo_id bigint(20) unsigned NOT NULL auto_increment,
  photo_filename varchar(25),
  photo_caption text,
  photo_category bigint(20) unsigned NOT NULL default '0',
  PRIMARY KEY  (photo_id),
  KEY photo_id (photo_id)
) TYPE=MyISAM;

This is the "preupload.php" page where you can select a photo and give it a caption:

<?php
include("config.inc.php");

// initialization
$photo_upload_fields = "";
$counter = 1;

// default number of fields
$number_of_fields = 5; 

// If you want more fields, then the call to this page should be like, 
// preupload.php?number_of_fields=20

if( $_GET['number_of_fields'] )
$number_of_fields = (int)($_GET['number_of_fields']);

// Firstly Lets build the Category List

$result = mysql_query( "SELECT category_id,category_name FROM gallery_category" );
while( $row = mysql_fetch_array( $result ) )
{
$photo_category_list .=<<<__HTML_END
<option value="$row[0]">$row[1]</option>\n
__HTML_END;
}
mysql_free_result( $result );	

// Lets build the Photo Uploading fields
while( $counter <= $number_of_fields )
{
$photo_upload_fields .=<<<__HTML_END
<tr>
<td>
     Photo {$counter}:
    <input name=' photo_filename[]' type='file' />
</td>
</tr>
<tr>
<td>
     Caption:
    <textarea name='photo_caption[]' cols='30' rows='1'></textarea>
</td>
</tr>
__HTML_END;
$counter++;
}

// Final Output
echo <<<__HTML_END
<html>
<head>
<title>Lets upload Photos</title>
</head>
<body>
<form enctype='multipart/form-data' action='upload.php' method='post' name='upload_form'>
<table width='90%' border='0' align='center' style='width: 90%;'>
<tr>
<td>
	Select Category
	<select name='category'>
		$photo_category_list
	</select>
</td>
</tr>
<tr>
<td>
	<p> </p>
</td>
</tr>

<!-Insert the photo fields here -->
$photo_upload_fields

<tr>
<td>
        <input type='submit' name='submit' value='Add Photos' />
</td>
</tr>
</table>
</form>
</body>
</html>
__HTML_END;
?>

This is the "upload.php" page where the files upload:

<?php
include("config.inc.php");

// initialization
$result_final = "";
$counter = 0;

// List of our known photo types
$known_photo_types = array( 
					'image/pjpeg' => 'jpg',
					'image/jpeg' => 'jpg',
					'image/gif' => 'gif',
					'image/bmp' => 'bmp',
					'image/x-png' => 'png'
				);

// GD Function List
$gd_function_suffix = array( 
					'image/pjpeg' => 'JPEG',
					'image/jpeg' => 'JPEG',
					'image/gif' => 'GIF',
					'image/bmp' => 'WBMP',
					'image/x-png' => 'PNG'
				);

// Fetch the photo array sent by preupload.php
$photos_uploaded = $_FILES['photo_filename'];

// Fetch the photo caption array
$photo_caption = $_POST['photo_caption'];

while( $counter <= count($photos_uploaded) )
{
	if($photos_uploaded['size'][$counter] > 0)
	{
		if(!array_key_exists($photos_uploaded['type'][$counter], $known_photo_types))
		{
			$result_final .= "File ".($counter+1)." is not a photo<br />";
		}
		else
		{
			mysql_query( "INSERT INTO gallery_photos(`photo_filename`, `photo_caption`, `photo_category`) VALUES('0', '".addslashes($photo_caption[$counter])."', '".addslashes($_POST['category'])."')" );
			$new_id = mysql_insert_id();
			$filetype = $photos_uploaded['type'][$counter];
			$extention = $known_photo_types[$filetype];
			$filename = $new_id.".".$extention;

			mysql_query( "UPDATE gallery_photos SET photo_filename='".addslashes($filename)."' WHERE photo_id='".addslashes($new_id)."'" );

			// Store the orignal file
			copy($photos_uploaded['tmp_name'][$counter], $images_dir."/".$filename);

			// Let's get the Thumbnail size
			$size = GetImageSize( $images_dir."/".$filename );
			if($size[0] > $size[1])
			{
				$thumbnail_width = 100;
				$thumbnail_height = (int)(100 * $size[1] / $size[0]);
			}
			else
			{
				$thumbnail_width = (int)(100 * $size[0] / $size[1]);
				$thumbnail_height = 100;
			}

			// Build Thumbnail with GD 1.x.x, you can use the other described methods too
			$function_suffix = $gd_function_suffix[$filetype];
			$function_to_read = "ImageCreateFrom".$function_suffix;
			$function_to_write = "Image".$function_suffix;

			// Read the source file
			$source_handle = $function_to_read ( $images_dir."/".$filename ); 

			if($source_handle)
			{
				// Let's create an blank image for the thumbnail
			     	$destination_handle = ImageCreate ( $thumbnail_width, $thumbnail_height );

				// Now we resize it
		      	ImageCopyResized( $destination_handle, $source_handle, 0, 0, 0, 0, $thumbnail_width, $thumbnail_height, $size[0], $size[1] );
			}

			// Let's save the thumbnail
			$function_to_write( $destination_handle, $images_dir."/tb_".$filename );
			ImageDestroy($destination_handle );
			//

			$result_final .= "<img src='".$images_dir. "/tb_".$filename."' /> File ".($counter+1)." Added<br />";
		}
	}
$counter++;
}


// Print Result
echo <<<__HTML_END

<html>
<head>
<title>Photos uploaded</title>
</head>
<body>
$result_final
</body>
</html>

__HTML_END;
?>

This is the "viewgallery.php" to see the gallery:

<?php
include("config.inc.php");

// initialization
$result_array = array();
$counter = 0;

$cid = (int)($_GET['cid']);
$pid = (int)($_GET['pid']);

// Category Listing

if( empty($cid) && empty($pid) )
{
	$number_of_categories_in_row = 4;

	$result = mysql_query( "SELECT c.category_id,c.category_name,COUNT(photo_id)
					FROM gallery_category as c
					LEFT JOIN gallery_photos as p ON p.photo_category = c.category_id
					GROUP BY c.category_id" );
	while( $row = mysql_fetch_array( $result ) )
	{
		$result_array[] = "<a href='viewgallery.php?cid=".$row[0]."'>".$row[1]."</a> "."(".$row[2].")";
	}
	mysql_free_result( $result );	

	$result_final = "<tr>\n";

	foreach($result_array as $category_link)
	{
		if($counter == $number_of_categories_in_row)
		{	
			$counter = 1;
			$result_final .= "\n</tr>\n<tr>\n";
		}
		else
		$counter++;

		$result_final .= "\t<td>".$category_link."</td>\n";
	}

	if($counter)
	{
		if($number_of_categories_in_row-$counter)
		$result_final .= "\t<td colspan='".($number_of_categories_in_row-$counter)."'> </td>\n";

		$result_final .= "</tr>";
	}
}


// Thumbnail Listing

else if( $cid && empty( $pid ) )
{
	$number_of_thumbs_in_row = 5;

	$result = mysql_query( "SELECT photo_id,photo_caption,photo_filename FROM gallery_photos WHERE photo_category='".addslashes($cid)."'" );
	$nr = mysql_num_rows( $result );

	if( empty( $nr ) )
	{
		$result_final = "\t<tr><td>No Category found</td></tr>\n";
	}
	else
	{
		while( $row = mysql_fetch_array( $result ) )
		{
			$result_array[] = "<a href='viewgallery.php?cid=$cid&pid=".$row[0]."'><img src='".$images_dir."/tb_".$row[2]."' border='0' alt='".$row[1]."' /></a>";
		}
		mysql_free_result( $result );	

		$result_final = "<tr>\n";

		foreach($result_array as $thumbnail_link)
		{
			if($counter == $number_of_thumbs_in_row)
			{	
				$counter = 1;
				$result_final .= "\n</tr>\n<tr>\n";
			}
			else
			$counter++;

			$result_final .= "\t<td>".$thumbnail_link."</td>\n";
		}

		if($counter)
		{
			if($number_of_photos_in_row-$counter)
		$result_final .= "\t<td colspan='".($number_of_photos_in_row-$counter)."'> </td>\n";

			$result_final .= "</tr>";
		}
	}
}

// Full Size View of Photo
else if( $pid )
{
	$result = mysql_query( "SELECT photo_caption,photo_filename FROM gallery_photos WHERE photo_id='".addslashes($pid)."'" );
	list($photo_caption, $photo_filename) = mysql_fetch_array( $result );
	$nr = mysql_num_rows( $result );
	mysql_free_result( $result );	

	if( empty( $nr ) )
	{
		$result_final = "\t<tr><td>No Photo found</td></tr>\n";
	}
	else
	{
		$result = mysql_query( "SELECT category_name FROM gallery_category WHERE category_id='".addslashes($cid)."'" );
		list($category_name) = mysql_fetch_array( $result );
		mysql_free_result( $result );	

		$result_final .= "<tr>\n\t<td>
					<a href='viewgallery.php'>Categories</a> > 
					<a href='viewgallery.php?cid=$cid'>$category_name</a></td>\n</tr>\n";

		$result_final .= "<tr>\n\t<td align='center'>
				<br />
				<img src='".$images_dir."/".$photo_filename."' border='0' alt='".$photo_caption."' />
				<br />
				$photo_caption
				</td>
				</tr>";
	}
}

// Final Output
echo <<<__HTML_END

<html>
<head>
<title>Gallery View</title>
</head>
<body>
<table width='100%' border='0' align='center' style='width: 100%;'>
$result_final		
</table>
</body>
</html>

__HTML_END;
?>

So, can you show me how to make it dynamic,

*OR*

Is there a better way to do this?

I am open to ideas.

Thanks.

PFMaBiSmAd · October 19, 2011

I want to be able to add, edit, and delete Categories and Photos.

Those operations are administrative operations. You would make an administrative page that authenticates that the current visitor is logged in and is an administrator. You would most likely want to put all the necessary forms/links on one page.

To add a category, you would want a form for entering the new category name with an 'add' submit button. When the 'add' form is submitted, after you check that the current visitor is logged in and is an administrator, the form processing code would detect that the 'add' form was submitted, validate the name that was submitted, and call the add_category() function with the new category name as a parameter.

To edit an existing category name(s), you would want to display one or all at one time (your choice) of the existing name(s) with a form field next to each one to enter a new name. If you only want to deal with editing the name of one at a time, you would make an individual form for each one with an 'edit' submit button next to each name/new name field. If you want to allow mass editing of names, you would make one form with a single 'edit/update' submit button. The form processing code would be similar to that for the 'add' category.

To delete a category name, you would place a delete link (with the category id as a get parameter) after the 'edit' submit button if you want to delete one at a time or if you want to allow mass deleting of names, you would have a check-box for each one with a single 'delete' submit button.

spacepoet · October 19, 2011

Hello:

Thanks for the reply.

I do have this is a password protected area, so I am OK there.

"call the add_category() function with the new category name as a parameter."

(same with edit and delete functions):

Can you show me a coding example of how to call these functions?

That's where my big problem is: They don't show an example and I don't know how to do it.

Help...

PFMaBiSmAd · October 19, 2011

For the delete category example, assuming you have created a link like this - <a href='adminprocessing.php?action=delete&id=1'>Delete</a> for each category, where the id value is the category_id, the code in the 'adminprocessing.php' page would look something like -

<?php
// perform any get actions for this page -
$get_action = isset($_GET['action']) ? strtolower($_GET['action']) : '';
switch($get_action){
case 'delete':
	echo "Delete category with ID: {$_GET['id']}"; // show what choice and id value got submitted for demo purposes.
	// your code to validate the data goes here...

	// at this point, the value in $_GET['id'] has been filtered/trimmed and validated that it is a number, greater-than zero, and the category with that id exists (you wouldn't want to try and delete a category that doesn't exist.)
	delete_category($_GET['id']); // call the function to delete the category

break;
}

spacepoet · October 19, 2011

Hi:

Ahhhhh! OK, I see this now. Thanks for shpwing me this.

I will assume that edit and insert are also called like that.

Let me play around with it and see what I come up with.

Thanks for your help!

Sign In

Help on how to make photo gallery functions

Recommended Posts

spacepoet

Link to comment

Share on other sites

titan21

Link to comment

Share on other sites

spacepoet

Link to comment

Share on other sites

titan21

Link to comment

Share on other sites

spacepoet

Link to comment

Share on other sites

PFMaBiSmAd

Link to comment

Share on other sites

spacepoet

Link to comment

Share on other sites

PFMaBiSmAd

Link to comment

Share on other sites

spacepoet

Link to comment

Share on other sites

Join the conversation

Browse

Activity

Important Information