Thumbnail linking to large image problem.

I have a folder for my images: image_files, and a mysql table: table_images,which holds a the path to the images in a field called imagepath.

I also have a folder for thumbnail of these image(created by a script):thumbs, and a mysql table which holds a ref to these thumbs in a field also called imagepath.

I have a script which displays these thumbs as links, when you click on a thumb it is supposed to show the full size image. But I just cant get it.

This is the code that doesnt work.
[php]$q = “SELECT * FROM image_thumbs”;
$r = mysql_query("$q");
if($r)
{
while($row=mysql_fetch_array($r))
{
header(“Content-type: text/html”);
echo “”;
echo “”;
echo “<a href=table_images”{$row[‘imagepath’]}"><img src="{$row[‘imagepath’]}" />";
echo"";
}
}
else
{
echo mysql_error();
}[/php]

When I click on a thumb I get this error message: ‘You don’t have permission to access /image_upload_with_resize/table_images"thumbs/706.JPG" on this server.’

Can anyone help me figure out the problem?

Thanks

Hi glenrogers,

There are two possible issues here. The first is that there are several errors in your HTML. Try using the following instead:[php]echo “

”,
Image”,

”;[/php]
These are the changes I made (and why):

The correct use of the break tag is ‘
’.

The href value needs either single or double quotes around the address. You were generating a closing double quote, but not a starting one (immediately after the “=” sign.

I prefer to insert the variables as I did above, but your method would also work (to escape the quotes ") You shouldn’t need to use brackets around your variables in this situation, but it doesn’t hurt. I left the first one in because I feel it makes it easier to read since the variable bumps into the preceding text.

You were missing a closing anchor tag ().

While your img tag will probably work just fine without it, an alt attribute is required by HTML standards. In this case I simply set it to “Image.”

I also combined your echos into one. There is nothing wrong with doing it the way you did. I prefer to do it this way because I feel it looks cleaner and it should execute slightly faster. In this case, the difference would be so incredibly small that it is beyond trivial, but it is a habit I have developed.

Based on your code, I am assuming that your imagepaths begin with a ‘/’. If not, we will need to account for that.

Based on the error you received, there is a potential that even with these changes, it still won’t work. It is possible that your .htaccess file is blocking direct access to the image files. In this case, you should be able to create a very simple PHP file to display the image. I would be glad to help you with this, it wouldn’t take much to do.

Let me know if the above code doesn’t fix your problem.

First of alll, thank you for your reply.

This is my updated code now

[php]<?php
$q = “SELECT * FROM image_thumbs”;
$t = “SELECT imagepath FROM table_images”;
$i = mysql_query ("$t");
$r = mysql_query("$q");
if($r)
{
while($row=mysql_fetch_array($r))
{
header(“Content-type: text/html”);
if($row2=mysql_fetch_array($i))
{

          echo "<br /><br />",
               "<a href='{$row2['imagepath']}'><img src='$row[imagepath]' alt='Image' /></a>",
               "<br />";
		  }
       }
    }
    else
    {
       echo mysql_error();
    }[/php]

Thanks for helping me see the problem.

One thing, my images(thumbnails) are displayed one under the other, how would I display say 5 to a row?

Cheers

Glen…

First, here is how I would go about implementing a five across solution:[php]

Image Thumbnails #thumbs{ width: 800px; margin: auto; } div.thumb{ width: 145px; float: left; padding: 10px 5px 10px 5px; } img.thumbnail{ width: 155px; } <?php $q = "SELECT * FROM image_thumbs"; $t = "SELECT imagepath FROM table_images"; $i = mysql_query ($t);

if($r = mysql_query($q))
{
echo ‘

’;
while($row=mysql_fetch_array($r))
{
if($row2=mysql_fetch_array($i))
{
echo ‘
’,
Image”,
’;
}
}
echo ‘
’;
}
else
{
echo mysql_error();
}
?> [/php]

This is using CSS for styling. You should be able to play with the style attributes until you get it how you want it.

If you don’t mind a suggestion:
Right now you have two tables with related data (one has the image paths and the other has the thumbnail paths.) Do you have a linking column for the two tables - something like ‘image_num’, etc.? Really anything that uniquely ties the thumbnail row in your image_thumbs table to the matching image row in your table_images table. If you don’t, I would highly recommend that you do and then update your code.

Right now it looks like you are relying on the nth row in one table always relating to the nth row in the other. Given enough time, this will almost certainly become an issue.

If the two were, or are, linked with a common column you could eliminate these issues like this: (using image_num as the common column)[php]<?php
$q = “SELECT a.imagepath AS thumbpath, b.imagepath AS imagepath
FROM image_thumbs AS a
JOIN table_images AS b
USING(image_num)”;

if($r = mysql_query($q))
{
echo ‘

’;
while($row=mysql_fetch_array($r))
{
echo ‘
’,
Image”,
’;
}
}
echo ‘
’;
}
else
{
echo mysql_error();
}
?>[/php]
Please note that I am not able to test this code right now. I have looked it over a couple of times and don’t see any issues, but without executing it I can’t be certain I am not missing something.

Thanks for the CSS, it worked a treat. I messed about with it to make the gallery look how i wanted.

I cant figure out your second suggestion though. When you say a common column image_num, i am unsure how to do this.
Both of my tables have a column ‘id’ that auto increments as each image is added. Is this what you mean?

Also, when my submit.php gets an image from the form it resizes it twice: makes 2 copies, one which it save in table-images and one it save in image-thumbs. is that good enough as they are always added at the same time so will surely always be at the same position?

Thanks for your help…

The id column is what I am referring to as a common column. In other words, it is a value that appears once in each table and on rows that should share a common ‘id’ value.

I would not rely on the auto-increment in both tables for this! Here is what I wouild do:

[ul][li]In both tables, I would create a primary key for ‘id’ (if you haven’t already)[/li]
[li]I would remove the autoincrement attribute from table 2.[/li]
[li]After inserting into your first table, I would query it for the id value that was assigned. Some people will tell you to just query for the MAX(id) and add 1, but this is wrong. Simply do something like “SELECT id FROM image_thumbs WHERE imagepath LIKE ‘$imagepath’” This is an example and may need to be adjusted to match the column, table, and variables used in the original insert.[/li]
[li]Use the id returned from the above query in the second insert. This helps ensure that the appropriate rows share a common id.[/li][/ul]

There are a number of situations that could lead to the rows or autoincrement values getting off in one table or the other. Doing it as shown above should prevent problems if and when this does happen. Now if you are like me, you will want an example of how this could happen, so here is one: Lets say that for any reason your first insert (table 1) goes fine, but fails on table 2. This could happen for a number of different reasons, but importantly, it could happen. This would mean the next autoincrement value in table 1 would be one greater than table 2 and all new thumbs would be associated with a different image than intended. I assure you that there are many other possibilities as well.

If you implement something like the above, you would replace “image_num” with “id” in the example I provided.

In looking back, I also noticed something that bugged me about example query I provided. It won’t affect the way it works, but I unnecessarily used an extra “AS” and would replace this line:[php]$q = "SELECT a.imagepath AS thumbpath, b.imagepath AS imagepath [/php]
… with this:[php]$q = "SELECT a.imagepath AS thumbpath, b.imagepath[/php]

Hi, I tried your suggestion, but it is not showing any pictures in the gallery. I’m doing something wrong, but I dont know what!!

Can you post the code that you tried and I’ll see if I can spot the issue.

This is what I tried.

First I took the autoincrement away from my id column in table_images. Both id columns are set as primary.

This is my submit.php file which uploads the image

[php]<?php ini_set("memory_limit", "200000000"); // for large images so that we do not get "Allowed memory exhausted"?>

<?php include 'connect.php'; // upload the file if ((isset($_POST["submitted_form"])) && ($_POST["submitted_form"] == "image_upload_form")) { // file needs to be jpg,gif,bmp,x-png and 4 MB max if (($_FILES["image_upload_box"]["type"] == "image/jpeg" || $_FILES["image_upload_box"]["type"] == "image/pjpeg" || $_FILES["image_upload_box"]["type"] == "image/gif" || $_FILES["image_upload_box"]["type"] == "image/x-png") && ($_FILES["image_upload_box"]["size"] < 8000000)) { // some settings $max_upload_width = 500; $max_upload_height = 500; $thumb_height = 150; // if uploaded image was JPG/JPEG if($_FILES["image_upload_box"]["type"] == "image/jpeg" || $_FILES["image_upload_box"]["type"] == "image/pjpeg"){ $image_source = imagecreatefromjpeg($_FILES["image_upload_box"]["tmp_name"]); } // if uploaded image was GIF if($_FILES["image_upload_box"]["type"] == "image/gif"){ $image_source = imagecreatefromgif($_FILES["image_upload_box"]["tmp_name"]); } // BMP doesn't seem to be supported so remove it form above image type test (reject bmps) // if uploaded image was BMP if($_FILES["image_upload_box"]["type"] == "image/bmp"){ $image_source = imagecreatefromwbmp($_FILES["image_upload_box"]["tmp_name"]); } // if uploaded image was PNG if($_FILES["image_upload_box"]["type"] == "image/x-png"){ $image_source = imagecreatefrompng($_FILES["image_upload_box"]["tmp_name"]); } $remote_file = "image_files/".$_FILES["image_upload_box"]["name"]; $thumb_file = "thumbs/".$_FILES["image_upload_box"]["name"]; imagejpeg($image_source,$remote_file,100); chmod($remote_file,0644); //Save image as thumb // get width and height of original image list($image_width, $image_height) = getimagesize($remote_file); if($image_width>$thumb_width || $image_height >$thumb_height) { $proportions = $image_width/$image_height; $new_height = $thumb_height; $new_width = round($thumb_height*$proportions); $thumb_image = imagecreatetruecolor($new_width , $new_height); $image_source = imagecreatefromjpeg($thumb_file); imagecopyresampled($thumb_image, $image_source, 0, 0, 0, 0, $new_width, $new_height, $image_width, $image_height); imagejpeg($thumb_image,$thumb_file,100); imagedestroy($thumb_image); //add the files pathname to the database table image_thumbs $uploaded = $thumb_file; $aname = $_POST['aname']; $query = mysql_query("INSERT INTO image_thumbs VALUE('id', '$uploaded', '$aname')"); $query2 = mysql_query("SELECT `id` FROM `image_thumbs` WHERE `imagepath` LIKE '$uploaded'"); } // get width and height of original image //if landscape make width 500, if portrait make height 500 list($image_width, $image_height) = getimagesize($remote_file); if($image_width>$max_upload_width || $image_height >$max_upload_height) { $proportions = $image_width/$image_height; if($image_width>$image_height) { $new_width = $max_upload_width; $new_height = round($max_upload_width/$proportions); } else { $new_height = $max_upload_height; $new_width = round($max_upload_height*$proportions); } $new_image = imagecreatetruecolor($new_width , $new_height); $image_source = imagecreatefromjpeg($remote_file); imagecopyresampled($new_image, $image_source, 0, 0, 0, 0, $new_width, $new_height, $image_width, $image_height); imagejpeg($new_image,$remote_file,100); imagecopyresampled($new_image, $image_source, 0, 0, 0, 0, $new_width, $new_height, $image_width, $image_height); imagejpeg($new_image,$thumb_file,100); //add the files pathname to the database table table_images.;, $uploaded = $remote_file; $query = mysql_query("INSERT INTO table_images VALUE(NULL, '$query2')"); } imagedestroy($image_source); header("Location: submit.php?upload_message=image uploaded&upload_message_type=success&show_image=".$_FILES["image_upload_box"]["name"]); exit; } else{ header("Location: submit.php?upload_message=make sure the file is jpg, gif or png and that is smaller than 4MB&upload_message_type=error"); exit; } } ?> Image Upload with resize

body,td,th {
font-family: Arial, Helvetica, sans-serif;
color: #111111;
font-size: 12px;
}

.upload_message_success {
padding:4px;
background-color:#000000;
border:1px solid #006600;
color:#FFFFFF;
margin-top:10px;
margin-bottom:10px;
}

.upload_message_error {
padding:4px;
background-color:#CE0000;
border:1px solid #990000;
color:#FFFFFF;
margin-top:10px;
margin-bottom:10px;
}

Submit an image

    <?php if(isset($_REQUEST['upload_message'])){?>
        <div class="upload_message_<?php echo $_REQUEST['upload_message_type'];?>">
        <?php echo htmlentities($_REQUEST['upload_message']);?>
        </div>
	<?php }?>
Image file, maximum 4MB. it can be jpg, gif, png:


Description



 <br />
<br />

 
  
  <br />
<?php if(isset($_REQUEST['show_image']) and $_REQUEST['show_image']!=''){?>

Uploaded Image:

<?php }?>

[/php]

I added this line to the code that adds the data to image_thumbs

[php]$query2 = mysql_query(“SELECT id FROM image_thumbs WHERE imagepath LIKE ‘$uploaded’”);[/php]

I also change the code to add the data to table images

[php]$query = mysql_query(“INSERT INTO table_images VALUE(NULL, ‘$query2’)”);[/php]

This is my show.php file

[php]

Gallery body{ background-color:yellow; } #thumbs{ width: 1300px; position: relative; top: 40px; left: 0px; }

#here{
position: relative;
left:100px;
background-color:white;
}
div.thumb{

float: left;
padding: 10px 5px 10px 5px;
margin-bottom: 60px;

}
img.thumbnail{
border-style: solid;
border-width: 2px;
border-color: red;
background-color: black;
padding: 15px;
}

