PHP image gallery

[dan3008]

Website URL

http://louises-miniature-niknacs.great-site.net/folders/?gallery=fulls

Error Message

No error message, but my thumbnails arn’t loading

Other Information

Hi everyone

So I’ve set up this page to share pictures of my wifes miniatures and similar. The problem is that whenever the page loads, the image thumbnails don’t show

This page should look similar to http://louises-miniature-niknacs.great-site.net but for some reason the thumbnails just arn’t loading.

The PHP i’m using generate the links is:

<?php
// Enable error reporting
error_reporting(E_ALL);
ini_set('display_errors', 1);

$gallery = isset($_GET['gallery']) ? $_GET['gallery'] : '';

$directory = __DIR__ . '/' . $gallery;

// Validate the gallery directory
if (is_dir($directory) && is_readable($directory)) {
    // Get all files from the directory
    $files = array_diff(scandir($directory), array('.', '..'));
} else {
    $files = [];
    echo "<p>Invalid gallery specified or directory does not exist.</p>";
}
?>

and to create the gallery:

<?php
			if ($opendir = opendir($gallery))
			{
				while(($file = readdir($opendir)) !== FALSE)
				{
					if ($file != "." && $file != ".." && $file != "info.html")
					{
						echo "<article class='thumb'><a href='$gallery/$file' class='image'><img src='$gallery/thumb/$file'></a>";
						echo "<h2>$file</h2><p></p></article>";
					}
				}
			}
		?>

Happy to share the full page code if needed.

thanks in advance
Dan

[dan3008]

Potentially found the problem. I think the thumbnails are too large. Going to run a few more tests and will confirm

[dan3008]

The problem was filesize. So I’ve updated my PHP so it automatically creates thumbnails the first time the page is loaded, and I’ve implimented lazy loading. this looks like this

<?php
// Enable error reporting
error_reporting(E_ALL);
ini_set('display_errors', 1);

$gallery = isset($_GET['gallery']) ? $_GET['gallery'] : '';

$directory = __DIR__ . '/' . $gallery;
$thumbDirectory = $directory . '/thumbs';

// Function to create thumbnails
function createThumbnail($source, $destination, $thumbWidth) {
    $img = imagecreatefromstring(file_get_contents($source));
    $width = imagesx($img);
    $height = imagesy($img);

    $new_width = $thumbWidth;
    $new_height = floor($height * ($thumbWidth / $width));

    $tmp_img = imagecreatetruecolor($new_width, $new_height);
    imagecopyresampled($tmp_img, $img, 0, 0, 0, 0, $new_width, $new_height, $width, $height);

    imagejpeg($tmp_img, $destination);
}

// Validate the gallery directory
if (is_dir($directory) && is_readable($directory)) {
    // Ensure the thumbs directory exists
    if (!is_dir($thumbDirectory)) {
        mkdir($thumbDirectory, 0755, true);
    }

    // Get all files from the directory
    $files = array_diff(scandir($directory), array('.', '..'));

    // Generate thumbnails and get file modification times
    $fileInfo = [];
    foreach ($files as $file) {
        if ($file != "thumbs" && !is_dir($directory . '/' . $file)) {
            $sourcePath = $directory . '/' . $file;
            $thumbPath = $thumbDirectory . '/' . $file;

            // Create thumbnail if it doesn't exist
            if (!file_exists($thumbPath)) {
                createThumbnail($sourcePath, $thumbPath, 150); // 150px wide thumbnail
            }

            // Get file modification time
            $fileInfo[] = ['file' => $file, 'mtime' => filemtime($sourcePath)];
        }
    }

    // Sort files by modification time, newest first
    usort($fileInfo, function($a, $b) {
        return $b['mtime'] - $a['mtime'];
    });

    $sortedFiles = array_column($fileInfo, 'file');
} else {
    $sortedFiles = [];
    echo "<p>Invalid gallery specified or directory does not exist.</p>";
}
?>

this also sorts them newest first. not that that was an issue haha.

The PHP in the main page is now:

<?php
            if (!empty($sortedFiles)) {
                foreach ($sortedFiles as $file) {
                    $filePath = htmlspecialchars($gallery . '/' . $file);
                    $thumbPath = htmlspecialchars($gallery . '/thumbs/' . $file);
                    $fileName = htmlspecialchars(pathinfo($file, PATHINFO_FILENAME));
                    echo "<article class='thumb'>
                              <a href='$filePath' class='image'><img src='$thumbPath' alt='$fileName' loading='lazy'></a>
                              <h2>$fileName</h2>
                          </article>";
                }
            } else {
                echo '<p>No files found in this gallery.</p>';
            }
        ?>