Making a collage of images in PHP

[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]

[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

[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