<?php include 'connect.php';

?>

Here are all the images in the gallery:

<?php $q = "SELECT a.thumbpath AS thumbpath, b.imagepath AS imagepath FROM tumbs AS a JOIN images AS b USING(id)";

if($r = mysql_query($q))
{
echo ‘

’;
while($row=mysql_fetch_array($r))
{
echo ‘
’,
Image”,
’;
}
  echo '</div>';

}
else
{
echo mysql_error();
}

?>

[/php]

The data is being added to image_thumbs but not to table_images.
Nothing is showing up in the gallery at all when I run show.php.

Thanks for looking!

Glen

OK, I am seeing the problem and it should be pretty easy to fix. I might need to know a little more about your tables, but lets give this a try:

[php]<?php
ini_set(“memory_limit”, “200000000”); // for large images so that we do not get “Allowed memory exhausted”
include ‘connect.php’;

// upload the file
if ((isset($_POST[“submitted_form”])) && ($_POST[“submitted_form”] == “image_upload_form”))
{
// file needs to be jpg,gif,bmp,x-png and 4 MB max
if (($_FILES[“image_upload_box”][“type”] == “image/jpeg” || $_FILES[“image_upload_box”][“type”] == “image/pjpeg” || $_FILES[“image_upload_box”][“type”] == “image/gif” || $_FILES[“image_upload_box”][“type”] == “image/x-png”) && ($_FILES[“image_upload_box”][“size”] < 8000000))
{
// some settings
$max_upload_width = 500;
$max_upload_height = 500;
$thumb_height = 150;
// if uploaded image was JPG/JPEG
if($_FILES[“image_upload_box”][“type”] == “image/jpeg” || $_FILES[“image_upload_box”][“type”] == “image/pjpeg”)
{
$image_source = imagecreatefromjpeg($_FILES[“image_upload_box”][“tmp_name”]);
}
// if uploaded image was GIF
if($_FILES[“image_upload_box”][“type”] == “image/gif”)
{
$image_source = imagecreatefromgif($_FILES[“image_upload_box”][“tmp_name”]);
}

    // BMP doesn't seem to be supported so remove it form above image type test (reject bmps)
    // if uploaded image was BMP
    if($_FILES["image_upload_box"]["type"] == "image/bmp")
      {
        $image_source = imagecreatefromwbmp($_FILES["image_upload_box"]["tmp_name"]);
      }
    // if uploaded image was PNG
    if($_FILES["image_upload_box"]["type"] == "image/x-png")
      {
        $image_source = imagecreatefrompng($_FILES["image_upload_box"]["tmp_name"]);
      }
    $remote_file = "image_files/".$_FILES["image_upload_box"]["name"];
    $thumb_file = "thumbs/".$_FILES["image_upload_box"]["name"];
    imagejpeg($image_source,$remote_file,100);
    chmod($remote_file,0644);
    //Save image as thumb 
    // get width and height of original image
    list($image_width, $image_height) = getimagesize($remote_file);
    if($image_width>$thumb_width || $image_height >$thumb_height)
      {
        $proportions = $image_width/$image_height;
        $new_height = $thumb_height;
        $new_width = round($thumb_height*$proportions);
        $thumb_image = imagecreatetruecolor($new_width , $new_height);
        $image_source = imagecreatefromjpeg($thumb_file);
        imagecopyresampled($thumb_image, $image_source, 0, 0, 0, 0, $new_width, $new_height, $image_width, $image_height);
        imagejpeg($thumb_image,$thumb_file,100);
        imagedestroy($thumb_image);
        //add the files pathname to the database table image_thumbs
        $uploaded = $thumb_file;
        $aname = $_POST['aname'];
        $query = mysql_query("INSERT INTO image_thumbs VALUE('', '$uploaded', '$aname')");
        $query2 = mysql_query("SELECT `id` FROM `image_thumbs` WHERE `imagepath` LIKE '$uploaded'");
        $q2 = mysql_fetch_assoc($query2);
        mysql_free_result($query2);
        $id = $q2['id'];
      }
    // get width and height of original image
    //if landscape make width 500, if portrait make height 500
    list($image_width, $image_height) = getimagesize($remote_file);
    if($image_width>$max_upload_width || $image_height >$max_upload_height)
      {
        $proportions = $image_width/$image_height;
        if($image_width>$image_height)
          {
            $new_width = $max_upload_width;
            $new_height = round($max_upload_width/$proportions);
          }
        else
          {
            $new_height = $max_upload_height;
            $new_width = round($max_upload_height*$proportions);
          }
        $new_image = imagecreatetruecolor($new_width , $new_height);
        $image_source = imagecreatefromjpeg($remote_file);
        imagecopyresampled($new_image, $image_source, 0, 0, 0, 0, $new_width, $new_height, $image_width, $image_height);
        imagejpeg($new_image,$remote_file,100);
        imagecopyresampled($new_image, $image_source, 0, 0, 0, 0, $new_width, $new_height, $image_width, $image_height);
        imagejpeg($new_image,$thumb_file,100);
        //add the files pathname to the database table table_images.;,
        $uploaded = $remote_file;
        $query = mysql_query("INSERT INTO table_images VALUE($id, '$uploaded')");
      }
    imagedestroy($image_source);
    header("Location: submit.php?upload_message=image uploaded&upload_message_type=success&show_image=".$_FILES["image_upload_box"]["name"]);
    exit;
  }
else
  {
    header("Location: submit.php?upload_message=make sure the file is jpg, gif or png and that is smaller than 4MB&upload_message_type=error");
    exit;
  }

}
?>

