Four newest images 2x2 with PHP

Question

I'm trying to reuse some PHP that I found on here, but I don't have much experience with PHP and became stuck.

When uploading images from a camera and I'd like to be able to display the 4 newest images as large as possible while fitting on a screen without scrolling. 2 wide, 2 high: dividing the full screen resolution into 4 quadrants. The initial PHP prints them down in a column (by adding a break after each image in the loop), and I now have them printing horizontally as well. However, they are too small to reasonably view from a distance. I'm not sure how to print two, create a line break, and then print the last two. Or if there is a way to do it with a table and have one image in each td

Here's where I am right now:

<?php

$images = glob('images/*.{jpg,jpeg}', GLOB_BRACE); //formats to look for

$num_of_files = 4; //number of images to display

foreach($images as $image)
{
     $num_of_files--;

     if($num_of_files > -1) 
       echo "<img src="."'".$image."'".">"; 
     else
       break;
}
?>

I'm using some CSS to add z-index, but this is the basic code.

score 1 · Accepted Answer · edited May 23 '17 at 11:43

1

to print 2 and then a line break and then 2 you could use

  foreach($images as $image) {
     $num_of_files--;

     if($num_of_files > -1){
       echo '<img src="' . $image . '" id="png' . $num_of_files . '" width="50%">';
       if($num_of_files % 2 == 0)
         echo "<br />";
     }
     else
       break; 
  }

And see this SO post about sorting the glob glob() - sort by date

edited May 23 '17 at 11:43

Community

1
1

answered Nov 26 '12 at 16:18

Tad

934
6
10

That is the ticket! Fantastic and much appreciated! – Josh Wisotzkey Nov 26 '12 at 18:16

score 0 · Answer 2 · answered Nov 26 '12 at 16:00

0

Add some css;

img {
    border: 0px;
    margin: 0px;
    display: inline;
    width: 50%;
}

Would be a good start.

answered Nov 26 '12 at 16:00

lynks

5,599
6
23
42

score 0 · Answer 3 · answered Nov 26 '12 at 16:25

I've tried to clean up your code and make it a touch more generic:

<?php

$images = glob('images/*.{jpg,jpeg}', GLOB_BRACE); //formats to look for
$images_printed = 0;
$images_per_row = 2;

foreach($images as $image) {
   echo "<img src="."'".$image."'".">";
   $images_printed++;
   if ($images_printed % $images_per_row == 0) {
      echo "<br/>";
   }
}

Note that leaving off ?> at the end of your code file will prevent accidental inclusion of whitespace characters that can otherwise throw off formatting.

Four newest images 2x2 with PHP

3 Answers3