php make if statement return new row from table-CodePudding

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?

CodePudding user response：

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 ><div >'.implode('</div>
  <div >', $columnHTML).' </div></div>'

This assumes the structure shown on the W3Schools page.

Disclaimer: I haven't actually run this.

CodePudding user response：

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>

CodePudding user response：

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.

CodePudding user response：

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 >';
  while ($row = mysqli_fetch_assoc($result)) {
    echo "
      <li hljs-string">">
        <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>