Image Upload with resize

body,td,th {
font-family: Arial, Helvetica, sans-serif;
color: #111111;
font-size: 12px;
}
.upload_message_success {
padding:4px;
background-color:#000000;
border:1px solid #006600;
color:#FFFFFF;
margin-top:10px;
margin-bottom:10px;
}
.upload_message_error {
padding:4px;
background-color:#CE0000;
border:1px solid #990000;
color:#FFFFFF;
margin-top:10px;
margin-bottom:10px;
}

Submit an image

<?php if(isset($_REQUEST['upload_message'])){?>
<?php echo htmlentities($_REQUEST['upload_message']);?>
<?php }?> Image file, maximum 4MB. it can be jpg, gif, png:


Description






<?php if(isset($_REQUEST['show_image']) and $_REQUEST['show_image']!=''){?>

Uploaded Image:

<?php }?> [/php]

As I mentioned, I may need to know each of the column names and types for the two tables in order to tweak this if this isn’t working. We should be really close though.

Still not adding to table_images. Adding OK to image_thumbs.
The images get added to both folders ok, the thumb goes into the thumbs folder, thee large image goes into the image_files folder.

My tables are set like this:

image_thumbs

id: type int(11), primary, autoincrement.
imagepath: type varchar(100)
name: type varchar(1000)

