0

I'm currently trying to set up a html gallery with a php script that automaticaly resizes them an puts them into the gallery. My problem now is that there are around 30 pictures and:

  1. It takes forever to load the site.
  2. The images don't load properly. The string thats looks like binary? I don't know

Thats the only php code I'm running:

<?php
            $directory = "images/gallery/feet";
            $images = glob($directory . "/*.jpg");

            foreach ($images as $image) {

              //getting the image dimensions
              list($width, $height) = getimagesize($image);

              //saving the image into memory (for manipulation with GD Library)
              $image = imagecreatefromjpeg($image);

              // calculating the part of the image to use for thumbnail
              if ($width > $height) {
                $y = 0;
                $x = ($width - $height) / 2;
                $smallestSide = $height;
              } else {
                $x = 0;
                $y = ($height - $width) / 2;
                $smallestSide = $width;
              }
              $thumbSize = 500;
              $thumb = imagecreatetruecolor($thumbSize, $thumbSize);
              imagecopyresampled($thumb, $image, 0, 0, $x, $y, $thumbSize, $thumbSize, $smallestSide, $smallestSide);

              imagejpeg($thumb, null, 100);

              echo "<div class=\"carousel-item\">";
              echo "<img class=\"d-block w-100\" src=\"${thumb}\" />";
              echo "</div>";
            }
            ?>

Do you know what I can do?

1 Answers1

0

Don't try to run the resizing algorithm for every image with every page load, that's a stupidly expensive process.

Run it once - EVER - for each file, and stick the thumbnails in a child directory.

Then just give the link to the thumbnail image file and let your web server handle your headers so that the image is properly rendered, instead of getting the base64 string.

Something like

<?php
$directory = "images/gallery/feet";
$thmb_dir = $directory . "/thumbnail";
$images = glob($directory . "/*.jpg");

foreach ($images as $image) {

    if (/*thumbnail doesn't already exist*/) {

        //getting the image dimensions
        list($width, $height) = getimagesize($image);

        //saving the image into memory (for manipulation with GD Library)
        $image = imagecreatefromjpeg($image);

        // calculating the part of the image to use for thumbnail
        if ($width > $height) {
            $y = 0;
            $x = ($width - $height) / 2;
            $smallestSide = $height;
        } else {
            $x = 0;
            $y = ($height - $width) / 2;
            $smallestSide = $width;
        }
        $thumbSize = 500;
        $thumb = imagecreatetruecolor($thumbSize, $thumbSize);
        imagecopyresampled($thumb, $image, 0, 0, $x, $y, $thumbSize, $thumbSize, $smallestSide, $smallestSide);

        imagejpeg($thumb, null, 100);

        // Save this image w/ the same name in /thumbnails - I just made up this function name
        saveThumb($thumb, $thmb_dir);
    }

    // Grab the thumbnail with the right name - another made-up function name
    $thumb_link = getThumbLink($image)

    echo "<div class=\"carousel-item\">";
    echo "<img class=\"d-block w-100\" src=\"${thumb_link}\" />";
    echo "</div>";
}

?>

bluemoon6790
  • 367
  • 1
  • 9
  • Can you explain what you mean with the header? It was one time in a code snippet I used but caused an error. – Mauritz Funke May 29 '19 at 19:55
  • Well, you got the base64 code for the image because you didn't tell the client that that data was meant to be handled as an image. You need to tell the client that it's receiving base64 code instead of a link to an image file. Refer to this question: https://stackoverflow.com/questions/8499633/how-to-display-base64-images-in-html – bluemoon6790 May 29 '19 at 20:34
  • And by headers, I mean that your browser, by default, expects that image tag to contain the path to a file. If you supply that link, then your web server can handle defining the content type HTTP headers so you don't need to worry about sending the base64 and specifying `data:image/png;base64,` at the start of your image source. – bluemoon6790 May 29 '19 at 20:37