Ch 7 Creating background using imagefilter...

cshu · July 13th, 2005, 03:05 AM

I altered 'gallery.php' on so that the background would have a faded black and white image of the first thumbnail. It does look kind of tacky but I am just playing around.

When I clicked on that thumbnail, instead of the thumbnail opening in color it was the faded black and white image of the background. In fact, the more I ran gallery.php the fainter my background image got so it finally became white.

I did use 'imagedestroy' but it didn't destroy anything.

How can I use image as a background black and white but keep the original image color?

Here is the altered code:

<?php
//connect to database
  $link = mysql_connect("localhost","cshu","holy****")
    or die("Could not connect: " . mysql_error());
  mysql_select_db("moviesite", $link)
    or die(mysql_error());

$ImageDir = "images/";
$ImageThumb = $ImageDir . "thumbs/";

$getbackgroundpic = mysql_query("SELECT * FROM images order by image_id desc")
  or die(mysql_error());
$rows = mysql_fetch_array($getbackgroundpic);
extract($rows);
$background_image_id = $image_id;

$background_image = $ImageDir . $background_image_id . ".jpg";

// converting the background image to greyscale is a bit tricky!!!!

$im = imagecreatefromjpeg($background_image);
if ($im && imagefilter($im, IMG_FILTER_GRAYSCALE)&&
   imagefilter($im, IMG_FILTER_BRIGHTNESS, 80)&&
   imagefilter($im,IMG_FILTER_GAUSSIAN_BLUR)) {
   echo 'Image converted to grayscale.';
   imagejpeg($im, $background_image);
} else {
   echo 'Conversion to grayscale failed.';
}

if (imagedestroy($im)) {
  echo 'Destroying the image now';
}
else {
  echo 'Did not destroy the image!';
}

?>

<html>
<head>
<title>Welcome to our Photo Gallery</title>

<style type="text/css">

body {
  background-image: url(<?php echo $background_image ?>);
  background-position: 50%;
}

table {border:1px solid red; padding:5px; width:90%;}
tr {background-color: #333;}
td {background-color; #ccc; border: 1px solid black;}
.highlight {background-color: transparent;}

</style>
</head>
<body>
  <p lign="center">Click on any image to see it full sized.</p>
  <table align="center">
    <tr>
      <td align="center" <Image</td>
      <td align="center"<Caption</td>
      <td align="center"<Uploaded By</td>
      <td align="center"<Date Uploaded</td>
    </tr>

<?php
//get the thumbs
$getpic = mysql_query("SELECT * FROM images")
  or die(mysql_error());
while ($rows = mysql_fetch_array($getpic)) {
  extract($rows);

  echo "<tr>\n";
  echo "<td><a href=\"".$ImageDir . $image_id . ".jpg\">";
  echo "<img src=\"" . $ImageThumb . $image_id . ".jpg\" border=\"0\">";
  echo "</a></td>\n";
  echo "<td class=\"highlight\">" . $image_caption . "</td>\n";
  echo "<td>" . $image_username . "</td>\n";
  echo "<td>" . $image_date . "</td>\n";
  echo "</tr\n";
}
?>
</table>
</body>
</html>