table_images

id: type int(11), primary
imagepath: type varchar(100)

OK,

I put some error checking in this, but I think it will work:[php]<?php
ini_set(“memory_limit”, “200000000”); // for large images so that we do not get “Allowed memory exhausted”
include ‘connect.php’;

// upload the file
if ((isset($_POST[“submitted_form”])) && ($_POST[“submitted_form”] == “image_upload_form”))
{
// file needs to be jpg,gif,bmp,x-png and 4 MB max
if (($_FILES[“image_upload_box”][“type”] == “image/jpeg” || $_FILES[“image_upload_box”][“type”] == “image/pjpeg” || $_FILES[“image_upload_box”][“type”] == “image/gif” || $_FILES[“image_upload_box”][“type”] == “image/x-png”) && ($_FILES[“image_upload_box”][“size”] < 8000000))
{
// some settings
$max_upload_width = 500;
$max_upload_height = 500;
$thumb_height = 150;
// if uploaded image was JPG/JPEG
if($_FILES[“image_upload_box”][“type”] == “image/jpeg” || $_FILES[“image_upload_box”][“type”] == “image/pjpeg”)
{
$image_source = imagecreatefromjpeg($_FILES[“image_upload_box”][“tmp_name”]);
}
// if uploaded image was GIF
if($_FILES[“image_upload_box”][“type”] == “image/gif”)
{
$image_source = imagecreatefromgif($_FILES[“image_upload_box”][“tmp_name”]);
}

    // BMP doesn't seem to be supported so remove it form above image type test (reject bmps)
    // if uploaded image was BMP
    if($_FILES["image_upload_box"]["type"] == "image/bmp")
      {
        $image_source = imagecreatefromwbmp($_FILES["image_upload_box"]["tmp_name"]);
      }
    // if uploaded image was PNG
    if($_FILES["image_upload_box"]["type"] == "image/x-png")
      {
        $image_source = imagecreatefrompng($_FILES["image_upload_box"]["tmp_name"]);
      }
    $remote_file = "image_files/".$_FILES["image_upload_box"]["name"];
    $thumb_file = "thumbs/".$_FILES["image_upload_box"]["name"];
    imagejpeg($image_source,$remote_file,100);
    chmod($remote_file,0644);
    //Save image as thumb 
    // get width and height of original image
    list($image_width, $image_height) = getimagesize($remote_file);
    if($image_width>$thumb_width || $image_height >$thumb_height)
      {
        $proportions = $image_width/$image_height;
        $new_height = $thumb_height;
        $new_width = round($thumb_height*$proportions);
        $thumb_image = imagecreatetruecolor($new_width , $new_height);
        $image_source = imagecreatefromjpeg($remote_file);
        imagecopyresampled($thumb_image, $image_source, 0, 0, 0, 0, $new_width, $new_height, $image_width, $image_height);
        imagejpeg($thumb_image,$thumb_file,100);
        imagedestroy($thumb_image);
        //add the files pathname to the database table image_thumbs
        $aname = $_POST['aname'];
        $query = "INSERT INTO image_thumbs VALUE('', '$thumb_file', '$aname')";
        $result = mysql_query($query);
        if(!$result) 
          {
            $error = 'An error occured: '. mysql_error().'<br />';
            $error.= 'Query was: '.$query;
            die($message);
          }
        $query = "SELECT `id` FROM `image_thumbs` WHERE `imagepath` LIKE '$thumb_file'";
        $result = mysql_query($query);
        if(!$result) 
          {
            $error = 'An error occured: '. mysql_error().'<br />';
            $error.= 'Query was: '.$query;
            die($message);
          }
        $q2 = mysql_fetch_assoc($result);
        mysql_free_result($result);
        $id = $q2['id'];
      }
    // get width and height of original image
    //if landscape make width 500, if portrait make height 500
    list($image_width, $image_height) = getimagesize($remote_file);
    if($image_width>$max_upload_width || $image_height >$max_upload_height)
      {
        $proportions = $image_width/$image_height;
        if($image_width>$image_height)
          {
            $new_width = $max_upload_width;
            $new_height = round($max_upload_width/$proportions);
          }
        else
          {
            $new_height = $max_upload_height;
            $new_width = round($max_upload_height*$proportions);
          }
        $new_image = imagecreatetruecolor($new_width , $new_height);
        $image_source = imagecreatefromjpeg($remote_file);
        imagecopyresampled($new_image, $image_source, 0, 0, 0, 0, $new_width, $new_height, $image_width, $image_height);
        imagejpeg($new_image,$remote_file,100);
        imagecopyresampled($new_image, $image_source, 0, 0, 0, 0, $new_width, $new_height, $image_width, $image_height);
        imagejpeg($new_image,$thumb_file,100);
        //add the files pathname to the database table table_images.;,
        $query = "INSERT INTO table_images VALUE($id, '$remote_file')";
        $result = mysql_query($query);
        if(!$result) 
          {
            $error = 'An error occured: '. mysql_error().'<br />';
            $error.= 'Query was: '.$query;
            die($message);
          }
      }
    imagedestroy($image_source);
    header("Location: submit.php?upload_message=image uploaded&upload_message_type=success&show_image=".$_FILES["image_upload_box"]["name"]);
    exit;
  }
else
  {
    header("Location: submit.php?upload_message=make sure the file is jpg, gif or png and that is smaller than 4MB&upload_message_type=error");
    exit;
  }

}
?>

