php make if statement return new row from table

Question

This may be a silly question but not sure of a better way to do this at the moment - I am open to suggestions to a different way!

I have a webpage where I want simply post a collage of photos such as here. I have a MySQL database storing the location of all of my photos. I want these photos to be automatically loaded through a php if loop, i have this code:

$sql = "SELECT * FROM photo_gallery ORDER BY RAND()";
$result = mysqli_query($conn, $sql);
$queryResults = mysqli_num_rows($result);

if ($queryResults > 0) {
while ($row = mysqli_fetch_assoc($result)) {
  echo "
<img src='/".$row['location']."' style='width:100%'>
    ";
}}

And this code works fine to load random photo saved in my database with no repeats. However, the way I have the photo gallery set up (if you view the w3schools template) the gallery is set up in 4 columns and this code can only be used to loop through photos once meaning only one column is shown. if I copy this code into each column it will obviously just cycle through the same photos it already had in the previous column (I want no-repeat photos)

Bottom line, how can I make a php loop through random photos with no repeats in a responsive photo gallery such as the w3schools?

use a grid framework like bootstrap, then is simple as putting a `col-3` on your div, or use CSS flex https://stackoverflow.com/questions/29546550/flexbox-4-items-per-row .. or use modulo to make columns split at 4 (not ideal) https://3v4l.org/HRTDe — Lawrence Cherone, Oct 28 '21 at 21:45
Please provide a small example or snippet of your DB table. For example, does it have an ID column? Depending on how many photos you want to get, you can make an Array, collect photos, if the ID of a photo is already in the array, get another photo. Then you can build the HTML or send back the Array. — Twisty, Oct 28 '21 at 22:24

Tangentially Perpendicular · Answer 1 · 2021-10-28T22:19:23.923

Split the images into four columns as you read them from the database:

// Somewhere to store the HTML for each column as we create it,
$columnHTML = ['','','','']

// Pointer to the next column
$nextColumn = 0;

$sql = "SELECT * FROM photo_gallery ORDER BY RAND()";
$result = mysqli_query($conn, $sql);
$queryResults = mysqli_num_rows($result);

if ($queryResults > 0) {
    while ($row = mysqli_fetch_assoc($result)) {
      // Add the image tag to the column HTML
      $columnHTML[$nextColumn] .= "<img src='/".$row['location']."'style='width:100%'>";
      // Move to next column, modulus 4
      $nextColumn = ($nextColumn+1)%4;
}}
// Now output the result
echo '<div class="row"><div class="column">'.implode('</div>
  <div class="column">', $columnHTML).' </div></div>'

This assumes the structure shown on the W3Schools page.

Disclaimer: I haven't actually run this.

I think you may have been stuck in javascript mode when you wrote this ;) `'string'.join`, `columnHTML` — Jacob Mulquin, Oct 28 '21 at 21:58
@Jacob It happens. That's what I get for not editing this in my IDE first! Fixed, along with a missing `$`. Thanks! — Tangentially Perpendicular, Oct 28 '21 at 22:21

score 0 · Answer 2 · answered Oct 28 '21 at 22:19

You can do something like this.

<?php
$sql = "SELECT * FROM photo_gallery ORDER BY RAND()";
$result = mysqli_query($conn, $sql);
$queryResults = mysqli_num_rows($result);

$imageArray1 = [];
$imageArray2 = [];
$imageArray3 = [];
$imageArray4 = [];

$count = 0;

// preparing image arrays
if ($queryResults > 0) {
    while ($row = mysqli_fetch_assoc($result)) {
        $pointer = $count%4;

        // you can use a switch instead of the IF statements if you want!
        if ($pointer == 0){
            $imageArray1[] = $row['location'];
        }
        else if ($pointer == 1){
            $imageArray2[] = $row['location'];
        }
        else if ($pointer == 1){
            $imageArray3[] = $row['location'];
        }
        else{
           $imageArray4[] = $row['location'];
        }
    }
}
?>

<!-- HTML Output -->
<div class="row">
   <div class="column">
      <?php
          foreach($imageArray1 as $image1){
              echo("<img src='".$image1."' style='width:100%'>");
          }
      ?>
   </div>
   <div class="column">
      <?php
          foreach($imageArray2 as $image2){
              echo("<img src='".$image2."' style='width:100%'>");
          }
      ?>
   </div>
   <div class="column">
      <?php
          foreach($imageArray3 as $image3){
              echo("<img src='".$image3."' style='width:100%'>");
          }
      ?>
   </div>
   <div class="column">
       <?php
          foreach($imageArray4 as $image4){
              echo("<img src='".$image4."' style='width:100%'>");
          }
      ?>
   </div>
</div>

Twisty · Answer 3 · 2021-10-29T00:11:48.840

Consider the following.

<?php
function getRandomImage($limit = 1){
  $sql = "SELECT DISTINCT location FROM photo_gallery ORDER BY RAND() LIMIT $limit";
  $result = mysqli_query($conn, $sql);
  $queryResults = mysqli_num_rows($result);
  $images = [];

  if ($queryResults > 0) {
    while ($row = mysqli_fetch_assoc($result)) {
      array_push($row);
    }
  }

  return $images;
}

$allImgs = getRandomImage(24);

// $allImgs now contains an array of 24 unique random images

echo "<div class='row'>\r\n<div class='column'>\r\n";
foreach($allImgs as $i => $image){
  // Iterate all the Images
  // 24 / 6 = 4, make 4 columns of 6
  // Adjust the Modulus for your needs
  if($i % 6 === 0 && $i !== 0){
    echo "</div>\r\n<div class='column'>\r\n";
  }
  echo "<img src='$image' />\r\n";
}
echo "</div>\r\n</div>\r\n";
?>

This should give you 4 columns with 6 random unique images in each. The rest is handled by CSS.

Marsellus · Answer 4 · 2021-10-30T03:18:34.207

If your code works to output images, and you just want them as a grid, then CSS Grid what you're looking for.

Check out https://www.w3schools.com/css/css_grid.asp for more options on spacing, but here's a basic 4x grid that will keep outputting as long as you keep giving it images:

Modify what you're echoing:

if ($queryResults > 0) {
  echo '<ul class="image-gallery">';
  while ($row = mysqli_fetch_assoc($result)) {
    echo "
      <li class="single-image">
        <img src='/".$row['location']."'>
      </li>
    ";
  }
  echo "</ul>";
}

Then for styling, add display:grid; to the parent wrapper 'image-gallery' and style the individual images with a little box-shadow if you want them to pop. https://www.w3schools.com/css/css3_shadows_box.asp

<style>
  .image-gallery {
    list-style: none;
    display: grid;
    grid-template-columns: auto auto auto auto; // this is what makes it 4x
    grid-row-gap: 10px;
    grid-column-gap: 10px;
    padding: 10px;
  }

  .single-image {
    margin: 5px;
    box-shadow: 0 1px 4px 0 rgba(0, 0, 0, 0.1), 0 2px 8px 0 rgba(0, 0, 0, 0.1);
  }
</style>

php make if statement return new row from table

4 Answers4