photo grid using masonry and PHP to retrieve photo from database

Question

i'm new to coding I wanted to use Masonry to make my pictures to arranged like pinterest home page but I don't seems to understand how the Masonry code works.

Here is my pictures and my code.

1

I was able to retrieve all the image from the database but all the pictures stuck at the left side of the screen. What I want the page to look like this 2

<?php
// Create database connection
$db = mysqli_connect("localhost", "root", "", "drawingguide");


$sql = "SELECT * FROM images";
$result = mysqli_query($db, "SELECT * FROM images");

?>

<html>
<head>
<style>
.grid-item { width: 200px; }
.grid-item--width2 { width: 400px; }
</style>
    <script src="https://unpkg.com/masonry-layout@4/dist/masonry.pkgd.js"></script>
</head>
<?php
    while($row = mysqli_fetch_array($result)) {
echo "<div id='container'>";
echo "<img class='item' src='images/{$row['image']} ' />";
echo "</div>";
    }

mysqli_close($db);
?> 

 </html>

Welcome to Stack Overflow! Can you elaborate on how your code "doesn't work"? What were you expecting, and what actually happened? If you got an exception/error, post the line it occurred on and the exception/error details. Please [edit] these details in or we may not be able to help. — Goodbye StackExchange, Aug 10 '18 at 05:27

Kunal · Answer 1 · 2018-08-10T09:24:27.977

1

According to this url https://masonry.desandro.com/ first you have to make proper HTML structure then CSS and jQuery.

    <?php
    // Create database connection
    $db = mysqli_connect("localhost", "root", "", "drawingguide");


    $sql = "SELECT * FROM images";
    $result = mysqli_query($db, "SELECT * FROM images");

    ?>

    <html>
    <head>
    <style>
    .grid-item { width: 200px; }
    .grid-item--width2 { width: 400px; }
    </style>
      <script
      src="https://code.jquery.com/jquery-3.3.1.min.js"
      integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8="
      crossorigin="anonymous"></script>
        <script src="https://unpkg.com/masonry-layout@4/dist/masonry.pkgd.js"></script>
    </head>
    <div class='grid'>
<?php
    while($row = mysqli_fetch_array($result)) {
      echo "<div class='grid-item' style='background-image:url(".$row['image'].");background-size:cover'></div>";
    }

mysqli_close($db);
?>
    </div>
      <script type="text/javascript">
      jQuery(document).ready(function(){
          $('.grid').masonry({
            // options
            itemSelector: '.grid-item',
            columnWidth: 200
          });
      });
      </script>
     </html>

edited Aug 10 '18 at 09:24

answered Aug 10 '18 at 05:27

Kunal

463
2
13

So that mean i need to add jquery somewhere inside my code? since i already have CSS and HTML inside my code. Sorry this is my first time coding. – Jun Sheng Lee Aug 10 '18 at 05:40
Try my code that should work, if not then let me know – Kunal Aug 10 '18 at 06:00
it doesn't work, all the picture seems to overlapping each other. https://imgur.com/a/trXGqNt – Jun Sheng Lee Aug 10 '18 at 06:09
The problem is with images, please try to load images as background. I have updated my code please check that. – Kunal Aug 10 '18 at 06:42
I get this error "Notice: Undefined index: remoteUrl in C:\xampp\htdocs\fyp\testing2.php on line 26", but i use your previous code and i set the image style width:100% and i was able to arranged the picture but the picture is too small. https://imgur.com/a/aLeA5HO – Jun Sheng Lee Aug 10 '18 at 07:04
Yes that was missed by me, I have updated my code please check now. – Kunal Aug 10 '18 at 09:25

photo grid using masonry and PHP to retrieve photo from database

1 Answers1