Image Upload with resize

body,td,th {
font-family: Arial, Helvetica, sans-serif;
color: #111111;
font-size: 12px;
}
.upload_message_success {
padding:4px;
background-color:#000000;
border:1px solid #006600;
color:#FFFFFF;
margin-top:10px;
margin-bottom:10px;
}
.upload_message_error {
padding:4px;
background-color:#CE0000;
border:1px solid #990000;
color:#FFFFFF;
margin-top:10px;
margin-bottom:10px;
}

Submit an image

<?php if(isset($_REQUEST['upload_message'])){?>
<?php echo htmlentities($_REQUEST['upload_message']);?>
<?php }?> Image file, maximum 4MB. it can be jpg, gif, png:


Description






<?php if(isset($_REQUEST['show_image']) and $_REQUEST['show_image']!=''){?>

Uploaded Image:

<?php }?> [/php]

No, im sorry it still doesnt work! I must be doing something else wrong…

OK, I think we are dealing with something really minor, as it works on my system.

Lets check a few things…

[ul][li]Does it appear to work or do you get a blank page, errors, warnings, etc?[/li]
[li]Is this script named submit.php?[/li]
[li]Are the files being saved to the folders?[/li]
[li]Is anything being written to either table?[/li][/ul]

The images do get saved to folders ok but I had a silly mistake with my form , the file is actually named submit2.php! So I changed that in my action attribut and now the correct data is written to both tables!

