Making a collage of images in PHP

[adastra]

I've never worked with creating images in PHP before, so I need some serious help here. The thing I wanna do is pretty simple though; I want to make a small collage of thumbnail images which are selected from a database; the image should show always the newest images from the DB.

I tried a simple SQL query and a "header("Content-type: image/pjpeg");" but that doesn't work, of course...

Thanks in advance!

[bpat1434]

Well, you can do it one of a few ways:

1.) Just show images the typical way as single elements and use CSS to float them all left and use a wrapper to define how large a row of them would be.

2.) Use PHP's image functions to create a large image and add photos to the large image, then display that image

Of course that all depends on (1) how you're storing the photos and (2) if you're using a standardized size for the photos.

[adastra]

Mhmm OK, I get #1, but which image function(s) exactly do I have to use and how?

I have the layout of the image ready here, now I just need this as one image instead of 6 on a php page...

[Horizon88]

Do they need to be individually linked, as in the example?

[bpat1434]

Well, you'd want to use [man]imagecreatetruecolor/man to create a new image of whatever size you wanted.

You'd want to use [man]imagecopy[/man] or [man]imagecopymerge[/man] to copy your source images into your destination. You'll likely need to use [man]getimagesize/man to give you an array of information about the image (like width & height) so you can calculate the next images' offsets (if using variable width & height images).

Then you'd want to use [man]imagejpeg[/man] or [man]imagegif[/man] or [man]imagepng[/man] to output the image to the browser, or to save it to a file and use a typical <img> tag in HTML.

[adastra]

Horizon88 wrote:

Do they need to be individually linked, as in the example?

nope, I just need a plain image that updates itself whenever there's a new album...

[Horizon88]

Then bpat's pointed you in the right direction.

[adastra]

Ok I get it, but I still have no clue how to do this. Can someone point me to some snippets or scripts or something?

[bpat1434]

So say you have 6 images, 40 x 40, that you want to make a 3x2 rectangle following typical left-to-right reading rules so that the images are tiled horizontally and wrapped to the next line. Now, we know that you'll have one image at 0,0 and another at 40,0; now you're on to the next row, so you'll position it at 0,40 and the next image is at 40,40; now you're on the last row, so you'll position it at 0,80 and the last at 40,80.

The only thing that's left is to use [man]imagecopymerge[/man] to take the source images and place them into the main canvas at specific points. For example, to make our collage statically (meaning we won't be looping anything) your image would look like:

$new = imagecreatetruecolor(80,120); // Create our canvas

// Our static positions...
$pos = array(array(0,0), array(40,0), array(0,40), array(40,40), array(0,80), array(40,80));

$height=40;
$width=40;

$white = imagecolorallocate($new, 255,255,255); // Gives us a white background

// Now, define the source images
$src = array('images/image1.gif', 'images/image2.gif', 'images/image3.gif', 'images/image4.gif', 'images/image5.gif', 'images/image6.gif');

foreach($src as $key=>$image)
{
    $old = imagecreatefromgif($image);
    imagecopymerge($new, $old, $pos[$key][0], $pos[$key][1], 0, 0, $width, $height, 100);
}

header('Content-Type: image/gif');
ImageGIF($new);

It has one small loop, but it's easy to figure out what it's doing. Now, you can adapt this to read the height and width of different images and also dynamically generate where the images should be located. But keeping images the same size(s) really simplifies things.

** Note: I have not tried that code. It may or may not work. I can only attest to it being a framework for an idea, not necessarily working code.

[masterkamlesh]

bpat1434 dear your example looks good. i need small customization like i have some images in images folder with size 200x200. now i need to create collage from them with size defined of perticular image as 50x50 to resize them and fit them in predefined canvas like 500x500 or else. in jpeg format.
[][][][]
[][][][]
[][][][]
so that it wood be like above you can check below link also for reference
https://i.imgur.com/rRPN65E.jpg

[adastra]

MHmm seems logical, but my problem now is how to get my MySQL results into that array... Any ideas?!

[bpat1434]

Query the database and create the array..... Look at [man]mysql_query[/man] and use a while loop with [man]mysql_fetch_array[/man] or [man]mysql_fetch_assoc[/man]

[bpat1434]

I'd be happy to help, but this isn't a place to request free work.

The logic behind it is pretty simple:

1. Gather a listing of all pictures in the folder (a simple glob or using the scandir to get a list)
2. Create a canvas that is 500x500 pixels in GD or ImageMagick
3. Iterate through this list, and resize them to the required size (50x50)
4. Add the newly resized image to your canvas at 50<iteration number>, 50(<iteration number>/10)

Some example code, which I have not tested and is only meant to show an example, would be something like:

