The line :
header("Content-Type: image/jpeg");
make your browser understand that your content is an image.
That's about if you select 2 images in a folder, right-click and open them. Your images will not be displayed together as if they were only one.
One way to do your job is to create a page that does 2 things :
- display an image if it has arguments
- display all images as
<img>
tags if it has no argument
Here is an example.
// The argument is set: we display one image as png
if (array_key_exists('img', $_GET)) {
$image = $_GET['img'];
// security: prevents access to unauthorized directories (by giving "../../file.jpg" as file)
$goodPath = realpath('images');
$wantedImage = realpath("images/{$image}");
if (strncmp($wantedImage, $goodPath, strlen($goodPath)) != 0) {
die();
}
// if user wants an image that does not exists, we prevent GD errors
if (!is_file($wantedImage))
{
die();
}
// and your code here, to display only ONE image
$original_image = imagecreatefromjpeg("images/{$image}");
$original_width = imagesx($original_image);
$original_height = imagesy($original_image);
$new_width = 180;
$new_height = floor($original_height * ($new_width/$original_width));
$new_image = imagecreatetruecolor($new_width, $new_height);
imagecopyresampled($new_image, $original_image, 0, 0, 0, 0, $new_width, $new_height, $original_width, $original_height);
header("Content-Type: image/jpeg");
imagejpeg($new_image);
die();
// No argument: we display all images as image tags
} else {
// security: prevents from xss exploits
$self = htmlentities($_SERVER['PHP_SELF']);
// glob will get all files that matches your pattern
$files = glob("images/*.[jJ][pP][gG]");
// display image tags
foreach ($files as $image) {
$image = htmlentities($image);
echo "<img src='{$self}?img={$image}' />";
}
die();
}