The only thing not working now is show.php, no images are being displayed. Any ideas on why this is?

Thanks

Looks like the problem is with your query. Try the following:[php]$q = “SELECT a.imagepath AS thumbpath, b.imagepath AS imagepath
FROM image_thumbs AS a
JOIN table_images AS b
USING(id)”;[/php]

I see one other issue - we need to remove two lines from the other code. It was saving the thumbnail version to both directories, overwriting the original. I believe this will fix it, let me know…[php]<?php
ini_set(“memory_limit”, “200000000”); // for large images so that we do not get “Allowed memory exhausted”
include ‘connect.php’;

// upload the file
if ((isset($_POST[“submitted_form”])) && ($_POST[“submitted_form”] == “image_upload_form”))
{
// file needs to be jpg,gif,bmp,x-png and 4 MB max
if (($_FILES[“image_upload_box”][“type”] == “image/jpeg” || $_FILES[“image_upload_box”][“type”] == “image/pjpeg” || $_FILES[“image_upload_box”][“type”] == “image/gif” || $_FILES[“image_upload_box”][“type”] == “image/x-png”) && ($_FILES[“image_upload_box”][“size”] < 8000000))
{
// some settings
$max_upload_width = 500;
$max_upload_height = 500;
$thumb_height = 150;
// if uploaded image was JPG/JPEG
if($_FILES[“image_upload_box”][“type”] == “image/jpeg” || $_FILES[“image_upload_box”][“type”] == “image/pjpeg”)
{
$image_source = imagecreatefromjpeg($_FILES[“image_upload_box”][“tmp_name”]);
}
// if uploaded image was GIF
if($_FILES[“image_upload_box”][“type”] == “image/gif”)
{
$image_source = imagecreatefromgif($_FILES[“image_upload_box”][“tmp_name”]);
}

    // BMP doesn't seem to be supported so remove it form above image type test (reject bmps)
    // if uploaded image was BMP
    if($_FILES["image_upload_box"]["type"] == "image/bmp")
      {
        $image_source = imagecreatefromwbmp($_FILES["image_upload_box"]["tmp_name"]);
      }
    // if uploaded image was PNG
    if($_FILES["image_upload_box"]["type"] == "image/x-png")
      {
        $image_source = imagecreatefrompng($_FILES["image_upload_box"]["tmp_name"]);
      }
    $remote_file = "image_files/".$_FILES["image_upload_box"]["name"];
    $thumb_file = "thumbs/".$_FILES["image_upload_box"]["name"];
    imagejpeg($image_source,$remote_file,100);
    chmod($remote_file,0644);
    //Save image as thumb 
    // get width and height of original image
    list($image_width, $image_height) = getimagesize($remote_file);
    if($image_width>$thumb_width || $image_height >$thumb_height)
      {
        $proportions = $image_width/$image_height;
        $new_height = $thumb_height;
        $new_width = round($thumb_height*$proportions);
        $thumb_image = imagecreatetruecolor($new_width , $new_height);
        $image_source = imagecreatefromjpeg($remote_file);
        imagecopyresampled($thumb_image, $image_source, 0, 0, 0, 0, $new_width, $new_height, $image_width, $image_height);
        imagejpeg($thumb_image,$thumb_file,100);
        imagedestroy($thumb_image);
        //add the files pathname to the database table image_thumbs
        $aname = $_POST['aname'];
        $query = "INSERT INTO image_thumbs VALUE('', '$thumb_file', '$aname')";
        $result = mysql_query($query);
        if(!$result) 
          {
            $error = 'An error occured: '. mysql_error().'<br />';
            $error.= 'Query was: '.$query;
            die($message);
          }
        $query = "SELECT `id` FROM `image_thumbs` WHERE `imagepath` LIKE '$thumb_file'";
        $result = mysql_query($query);
        if(!$result) 
          {
            $error = 'An error occured: '. mysql_error().'<br />';
            $error.= 'Query was: '.$query;
            die($message);
          }
        $q2 = mysql_fetch_assoc($result);
        mysql_free_result($result);
        $id = $q2['id'];
      }
    // get width and height of original image
    //if landscape make width 500, if portrait make height 500
    list($image_width, $image_height) = getimagesize($remote_file);
    if($image_width>$max_upload_width || $image_height >$max_upload_height)
      {
        $proportions = $image_width/$image_height;
        if($image_width>$image_height)
          {
            $new_width = $max_upload_width;
            $new_height = round($max_upload_width/$proportions);
          }
        else
          {
            $new_height = $max_upload_height;
            $new_width = round($max_upload_height*$proportions);
          }
        $new_image = imagecreatetruecolor($new_width , $new_height);
        $image_source = imagecreatefromjpeg($remote_file);
        imagecopyresampled($new_image, $image_source, 0, 0, 0, 0, $new_width, $new_height, $image_width, $image_height);
        imagejpeg($new_image,$thumb_file,100);
        //add the files pathname to the database table table_images.;,
        $query = "INSERT INTO table_images VALUE($id, '$remote_file')";
        $result = mysql_query($query);
        if(!$result) 
          {
            $error = 'An error occured: '. mysql_error().'<br />';
            $error.= 'Query was: '.$query;
            die($message);
          }
      }
    imagedestroy($image_source);
    header("Location: submit.php?upload_message=image uploaded&upload_message_type=success&show_image=".$_FILES["image_upload_box"]["name"]);
    exit;
  }
else
  {
    header("Location: submit.php?upload_message=make sure the file is jpg, gif or png and that is smaller than 4MB&upload_message_type=error");
    exit;
  }

}
?>

