Displaying image as image gallery using PHP derived from phpmyadmin(MySQL)

Question

I am using PHP, HTML, and MySQL to build a website.

So, my goal is to make an image gallery for my webpage which should display only 3 images each row.

But my code seems wrong and I do not know where should I do the correction.

-) Here is my code:

    $query = mysql_query("SELECT DISTINCT * FROM products WHERE catID = 11 ORDER BY typeID ASC"); 

echo "<table>";

while ($row = mysql_fetch_assoc($query)) 
{

echo "<tr>";

    for ($c = 0; $c < 3; $c += 1){

      echo "<td>";

        echo    '<img src="data:image/jpg;base64,'.base64_encode($row['productImg'] ).'" width="300" height="200" alt=""
             />';

        echo    "<br>";

            echo "<b>";
        echo    $row['productName'];
            echo "</b>";

        echo    "<br>";

        // More detail button set up
        ?><a href="show.php?productID=<?php echo $row["productID"]; ?>">More Detail <i class="fa fa-arrow-circle-o-right"></i></a> <?php



      echo "</td>";
    }

 echo "</tr>";

}

 echo "</table>";

-) Here is the result: wrong result image

The result turns out not what I expected since on 1 row it displays 3 same images. What I wanted is to display 3 different images on each row. I do not know where I did wrong.

Rajdeep Paul · Accepted Answer · 2018-11-14T06:39:48.200

The result turns out not what I expected since on 1 row it displays 3 same images.

That's because of the for loop, you are looping through the same image three times. Instead use a counter variable $counter to track number of iterations and display three different images per row.

<?php
    $query = mysql_query("SELECT DISTINCT * FROM products WHERE catID = 11 ORDER BY typeID ASC"); 

    if(mysql_num_rows($query)){
        $counter = 0;
        echo "<table><tr>";
        while ($row = mysql_fetch_assoc($query)) {
            if($counter != 0 && $counter % 3 == 0){
                echo "</tr><tr>";
            }
            echo "<td>";
                echo '<img src="data:image/jpg;base64,'.base64_encode($row['productImg'] ).'" width="300" height="200" alt=""/>';
                echo "<br>";
                echo "<b>";
                echo $row['productName'];
                echo "</b>";
                echo "<br>";
                // More detail button set up
                ?>
                <a href="show.php?productID=<?php echo $row["productID"]; ?>">More Detail <i class="fa fa-arrow-circle-o-right"></i></a> 
                <?php
            echo "</td>";
            ++$counter;
        }
        echo "</tr></table>";
    }
?>

Sidenote: Don't use mysql_* functions, they are deprecated as of PHP 5.5 and are removed altogether in PHP 7.0. Use mysqli or pdo instead. And this is why you shouldn't use mysql_* functions.

Thanks! Because of university purpose somehow I am sticking with PHP v5.5. Your code working fine but, I found out an issue that the $counter is better to be assign with 0 value or else the arrangement will be weird (1st row showing 3 images, but the following row displaying 4 images). But no worries, the code working fine! Thanks again... — Json, Nov 14 '18 at 03:53
@Json, Thanks for raising the issue, I have initialised `$counter` to `0` and changed the `if` condition accordingly, now it should work fine. — Rajdeep Paul, Nov 14 '18 at 06:43

Displaying image as image gallery using PHP derived from phpmyadmin(MySQL)

1 Answers1