thumbnail generation

Chud37

Hello All,

Im new to this forum, and i've been coding PHP for a few years now. Anyway, enough of my history, I've recently discovered the GD libraries, and I've got a page where i want to create a grid of dynamically generated thumbnails. Long and short of it is, Its a gallery with the ability to comment, however, when i display the thumbnails, I want the thumbnail image to be dynamically created with a little circle and a number displaying the amount of comments in it. However, when I parse the page, I end up with the last thumbnail and the last number generated for all the thumbnails (if that makes any sense) - it seems that I can only use one session variable for each page.

the code for the thumbnail.php is:

<?php 
session_start();
header("Cache-Control: no-store, no-cache, must-revalidate");  

header("Cache-Control: post-check=0, pre-check=0", false); 
header("Pragma: no-cache");  

$comments = $_SESSION['howManyComments'];
$tmpImg = $_SESSION['ImgRef'];

$im = @ImageCreateFromPNG($tmpImg);  

$circ = @ImageCreateFromPNG("img/circle.png");
$bg = ImageColorAllocateAlpha($im,0,0,0,127);

ImageCopy($im,$circ,68,48,0,0,31,20);

//Three Letters (999)
//ImageString($im,3,77,51,"99",ImageColorAllocate($im,0,165,8)); 		
//Two Letters (99)
//ImageString($im,3,80,51,"9",ImageColorAllocate($im,0,165,8)); 		
//One Letter
ImageString($im,3,73,51,$comments,ImageColorAllocate($im,0,165,8)); 		

imagealphablending($im, false);
imagesavealpha($im, true);


Header ('Content-type: image/png'); 
imagePNG($im);
ImageDestroy($im); 
?>

I could do with either:
1. A better way to pass variables into Thumbnail.php (called by an IMG SRC)
2. an answer.

😛

Any help is greatly appreciated.
~Chud37

bradgrafelman

Maybe I'm not understanding you correctly, but assuming you have some way to identify each gallery in the grid (e.g. some gallery ID, or whatever you're using to populate this "ImgRef" entity), why not just pass it in the URL rather than a session? Simple example:

<img src="thumbnail.php?gallery=foobar">

which would invoke your thumbnail.php script on the gallery image for "foobar".

Chud37 wrote:
i want to create a grid of dynamically generated thumbnails.

I sure hope your site doesn't get very much traffic, otherwise you're probably going to see this thumbnail script taking up a lot of resources. (See my next comment below for a possible resolution.)

Chud37 wrote:
I want the thumbnail image to be dynamically created with a little circle and a number displaying the amount of comments in it.

Okay, but why wouldn't you just use some simple CSS to display text on top of the image?

Chud37 wrote:
it seems that I can only use one session variable for each page.

I'm not sure what you mean there. You can use any number of session variables you like, but a string variable can only hold one string value at a time... that's a basic property of PHP (or any other language, really). If it held multiple values, then it'd be an array (back to talking in PHP terms only).

NogDog

My first thought would be to pass the information via the URL query string and get it from $GET instead of $SESSION. If you prefer to use session data, though, you could make it multi-dimensioned and just pass the necessary index via the <img> src value:

<img src='path/to/thumbnail.php?ix=<?php echo $ix; ?>' alt='' />

Then your $SESSION array might be something like:

$_SESSION['thumbs'][1]['howManyComments'] = 6;
$_SESSION['thumbs'][1]['ImgRef'] = 'whatever goes here';

$_SESSION['thumbs'][2]['howManyComments'] = 6;
$_SESSION['thumbs'][2]['ImgRef'] = 'whatever goes here';

// and so forth...

Then in the thumbnail script:

$ix = (isset($_GET['ix'])) ? (int) $_GET['ix'] : null;
if(!is_null($ix) and !empty($_SESSION['thumbs'][$ix]))
{
   $comments = $_SESSION['thumbs'][$ix]['howManyComments'];
   $tmpImg = $_SESSION['thumbs'][$ix]['ImgRef']; 
   // rest of code
}
else
{
   // error handling here
}

Chud37

Okay... I didnt explain myself very well at all. Anyhow, you are right, there are different $gallery (s) and I did think about using CSS, but to be honest i couldnt be bothered with the hassle. And i was quite excited about the prospect of using the GD libraries as they were quite new to me.

Here is the code that has the $gallery variable set, and outputs the thumbnails found in that directory:

