Hi everyone.
Hopefully this will be the last thing that I need to do to my shopping cart.
Basically I have a product details and it gives me the actual picture in its actual size.
In order to look more neat, I want to make the pictures to be like thumbnails ie all the pictures to be the same size (let's say 270x220) but when you click on it the image to be shown in the actual size (actually the PerttyPhoto already does that) .
Right now, when you click on the image, the PrettyPhoto script makes it very nice and I want it to stay that way.
I found a code which should make thumbnails:

function createThumbnail($filename) {  
  
    require 'config.php';  
  
    if(preg_match('/[.](jpg)$/', $filename)) {  
        $im = imagecreatefromjpeg($path_to_image_directory . $filename);  
    } else if (preg_match('/[.](gif)$/', $filename)) {  
        $im = imagecreatefromgif($path_to_image_directory . $filename);  
    } else if (preg_match('/[.](png)$/', $filename)) {  
        $im = imagecreatefrompng($path_to_image_directory . $filename);  
    }  
  
    $ox = imagesx($im);  
    $oy = imagesy($im);  
  
    $nx = $final_width_of_image;  
    $ny = floor($oy * ($final_width_of_image / $ox));  
  
    $nm = imagecreatetruecolor($nx, $ny);  
  
    imagecopyresized($nm, $im, 0,0,0,0,$nx,$ny,$ox,$oy);  
  
    if(!file_exists($path_to_thumbs_directory)) {  
      if(!mkdir($path_to_thumbs_directory)) {  
           die("There was a problem. Please try again!");  
      }  
       }  
  
    imagejpeg($nm, $path_to_thumbs_directory . $filename);  
    $tn = '<img src="' . $path_to_thumbs_directory . $filename . '" alt="image" />';  
    $tn .= '<br />Congratulations. Your file has been successfully uploaded, and a      thumbnail has been created.';  
    echo $tn;  
}

and the code that need to be in the index:

<?php  
  
require 'config.php';  
require 'functions.php';  
  
if(isset($_FILES['fupload'])) {  
  
    if(preg_match('/[.](jpg)|(gif)|(png)$/', $_FILES['fupload']['name'])) {  
  
        $filename = $_FILES['fupload']['name'];  
        $source = $_FILES['fupload']['tmp_name'];  
        $target = $path_to_image_directory . $filename;  
  
        move_uploaded_file($source, $target);  
  
        createThumbnail($filename);  
    }  
}  
?>

But the thing is, since I take my pictures from the database I don't know how to make this code work for me.
My code is this:

<td cless="productWrap">
  <td class="productItem">
  <a class="productImage" href="<?php echo $pd_image; ?>" rel="prettyPhoto" title="<?php echo $pd_name;?>">
  <img src="<?php echo $pd_image; ?>" alt="<?php echo $pd_name; ?>">
  </a>
  </td>
</td>

Please help.

Recommended Answers

All 19 Replies

Oh and the config.php should be something like this:

$final_width_of_image = 100;  
$path_to_image_directory = 'images/fullsized/';  
$path_to_thumbs_directory = 'images/thumbs/';

Show your thumbnail image or what ? What's wrong with the codes ?

The thing is, the codes look fine, but I can't make it to take the image from the database. My images are in the database, and I don't know how to make the thumbnails.
And also, the image is $pd_image and I do not need to upload it again. Just to take the image from the database and resize it to 270x220. The PrettyPhoto script will do the rest.

Query your image from the table and pass this into the function argument where you want to do.

Below is sample:

$sql = "SELECT * FROM image_table WHERE image_id = 123 ORDER BY image_id DESC LIMIT 1";
$row = mysql_query($sql);
$image = mysql_fetch_assoc($row);

//pass the image to the function parameter
createThumbnail($image);

Isn't what you want ?

Oh, I know that.
The thing is, is there a more simple way for creating thumbnails without all of that files?
and also how to combine the createThumbnail($pd_image); with the:

<td cless="productWrap">
  <td class="productItem">
  <a class="productImage" href="<?php echo $pd_image; ?>" rel="prettyPhoto" title="<?php echo $pd_name;?>">
  <img src="<?php echo $pd_image; ?>" alt="<?php echo $pd_name; ?>">
  </a>
  </td>
</td>

The thing is, is there a more simple way for creating thumbnails without all of that files?

What do you mean for that question ? Another way to create thumbnail, perhaps with a few line codes ?

And what do you want to combine with those statements ?
Maybe, are you want to create multiple thumbnails and display in the page ?

Yes, is there a way to create a thumbnail with few lines in only one file.
Or at least to make a different files but to be easily incorporated into mu productDetails.php.
The lines are from my productDetails.php where the picture is taken from the database and shown as it is. The full code is this:

<link href="./css/style.css" rel="stylesheet" type="text/css" />
<link href="./css/jquery.cycle.css" type="text/css" rel="stylesheet" />
<link href="./css/prettyPhoto.css" type="text/css" rel="stylesheet" />

<script type="text/javascript" src="./js/jquery-1.5.2.min.js"></script>
<script type="text/javascript" src="./js/jquery.easing.1.3.js"></script>
<script type="text/javascript" src="./js/jquery.tools.min.js"></script>
<script type="text/javascript" src="./js/jquery.prettyPhoto.js"></script>
<script type="text/javascript" src="./js/contact.js"></script>
<script src="./js/jquery.cycle.js" type="text/javascript"></script>
<script src="./cufon/cufon-yui.js" type="text/javascript"></script>
<script src="./cufon/geoFont.js" type="text/javascript"></script>
<script type="text/javascript" src="./js/myScript.js"></script>

<?php
header ('Content-type: text/html; charset=utf-8');
require_once 'utf.php';
if (!defined('WEB_ROOT')) {
	exit;
}

$product = getProductDetail($pdId, $catId);

// we have $pd_name, $pd_price, $pd_description, $pd_image, $cart_url
extract($product);
?> 
<table width="100%" border="0" cellspacing="0" cellpadding="10">
 <th> 
  <td cless="productWrap">
  <td class="productItem" style="opacity: 1;">
  <a class="productImage" href="<?php echo $pd_image; ?>" rel="prettyPhoto" title="<?php echo $pd_name;?>" style="opacity: 1;">
  <img src="<?php echo $pd_image; ?>" alt="<?php echo $pd_name; ?>">
  </a>
  </td>
</td>
  <td valign="middle">
<h4><strong><?php echo $pd_name; ?></strong><br></h4>
Price: <?php echo displayAmount($pd_price); ?><br>
<br>
<?php
// if we still have this product in stock
// show the 'Add to cart' button
if ($pd_qty > 0) {
?>
<input type="button" name="btnAddToCart" value="" onClick="window.location.href='<?php echo $cart_url; ?>';" class="addToCartButton">
<?php
} else {
	echo 'Продукта не е в наличие';
}
?>
  </td>
 </th>
 <th align="left"> 
  <td colspan="2"><h4><?php echo $pd_description; ?></h4></td>
 </th>
</table>

You may not need to create thumbnails, you can crop the image how much as you need. And you don't also need to include/import any file inside your page. Check out here.

Hook your image with the file and it'll automatically crop your image as thumbnail without cloning or duplicating. Just simply hook with that file like:

<img src="http://yoursite.com/resizer.php?width=110&height=110" />

Easily customize your thumb size as well as you're.
Hope this help!

It looks like easy and nice script, but I have a problem.
It may sound stupid, but I just can't make it 'hook' together. I suppose this is because my code uses php to extract and show the image from the database.
Can you please show me how to hook my <img src="<?php echo $pd_image; ?>" with the script?

Copy this file to your site and keep under your web folders anywhere. For example, you named this file to 'resize.php' and keep it under the main root. Then call this file with the following:

http://www.yoursite.com/resize.php //absolute path
resize.php                         //relative path

Then, hook with your image as parameter including width,height (etc.), following the references on their site. As following your codes:

<td cless="productWrap">
<td class="productItem" style="opacity: 1;">
<a class="productImage" href="<?php echo $pd_image; ?>" rel="prettyPhoto" title="<?php echo $pd_name;?>" style="opacity: 1;">
<img src="http://www.yoursite.com/resize.php/<?php echo $pd_image; ?>?width=180&height=180&image=<?php echo $pd_image; ?>" alt="<?php echo $pd_name; ?>">
</a>
</td>

You can test manually on the browser with the following URL: http://www.yoursite.com/resize.php/yourimage.jpg?width=110&height=110&image=path_to_image/image.jpg Hope this help!

For some reason, it didn't worked.
The image url actually looks good:

http://www.example.com/image.php//images/product/ea723c7a2658ac701a45a583986b5da4.jpg?width=180&height=180&image=/images/product/ea723c7a2658ac701a45a583986b5da4.jpg

But when I go to the url from my browser it gives me this error:

Warning: file_exists() [function.file-exists]: open_basedir restriction in effect. File(/usr/local/apache/htdocs/images/product/ea723c7a2658ac701a45a583986b5da4.jpg) is not within the allowed path(s): (/home/:/usr/lib/php:/tmp) in /home/a3694407/public_html/image.php on line 96

Error: image does not exist: /usr/local/apache/htdocs/images/product/ea723c7a2658ac701a45a583986b5da4.jpg //actually the image exists

Here is the line 96 on which the problem occurs:

// Strip the possible trailing slash off the document root
$docRoot	= preg_replace('/\/$/', '', DOCUMENT_ROOT);

if (!file_exists($docRoot . $image)) //this is the line 96
{
	header('HTTP/1.1 404 Not Found');
	echo 'Error: image does not exist: ' . $docRoot . $image;
	exit();
}

Do you know what's wrong with it?

Oh no no.
I've just wrote example.com as an example, but really I use my domain.
Thankfully, I'm not THAT stupid:-)
Or you think something is wrong with the link?
Sorry but I didn't get your point:-)

Oh I see. I get your point.
But the thing is my code:

<td cless="productWrap">
<td class="productItem" style="opacity: 1;">
<a class="productImage" href="<?php echo $pd_image; ?>" rel="prettyPhoto" title="<?php echo $pd_name;?>" style="opacity: 1;">
<img src="http://www.yoursite.com/resize.php/<?php echo $pd_image; ?>?width=180&height=180&image=<?php echo $pd_image; ?>" alt="<?php echo $pd_name; ?>">
</a>
</td>

Gives this image url:

http://www.example.com/image.php//images/product/ea723c7a2658ac701a45a583986b5da4.jpg?width=180&height=180&image=/images/product/ea723c7a2658ac701a45a583986b5da4.jpg

Instead of

http://www.example.com/image.php?width=180&height=180&image=http://www.example.com/images/product/ea723c7a2658ac701a45a583986b5da4.jpg

I suppose the problem is here:

<img src="http://www.example.com/resize.php/<?php echo $pd_image; ?>?width=180&height=180&image=<?php echo $pd_image; ?>"

Because after width=180&height=180&image= it doesn't take you to the www.example.com/images/product..... but straight to the /images/ product. Should I put example.com after echo? Like this: ...=180&image=<?php echo example.com . $pd_image; ?>" or something like that? Will it work?

It doesn't work with relative URL, I tested it. Use by following.

yoursite_url/resize.php?width=180&height=180&image=yoursite_url/image_path/image

No slash '/' after the 'resize.php'. Use '?' and parameters follow by that. The above is correct way.
Hope this help.

Oh I must give you reputation for the effort:-)
But no, it still doesn't work.
I've changed the code by your suggestion to:

