resize and display images from sql in php - php

Question

I am wanting to alter the following php code so that it resizes and displays images one at a time, with a 'next' and 'previous' button, in order to browse through the photos. I don't want any image gallery or lightbox solutions, rather the photos to just show on the page. I'm new to php so If someone can help out or point me in the right direction all help is appreciated.
$sql = "select * from people";
$result = mysql_query($sql) or die ("Could not access DB: " . mysql_error());
while ($row = mysql_fetch_assoc($result))
{
echo "<div class=\"picture\">";
echo "<p>";
// Note that we are building our src string using the filename from the database
echo "<img src=\"images/" . $row['filename'] . "\" alt=\"\" /><br />";
echo $row['fname'] . " " . $row['lname'] . "<br />";
echo "</p>";
echo "</div>";
source of above code

Answer 1

You can scale them in the browser using width and height attributes (or just one will maintain aspect ratio) however this is bad for many reasons including bandwidth, page performance and image quality.
You can re-size the images using libraries such as GD or Imagick
A quick sample with IMagick:
$hThumb = new Imagick($path_to_file); // Source file
$hThumb->thumbnailImage($x, $y); // You can use 300, 0 to do 300 width and maintain aspect ratio.
$hThumb->stripImage(); // remove meta data
$hThumb->writeImage($path_to_thumb); // write the image to disk
Note
Be sure to have permissions to read/write. You can verify this permissions by using is_readable and is_writable.
Loading
It's recommended to load the images using AJAX which is quite easy if using JQuery or a similar library.
$('#nextBtn').click(function() {
var index = 0; // Store this in your image ID tag perhaps
// e.g. $('#theImage').attr('id').replace('image', '')
// where ID is imageX
$.ajax({
url: 'getImages.php?index=' + index,
type: "GET",
success: function(data) {
var result = $.parseJSON(data);
if (result.success) {
// Set your image src with the new path.
// Use result.image_data.src etc...
}
}
});
});
The PHP would be relatively simple too, a structure similar to this:
<?php
$return = array('success' => false, 'image_data' => array());
if (isset($_GET['index']) && is_numeric($_GET['index')) {
// Fetch your image
$return = array(
'success' => true,
'image_data' => array(
'src' => $src,
'title' => $title,
'index' => $index
)
);
}
echo json_encode($return);
?>
** Another note **
As stated by kgb you should resize these on upload, however, they may not be user submitted so you can also check if the thumbs exist on output and generate any as required. Certainly don't generate them for every view though.

Answer 2

You should resize images on upload, not on output. Store both the original and the resized images, show small images in the list and full size when user wants it...
A sample code from imagecopyresampled() docs:
// Get new dimensions
list($width, $height) = getimagesize($filename);
$widthNew = 320; // You decide
$heightNew = 240; // You decide
// Resample
$imageNew = imagecreatetruecolor($widthNew, $heightNew);
$imageOld = imagecreatefromjpeg($filename);
imagecopyresampled($imageNew, $imageOld, 0, 0, 0, 0, $widthNew, $heightNew, $width, $height);
// Output
imagejpeg($imageNew, $newFilename, 100);
This example expects gd extension to be included with php. Imagick extension mentioned by Martin is more powerful and provides nicer interface, but is rarely included on web hostings.
Also googled this for you: http://www.9lessons.info/2009/03/upload-and-resize-image-with-php.html