Please Help, Category Listing With Images

NealeWeb · March 9, 2011

I have an image gallery with different categories, at the moment the list of categories is simple and just looks like this...

General (10)

I would like to be able to upload an image when making new categories and display it like this...

gallery%20image.jpg

Can anybody help me with this, here are the pages of code...

This is the page that displays the category listing...

<?php include("config.inc.php"); ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Roy Neale - Gallery</title>
<link href="style/style.css" rel="stylesheet" type="text/css"  />
<script type="text/javascript" src="js/prototype.js"></script>
<script type="text/javascript" src="js/scriptaculous.js?load=effects,builder"></script>
<script type="text/javascript" src="js/lightbox.js"></script>
<link rel="stylesheet" href="css/lightbox.css" type="text/css" media="screen" />
</head>

<body>
    <div id="head">
        <div id="headmain">    
            <div id="headleft">
                <image src="images/bannertop.jpg">
            </div>
            <div id="headright">
                <div class="navimage"><image src="images/gallery3.png" onmouseover="this.src='images/gallery2.png'" onmouseout="this.src='images/gallery3.png'"></image><!--start navimage-->
                </div><!--end navimage-->
                <div class="navimage"><image src="images/about.png" onmouseover="this.src='images/about2.png'" onmouseout="this.src='images/about.png'"></image><!--start navimage-->
                </div><!--end navimage-->
                <div class="navimage"><image src="images/contact.png" onmouseover="this.src='images/contact2.png'" onmouseout="this.src='images/contact.png'"></image><!--start navimage-->
                </div><!--end navimage-->
            </div>
        </div>
    </div>
    <div id="mid">
        <div id="midleft">
          <p> </p>
          <p> </p>
          <p> </p>
          Login
          <p> </p>
          <p align="center"><form action="gallery.php" method="post" name="loginform">
                                <label>Username: </label><input name="username" type="text" class="userpass" size="25" maxlength="25" />
                                <label>Password: </label><input name="password" type="password" class="userpass" size="25" maxlength="25" />
                                <p><label></label><input name="submit" type="submit" class="logbutton" value="LOGIN" /></p>
                        </form></p>
        </div>
        <div id="midright">
            <div id="midrighttop5">
            </div>
            <div id="midrightbottom4">
                  <?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 = 3;

        $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='gallery.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 = '1';

        $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 Gallery found</td></tr>\n";
        }
        else
        {
            while( $row = mysql_fetch_array( $result ) )
            {
    $result_array[] = "<a href='".$images_dir."/full_".$row[2]."' rel=\"lightbox\"><img src='".$images_dir."/tb_".$row[2]."' border='3' style='margin: 4px;' bordercolor='silver' 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 .= $thumbnail_link;
            }
    
            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='gallery.php'>Categories</a> > 
                        <a href='gallery.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
                <table width='100%' border='0' align='left' style='margin: 6px;' style='padding: 5px;'>
$result_final        
</table>
            </div>
        </div>
    </div>    
    <div id="foot">
        <div id="footmain">
            <div id="footmainr">
                <image src="images/copyright.png">
            </div>
        </div>
    </div>

</body>
</html>
__HTML_END;
?>

And this is the page where i add new categories...

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

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Roy Neale - Gallery</title>
<link href="style/style.css" rel="stylesheet" type="text/css"  />
</head>

<body>
    <div id="head">
        <div id="headmain">    
            <div id="headleft">
                <image src="images/bannertop.jpg">
            </div>
            <div id="headright">
                <div class="navimage"><a href="gallery.php"><img border="0" image src="images/gallery3.png" onmouseover="this.src='images/gallery2.png'" onmouseout="this.src='images/gallery3.png'"></image></a><!--start navimage-->
                </div><!--end navimage-->
                <div class="navimage"><image src="images/about.png" onmouseover="this.src='images/about2.png'" onmouseout="this.src='images/about.png'"></image><!--start navimage-->
                </div><!--end navimage-->
                <div class="navimage"><image src="images/contact.png" onmouseover="this.src='images/contact2.png'" onmouseout="this.src='images/contact.png'"></image><!--start navimage-->
                </div><!--end navimage-->
            </div>
        </div>
    </div>
    <div id="mid">
        <div id="midleft">
        
        </div>
        <div id="midright">
            <div id="midrighttop3">
            </div>
            <div id="midrightbottom2">

<?php

if (isset($_POST['submit'])):

  $category_name = $_POST['category_name'];
mysql_query( "INSERT INTO gallery_category(`category_name`) VALUES('".addslashes( $category_name )."' )" );
          
  if (@mysql_query($sql)) {
    echo('<p>New category added</p>');
  } else {
    echo('<p>New category added</p>');
  }
?>

<p><a href="<?=$_SERVER['PHP_SELF']?>">Add another category</a></p>

<?php
  else: // Allow the user to enter a new category
?>

<form action="<?=$_SERVER['PHP_SELF']?>" method="post">
<p><br />
New Category: <input type="text" name="category_name" size="20" maxlength="255"

  /><br />
<input type="submit" name="submit" value="SUBMIT" /></p>
</form>

<?php endif; ?>
            <p><a href="preupload2.php">Back to Upload</a></p>
            </div>
        </div>
    </div>    
    <div id="foot">
        <div id="footmain">
            <div id="footmainr">
                <image src="images/copyright.png">
            </div>
        </div>
    </div>

</body>
</html>

I assume i just need to edit a few mysql queries add another upload form and a few new fields or tables to my database, but i dont know how yet.

litebearer · March 9, 2011

where is the image (ie for general images, frogs, toads, ice scluptures) going to come from? will the image for a specific category always be the same or will some condition determine what image is displayed?

NealeWeb · March 9, 2011

Always the same, but i would like to be able to change it if i need to, simply overwrite the old one somehow.

NealeWeb · March 10, 2011

i just need a few hints and i think i can figure it out

NealeWeb · March 10, 2011

Please help me, i have added a feild to the database in the categories table for category images but i dont have a clue how to include them in the category listing (the code i posted at the top) or how to alter the add new category form to be able to add an image for the category, Im sure it cant be that hard and i am trying really hard, but the above code does not look simple and i am very new, please help.

Sign In

Please Help, Category Listing With Images

Recommended Posts

NealeWeb

Link to comment

Share on other sites

litebearer

Link to comment

Share on other sites

NealeWeb

Link to comment

Share on other sites

NealeWeb

Link to comment

Share on other sites

NealeWeb

Link to comment

Share on other sites

Archived

Browse

Activity

Important Information