$counter = 0;
                    		    foreach ($Thumbfiles as $value) 
                    		    		{
                   		    	    		echo "<td align=\"center\">\n";
                    		    			$link="$rootsite/$rootpage?p=$page&g=$gallery&img=$counter#scroll";
                    		    			$thumb="$rootsite/img/$galleryDir/$gallery/Thumbnails/" . $value;

                					$valTmp = strtoupper(substr($value,0,strlen($value)-4));
              					$howManyComments = 0;
                					foreach ($dbImgName as $dbImg)
                		    				{
                		    					$dbTmp = strtoupper(substr($dbImg,0,strlen($dbImg)-4));
                		    					if($dbTmp == $valTmp) {
                		    					$howManyComments++;}
                		    				}	
                		    				//if ($howManyComments > 0) 
                		    				//{
                		    					//$_SESSION['howManyComments'] = $howManyComments;
                		    					//$thumb="../img/$galleryDir/$gallery/Thumbnails/" . $value;
                		    					//$_SESSION['ImgRef'] = $thumb;
                		    					//echo "H:" . $_SESSION['ImgRef'];

                		    					//echo "<a href=\"$link\">\n<img src=\"pages/thumbNail.php\" border=0 alt=\"Thumbnail\"></a></td>\n";
                		    				//} else {echo "<a href=\"$link\">\n<img src=\"$thumb\" border=0></a></td>\n";}
                		    						//If the image is found in the database, that means there are comments on it.
                   		    					//Therfore we dont output the originl image, but we do summink fancy and make a new image
                		    						//with the number of comments on it! Wow!
                		    			echo "<a href=\"$link\">\n<img src=\"$thumb\" border=0></a>";
                		    			if($howManyComments>=1) {echo "<br><font face=\"Tahoma\" size=1>$howManyComments Comments</font></td>\n";}
                		    			$counter++;
                					if (($counter % 4 == 0) && ($counter != 0)) {echo "</tr>\n";}    
                					//unset($_SESSION['howManyComments']); 
                					//unset($_SESSION['ImgRef']); 

                				}
                		    echo "</table>";

I've REM'd out the bit which would call the thumbNail.php image, as when I had it working, it would output the last thumb and the last number. So, say i had 3 images, different amount of comments, and different thumbnails, and the last image was b.png, and the last amount of comments was 3, all the images would be b.png and the number contained would be 3.

I hadnt thought about posting it in the URL, its worth ago. I did consider that it might take years to process such a page, but i wanted to try it first and take it from there. Unfortunately, you might be right, and i might have to use CSS. Mind you, at the moment, i just have a line underneath the image saying '1 Comments', lol, so i might leave it that 😛

~Chud37

Chud37

just to note, i echo'd the session variables each time, and they changed correctly, but the thumbnail.php image didnt. Its got to be something to do with the way server side and client side scripting works? surley, the images get processed after all the PHP is processed and thats why I only end up with the remaining figures?

bradgrafelman

Chud37 wrote:
I did think about using CSS, but to be honest i couldnt be bothered with the hassle.

Er... so you're saying writing this:

<div class="numComments">37</div>

as well as a few (short) lines of CSS to position that div over an image is more of a "hassle" than the big jumble of PHP code you've got going thus far? :p

Chud37 wrote:
surley, the images get processed after all the PHP is processed and thats why I only end up with the remaining figures?

I think the issue is that you're not understanding how the WWW works.

Your PHP script above is executing on the server, looping through the galleries and setting/changing the value of $_SESSION as it goes. The resulting data (HTML markup) is sent to the client's browser, and that's it - the transaction is complete. PHP then saves all session data to disk as your script ends.

The client's browser, which received the output of your PHP script, then parses the HTML markup to build the page you see. While doing so, it encounters the <img> tag that points to your thumbnail script, so it makes a separate request for that image. This separate request fires up your thumbnail script, which then loads the session data from disk, does whatever it needs to do, then terminates. Rinse, lather, and repeat for all other <img> tags that the browser encounters.

Perhaps now do you see where your error is? You seem to think that between each time you update the session data, the client's browser is busy making requests for the thumbnail data at the same time.

bradgrafelman

Chud37 wrote:
I did think about using CSS, but to be honest i couldnt be bothered with the hassle.

Er... so you're saying writing this:

<div class="numComments">37</div>

as well as a few (short) lines of CSS to position that div over an image is more of a "hassle" than the big jumble of PHP code you've got going thus far? :p

Chud37 wrote:
surley, the images get processed after all the PHP is processed and thats why I only end up with the remaining figures?

I think the issue is that you're not understanding how the WWW works.

Your PHP script above is executing on the server, looping through the galleries and setting/changing the value of $SESSION as it goes. The resulting data (HTML markup) is sent to the client's browser, and that's it - the transaction is complete. PHP then saves all session data (at that specific point in time - think of it as a snapshot of the $SESSION array's contents) to disk as your script ends.

Perhaps now do you see where your error is? You seem to think that between each time you update the session data, the client's browser is busy making requests for the thumbnail data at the same time.