<?php
// Get list of all JPG files in a particular path
$files = glob('/path/to/my/folder/*.jpg');
// Create a canvas for the collage
$canvas = imagecreate(500, 500);
// Hold a row counter
$row=0;
// Start iterating over files that will make up the collage
for ($i=0; $i<count($files); $i++) {
    // If $i isn't 0, and is divisible by 10, increment the row counter
    if ($i>0 && $i%10 == 0) { $row++; }
    $original = imagecreatefromjpeg($files[$i]);
        
    // Option A: Scale image yourself first and add to collage
    $scaled = imagescale($original, 50, 50);
    imagecopymerge($canvas, $scaled, 50*$i, 50*$row, 0, 0, 50, 50, 100);
    
    // Option B: Copy and scale at the same time
    list($width, $height) = getimagesize($files[$i]);
    imagecopyresampled($canvas, $original, 50*$i, 50*$row, 0, 0, 50, 50, $width, $height);
    
    // Free up memory
    imagedestroy($original);
}
// output the image
header('Content-Type: image/jpeg');
imagejpeg($canvas);
// Free up memory
imagedestroy($canvas);

Hope that helps you.

[masterkamlesh]

bpat1434 i am really happy to see that you helpmed me without any reason. i checked the answer and its pretty cool. but its only showing 10 images in first row and other rows are blank.... can you please move a little bit more.. thanks. also images are showing in some unknown color 😀 like below image
https://imgur.com/ZtoCZcL
you can send me help code on [e-mail] if you feel so

[cluelessPHP]

I'm on phone currently but you should be able to change

f ($i>0 && $i%10 == 0)

To something like

f ($i>0 && $i%20 == 0)

I guess

[masterkamlesh]

cluelessPHP no sir still not working 🙁

[bpat1434]

@masterkamlesh This is a site to help you get to a solution, not a "do it for me" site.

The error is that the pictures are being brought in on subsequent rows, but they're being placed off the canvas because the X position is now set at 500 or 550 or 600 etc.

So to fix it, you just need to add an "x-offset" variable that resets with each increment of the $row variable. Then use the "x-offset" variable as the multiplier when calculating the "x" position in the call to imagecopymerge or imagecopyresampled.

[masterkamlesh]

bpat1434 your solution is awsome and your hint really worked. here is working code. the only issue is images are getting color inbalanced. dont know why wheter we have not manipulated them.. you can check result output below image
https://imgur.com/a/8bVdZVW

<?php
    // Get list of all JPG files in a particular path
	$directory = "images";
    $files = glob($directory.'/*.jpg');
    $image_count = count($files);
    // Create a canvas for the collage
    $canvas_width=$canvas_height=500;
    $images_per_row = 5;
    $image_width = $image_height =  $canvas_width / $images_per_row;
    /* echo "$image_width------$images_per_row-------$image_rows.";
     exit;*/
    $canvas = imagecreate($canvas_width, $canvas_height);
    // Hold a row counter

    $row=0;
    $xoffset=0;
    // Start iterating over files that will make up the collage
    for ($i=0; $i<count($files); $i++) {
        // If $i isn't 0, and is divisible by 10, increment the row counter
        if ($i>0 && $i%5 == 0) { $row++; $xoffset=0; }
        $original = imagecreatefromjpeg($files[$i]);

        
        // Option A: Scale image yourself first and add to collage
        $scaled = imagescale($original, $image_width, $image_height);
        imagecopymerge($canvas, $scaled, $image_width*$xoffset, $image_width*$row, 0, 0, $image_width, $image_height, 100);
        
     /*   // Option B: Copy and scale at the same time
        list($width, $height) = getimagesize($files[$i]);
        imagecopyresampled($canvas, $original, $image_width*$xoffset, $image_width*$row, 0, 0, $image_width, $image_height, $width, $height);*/
        
        // Free up memory
        imagedestroy($original);
        $xoffset++;
    }
    // output the image
    header('Content-Type: image/jpeg');
    imagejpeg($canvas);
    // Free up memory
    //imagedestroy($canvas);

[ShashankSagar]

I have got a similar problem. I need my team members on my homepage to show in a collage. Any ideas how do I make them stick together? The homepage's link is 'https://idealproduction.in/
thanks

[Weedpacket]

That would be because you're using imagecreate to create your canvas, which creates 256-colour pallet-based images, instead of the recommended imagecreatetruecolor (see the description of the imagecreate function for details).

[masterkamlesh]

Weedpacket wow. it worked 😃 thank you so much. Can we define auto fill of size and number of thumbnail according to images count.
like if i have 20 images then it will become 5x4 matrics. and if we have 19 image then last image will be filled in two blocks so that it will look filled not empty. i think you got my point