Image Upload with resize

body,td,th {
font-family: Arial, Helvetica, sans-serif;
color: #111111;
font-size: 12px;
}
.upload_message_success {
padding:4px;
background-color:#000000;
border:1px solid #006600;
color:#FFFFFF;
margin-top:10px;
margin-bottom:10px;
}
.upload_message_error {
padding:4px;
background-color:#CE0000;
border:1px solid #990000;
color:#FFFFFF;
margin-top:10px;
margin-bottom:10px;
}

Submit an image

<?php if(isset($_REQUEST['upload_message'])){?>
<?php echo htmlentities($_REQUEST['upload_message']);?>
<?php }?> Image file, maximum 4MB. it can be jpg, gif, png:


Description






<?php if(isset($_REQUEST['show_image']) and $_REQUEST['show_image']!=''){?>

Uploaded Image:

<?php }?> [/php]

I have a problem or 2.
The images are being saved in both folders as the large image and data is being written to table_images randomly, I mean for every say 10 images I add data is being written to the table only 2 or 3 times whereas with image_thumbs it is all getting there!

Lets try this one:[php]<?php
ini_set(“memory_limit”, “200000000”); // for large images so that we do not get “Allowed memory exhausted”
include ‘connect.php’;

// upload the file
if ((isset($_POST[“submitted_form”])) && ($_POST[“submitted_form”] == “image_upload_form”))
{
// file needs to be jpg,gif,bmp,x-png and 4 MB max
if (($_FILES[“image_upload_box”][“type”] == “image/jpeg” || $_FILES[“image_upload_box”][“type”] == “image/pjpeg” || $_FILES[“image_upload_box”][“type”] == “image/gif” || $_FILES[“image_upload_box”][“type”] == “image/x-png”) && ($_FILES[“image_upload_box”][“size”] < 8000000))
{
// some settings
$max_upload_width = 500;
$max_upload_height = 500;
$thumb_height = 150;
// if uploaded image was JPG/JPEG
if($_FILES[“image_upload_box”][“type”] == “image/jpeg” || $_FILES[“image_upload_box”][“type”] == “image/pjpeg”)
{
$image_source = imagecreatefromjpeg($_FILES[“image_upload_box”][“tmp_name”]);
}
// if uploaded image was GIF
if($_FILES[“image_upload_box”][“type”] == “image/gif”)
{
$image_source = imagecreatefromgif($_FILES[“image_upload_box”][“tmp_name”]);
}

    // BMP doesn't seem to be supported so remove it form above image type test (reject bmps)
    // if uploaded image was BMP
    if($_FILES["image_upload_box"]["type"] == "image/bmp")
      {
        $image_source = imagecreatefromwbmp($_FILES["image_upload_box"]["tmp_name"]);
      }
    // if uploaded image was PNG
    if($_FILES["image_upload_box"]["type"] == "image/x-png")
      {
        $image_source = imagecreatefrompng($_FILES["image_upload_box"]["tmp_name"]);
      }
    $remote_file = "image_files/".$_FILES["image_upload_box"]["name"];
    $thumb_file = "thumbs/".$_FILES["image_upload_box"]["name"];
    imagejpeg($image_source,$remote_file,100);
    chmod($remote_file,0644);
    //Save image as thumb 
    // get width and height of original image
    list($image_width, $image_height) = getimagesize($remote_file);
    if($image_width>$thumb_width || $image_height >$thumb_height)
      {
        $proportions = $image_width/$image_height;
        $new_height = $thumb_height;
        $new_width = round($thumb_height*$proportions);
        $thumb_image = imagecreatetruecolor($new_width , $new_height);
        $image_source = imagecreatefromjpeg($remote_file);
        imagecopyresampled($thumb_image, $image_source, 0, 0, 0, 0, $new_width, $new_height, $image_width, $image_height);
        imagejpeg($thumb_image,$thumb_file,100);
        imagedestroy($thumb_image);
        //add the files pathname to the database table image_thumbs
        $aname = $_POST['aname'];
        $query = "INSERT INTO image_thumbs VALUE('', '$thumb_file', '$aname')";
        $result = mysql_query($query);
        if(!$result) 
          {
            $error = 'An error occured: '. mysql_error().'<br />';
            $error.= 'Query was: '.$query;
            die($message);
          }
        $query = "SELECT `id` FROM `image_thumbs` WHERE `imagepath` LIKE '$thumb_file'";
        $result = mysql_query($query);
        if(!$result) 
          {
            $error = 'An error occured: '. mysql_error().'<br />';
            $error.= 'Query was: '.$query;
            die($message);
          }
        $q2 = mysql_fetch_assoc($result);
        mysql_free_result($result);
        $id = $q2['id'];
      }
    // get width and height of original image
    //if landscape make width 500, if portrait make height 500
    list($image_width, $image_height) = getimagesize($remote_file);
    if($image_width>$max_upload_width || $image_height >$max_upload_height)
      {
        $proportions = $image_width/$image_height;
        if($image_width>$image_height)
          {
            $new_width = $max_upload_width;
            $new_height = round($max_upload_width/$proportions);
          }
        else
          {
            $new_height = $max_upload_height;
            $new_width = round($max_upload_height*$proportions);
          }
      }
    $new_image = imagecreatetruecolor($new_width , $new_height);
    $image_source = imagecreatefromjpeg($remote_file);
    imagecopyresampled($new_image, $image_source, 0, 0, 0, 0, $new_width, $new_height, $image_width, $image_height);
    imagejpeg($new_image,$thumb_file,100);
    //add the files pathname to the database table table_images.;,
    $query = "INSERT INTO table_images VALUE($id, '$remote_file')";
    $result = mysql_query($query);
    if(!$result) 
      {
        $error = 'An error occured: '. mysql_error().'<br />';
        $error.= 'Query was: '.$query;
        die($message);
      }
    imagedestroy($image_source);
    header("Location: submit.php?upload_message=image uploaded&upload_message_type=success&show_image=".$_FILES["image_upload_box"]["name"]);
    exit;
  }
else
  {
    header("Location: submit.php?upload_message=make sure the file is jpg, gif or png and that is smaller than 4MB&upload_message_type=error");
    exit;
  }

}
?>