<td cless="productWrap">
<td class="productItem" style="">
<a class="productImage" href="<?php echo $pd_image; ?>" rel="prettyPhoto" title="<?php echo $pd_name;?>" style="">
<img src="http://www.example.com/resize.php?<?php echo $pd_image; ?>?width=180&height=180&image=<?php echo $pd_image; ?>" alt="<?php echo $pd_name; ?>">
</a>
</td>

Am I doing something wrong again?
Sorry for the bothering. This took too long.

Is '$pd_image' already has absolute URL including your host, domain (e.g., www.example.com/images/image.jpg).If so, let me do it:

<img src="http://www.example.com/resize.php?width=180&height=180&image=<?php echo $pd_image; ?>" alt="<?php echo $pd_name; ?>" />

The above should work if '$pd_image' has absolute path to the image (eg.,http://www.example.com/images/). If not concatenate it by following:

<img src="http://www.example.com/resize.php?width=180&height=180&image=http://www.example.com/<?php echo $pd_image; ?>" alt="<?php echo $pd_name; ?>" />

You're wrong way to use: resize.php?<?php echo $pd_image; ?>? The image file only need to pass after 'image=' parameter.

You know, the interesting thing is that the image url looks fine.
I've tried both of the codes that you gave me above. I actually think that the second might work but it didn't. After I right clicked on the image and copied the URL it gives me this URL:

http://www.example.com/resize.php?width=180&height=180&image=http://www.example.com/images/product/ea723c7a2658ac701a45a583986b5da4.jpg

And the funny thing is, that is EXACTLY where the file should be.
After i tried the image url I gave me the error that something is wrong on like 96. So maybe in the resize.php is the problem, not in our code.
Tomorrow I will continue to make this work, because right now, I'm so tired.
THANK YOU for all the help:-)

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.