Masonry grid with PHP

[Mekaboo]

Hey all!!
Had an idea to use a masonry grid(Pinterest) but have the function of the FB wall post(see pic). Wanted to make sure code was right. I echoed the results from the dropdown menu to show within the general grid. I also want pics in the general grid to link to profile page(pro.php) pertaining to the owner of the pic as well images from grid to show up on image gallery page(gallery.php)

   <div class="dropdown">
  <button onclick="myFunction()" class="dropbtn">Upload Photo/Text</button>
  <div id="myDropdown" class="dropdown-content">
     <form action="upcontent.php" method="post" enctype="multipart/form-data">
  
  <input type="file" name="fileToUpload" id="fileToUpload">
   <br><br>     
     Words: <textarea name="comment" rows="5" cols="40"><?php echo $comment;?></textarea>
   <input type="submit" value="Submit" name="submit">
</form>
  </div>
</div>  
      
     <?php
   echo $username;
    echo $file;
echo $comment;

?> 
   <div class="grid">
    <div class="grid-item"></div>
     <a href="pro.php?id=<?php echo $row["username"]; ?>">
   <img src="<?php echo $griditem; ?>" alt="" />
   <p><?php echo $row["comment"]; ?></p>
   </a>
    <div class="grid-item grid-item--width2 grid-item--height2"></div>
      <a href="pro.php?id=<?php echo $row["username"]; ?>">
   <img src="<?php echo $griditem; ?>" alt="" />
   <p><?php echo $row["comment"]; ?></p>
   </a>
    <div class="grid-item grid-item--height3"></div>
      <a href=pro.php?id=<?php echo $row["username"]; ?>">
   <img src="<?php echo $griditem; ?>" alt="" />
   <p><?php echo $row["comment"]; ?></p>
   </a>
    <div class="grid-item grid-item--height2"></div>
      <a href="pro.php?id=<?php echo $row["username"]; ?>">
   <img src="<?php echo $griditem; ?>" alt="" />
   <p><?php echo $row["comment"]; ?></p>
   </a>
    <div class="grid-item .grid-item--width2"></div>
     
    <div class="grid-item"></div>
    
  </div>

</div>

Thank ya

[ErnieAlex]

Not sure what you are asking for. We can not see that tiny image! Try it yourself. It was not posted correctly. Just a small square… Since we can not duplicate your code, perhaps you should tell us where it is failing…

[Mekaboo]

I’m trying to create the FB wall section(What’s on your mind) with a Masonry grid. With my code I’m trying to connect my drop-down button section to the grid so images will be seen within. I also want the images to link back to the profile page as well as create gallery specifically for the user.
c as well images from grid to show up on image gallery page(gallery.php)

   <div class="dropdown">
  <button onclick="myFunction()" class="dropbtn">Upload Photo/Text</button>
  <div id="myDropdown" class="dropdown-content">
     <form action="upcontent.php" method="post" enctype="multipart/form-data">
  
  <input type="file" name="fileToUpload" id="fileToUpload">
   <br><br>     
     Words: <textarea name="comment" rows="5" cols="40"><?php echo $comment;?></textarea>
   <input type="submit" value="Submit" name="submit">
</form>
  </div>
</div>  
      
     <?php
   echo $username;
    echo $file;
echo $comment;

?> 
   <div class="grid">
    <div class="grid-item"></div>
     <a href="pro.php?id=<?php echo $row["username"]; ?>">
   <img src="<?php echo $griditem; ?>" alt="" />
   <p><?php echo $row["comment"]; ?></p>
   </a>
    <div class="grid-item grid-item--width2 grid-item--height2"></div>
      <a href="pro.php?id=<?php echo $row["username"]; ?>">
   <img src="<?php echo $griditem; ?>" alt="" />
   <p><?php echo $row["comment"]; ?></p>
   </a>
    <div class="grid-item grid-item--height3"></div>
      <a href=pro.php?id=<?php echo $row["username"]; ?>">
   <img src="<?php echo $griditem; ?>" alt="" />
   <p><?php echo $row["comment"]; ?></p>
   </a>
    <div class="grid-item grid-item--height2"></div>
      <a href="pro.php?id=<?php echo $row["username"]; ?>">
   <img src="<?php echo $griditem; ?>" alt="" />
   <p><?php echo $row["comment"]; ?></p>
   </a>
    <div class="grid-item .grid-item--width2"></div>
     
    <div class="grid-item"></div>
    
  </div>

</div>

[Mekaboo]

Sorry about that😊!!!

[ErnieAlex]

Okay, now we can see what you want to do. Where is it failing at this point? Masonry grid is a Javascript library. This is not really a PHP help question, but, a Javascript problem. So, you have an HTML system with links ( which let’s users know your usernames, not good. ) and JS-Grid items.

Did you add the JS library at the bottom of the page? What is failing at this point? I mean, how can we help?

[Mekaboo]

Sir I’m trying to connect PHP within the code so that when people login/register it flows. I’ve placed php within the html and js. Look at the code and what I originally wrote. Want to make sure I wrote the php correctly so that the masonry and contents from drop-down button connect.

[ErnieAlex]

Sorry, I was gone most of the day. Well, you can verify the PHP outputs that you placed into the HTML and JS by just checking the page. You should first verify that it looks correct. To debug this part, bring up your page so that you see it. Then, RIGHT-CLICK on it and select VIEW-SOURCE. This will open another tab that will be the final output from PHP server. You can review it and look for errors which should be in red. Also, you can see if the page pulled the correct values from the server and placed them as they should be. If so, then, you need to test all the JS and HTML forms to see how they work. One step at a time.

So, first, check the output from the PHP and fix any errors you see. Then, update us and we can help you.

[Mekaboo]

No worries Sir …thank ya for the help

[ErnieAlex]

Did you debug your page and view the source after it is out of the server to see if the PHP code placed the correct values in the JS and HTML routines? I was not clear on your response if you were able to check it out.

[Mekaboo]

I checked it out…nothing wrong. Even though there are no bugs I’m still not sure if the code placement is correct that’s why I asked. Im worried about the placement and look of the code so that when I use it everything is connected.

[ErnieAlex]

I will use your code and test it here. I will let you know what happens. But, it will be morning before I can test it. Heading to bed shortly. Check back tomorrow. ( It is 11 PM here now. )

[Mekaboo]

THANK YA THANK YA…rest well

[ErnieAlex]

Well, I woke up early and have spent the last two hours playing with your code. There are several comments and questions for you…

First, it appears that the Masonry-Grid is more for Wordpress use. Are you using WP? If not, why don’t you just use Bootstrap panels instead. They are all designed for for displays like you need. I just wonder why you would want to add another layer of libraries on top of Bootstrap. It is already a great library for panels like you want.

Let me know you are thinking before I delve into this further! Thanks!

[ErnieAlex]

I was looking around for you. I suggest you just use Bootstrap. They call them “Cards”. Here is just one example of thousands that are out there. They do not have curved corners, but, you can add that by adjusting the CSS. I think this is what you really are looking for. Let me know!

Bootstrap Card Example

[Mekaboo]

Good morning

I didn’t know Masonry was moreso for WP…I wanted to use it because it was already structured.

Im very familiar with the Bootstrap card and Bootstrap in general because it’s my go to HTML framework. I can place those in the code for sure!!

[ErnieAlex]

Did you like the style of the ones I posted? It is almost like Facebook. And, being Bootstrap, you can make them horizontal or vertical or flowing like the example. It would work nicely for you I think !