Image Upload with resize

body,td,th {
font-family: Arial, Helvetica, sans-serif;
color: #111111;
font-size: 12px;
}
.upload_message_success {
padding:4px;
background-color:#000000;
border:1px solid #006600;
color:#FFFFFF;
margin-top:10px;
margin-bottom:10px;
}
.upload_message_error {
padding:4px;
background-color:#CE0000;
border:1px solid #990000;
color:#FFFFFF;
margin-top:10px;
margin-bottom:10px;
}

Submit an image

<?php if(isset($_REQUEST['upload_message'])){?>
<?php echo htmlentities($_REQUEST['upload_message']);?>
<?php }?> Image file, maximum 4MB. it can be jpg, gif, png:


Description






<?php if(isset($_REQUEST['show_image']) and $_REQUEST['show_image']!=''){?>

Uploaded Image:

<?php }?> [/php]

It looks like you had your second db query inside your if statement that was checking if the width or height was above the maximum size.

It seems to be working well now!

Just one thing, some(only a few) off the images on my hdd upload strange now. Strange as in the thumbnail version is the size the large version should be and the large version does not resize at all!
This only happens with a few certain images, they are jpg and it is always the same one.

This is very odd I thought as it resizes other images perfectly!

Any ideads why this would be?

Thanks agaain…

Glen…

Lets try to delete all of the images and thumbs that are odd and re-upload them through the form.

One thing to remember, when you delete the files, you will want to delete them from your database tables as well.

I am not certain, but I think imagejpeg will fail if the file exists. With all the testing we have done, it is very possible a previous version of the file existed.

If it still isn’t correct, could you provide the file size and dimensions for the offending file.

Sponsor our Newsletter | Privacy Policy | Terms of Service