Want to display associative array of php in neat 3 columns and rows

Question

I am VERY new to PhP. Quick question that I am having trouble finding the answer to online, although I am sure most of you will quickly know the answer. I have used this PHP code to display the index name under the image and the overall view I am assuming is 3 columns and 3 rows so I want to have it. Can someone please help me out with this Thanks in advance.

<!DOCTYPE html>
<html>

<head>
<link href="style.css" rel="stylesheet" type="text/css">
</head>

<body>

    <div id="gridview">
        <div class="heading">Image Gallery</div>
        <div class="image">
        <?php
$product = array(
                "Winter" => array(

                    "Coat"  => '<img src="https://i.ibb.co/0VR94xj/coat.jpg">',
                    "Jacket" => '<img src="https://i.ibb.co/ZgcwJV4/jacket.jpg" alt="jacket" border="0">',
                    "Hoodie" => '<img src="https://i.ibb.co/ZNfcDkk/Hoodie.jpg" alt="Hoodie">',
   
                ),
                "Down" => array(
                    "Pants"  => '<img src="https://i.ibb.co/k6ZsZ80/jeans.png" alt="jeans">',
                    "Shorts" => '<img src="https://i.ibb.co/GnWbwjs/Shorts.jpg" alt="Shorts">',
                    "Trouser" => '<img src="https://i.ibb.co/92DwnNF/trouser.jpg" alt="trouser">',
                ),
                "Feet" => array(    
                     "Boots" => '<img src="https://i.ibb.co/jW3RfLm/boots.jpg">',
                    "Casual" => '<img src="https://i.ibb.co/F43T60v/casual.webp" alt="casual">',
                    "Spikes" => '<img src="https://i.ibb.co/Sn3Q6rn/joggers.jpg" alt="joggers" border="0">'
                ),
             );
foreach ($product as $key => $value) {
    echo $key."<br>";
    foreach ($value as $k => $v) {
       echo "$k---$v  <br>";
    }}
?>
</div>
</div>
</body>
</html>

#gridview {
   text-align:center; 
}

div.image {
    margin: 10px;
    display: inline-block;
}

div.image img {
    width: 100%;
    height: auto;
    border: 1px solid #ccc;
}

div.image img:hover {
    box-shadow: 0 5px 5px 0 rgba(0,0,0,0.32), 0 0 0 0px rgba(0,0,0,0.16);
}

.heading{    
    padding: 10px 10px;
    border-radius: 2px;
    color: #FFF;
    background: #6aadf1;
    margin-bottom:10px;
    font-size: 1.5em;
}
#grid{
    margin-bottom:30px;
}

@media screen and (min-width: 1224px) {
    div.image {
        width: 300px;
    }
}

@media screen and (min-width: 1044px) and (max-width: 1224px) {
    div.image {
        width: 250px;
    }
}

@media screen and (min-width: 845px) and (max-width: 1044px) {
    div.image {
        width: 200px;
    }
}

If it’s tabular data, nothing wrong with using a ``. So this is more an html question than anything. Of course, it could also be done with bootstrap or foundation. — Tim Morton, Jan 07 '21 at 02:23
Take a look at CSS Grid or CSS Flexbox if you want some nice responsive rows and columns. Lots of tutorials on it! Or even checkout a YT vid etc! — twknab, Jan 07 '21 at 02:28

Tim Morton · Answer 1 · 2021-01-07T05:29:08.000

Step 1 - Separate logic and presentation

The first thing you should do is the php logic. In this case, getting the data is simply creating the array, but often there is much more to do before jumping in to the html. Once you write your first html tag, use php only for looping and filling variables (and minor conditionals for presentation)

So, your page will start out with


<?php
$product = array(
    "Winter" => array(
         "Coat"  => '<img src="https://i.ibb.co/0VR94xj/coat.jpg">',
         "Jacket" => '<img src="https://i.ibb.co/ZgcwJV4/jacket.jpg" alt="jacket" border="0">',
         "Hoodie" => '<img src="https://i.ibb.co/ZNfcDkk/Hoodie.jpg" alt="Hoodie">',
    ),
    "Down" => array(
        "Pants"  => '<img src="https://i.ibb.co/k6ZsZ80/jeans.png" alt="jeans">',
        "Shorts" => '<img src="https://i.ibb.co/GnWbwjs/Shorts.jpg" alt="Shorts">',
        "Trouser" => '<img src="https://i.ibb.co/92DwnNF/trouser.jpg" alt="trouser">',
    ),
    "Feet" => array(    
        "Boots" => '<img src="https://i.ibb.co/jW3RfLm/boots.jpg">',
        "Casual" => '<img src="https://i.ibb.co/F43T60v/casual.webp" alt="casual">',
        "Spikes" => '<img src="https://i.ibb.co/Sn3Q6rn/joggers.jpg" alt="joggers" border="0">'
    ),
);

Step 2 - display it as html

Now, after all logic is done, you can move on to the presentation (html). I’ll show using bootstrap:

?>
<!DOCTYPE html>
<html>

<head>
    <link href="style.css" rel="stylesheet" type="text/css">
</head>

<body>

    <div class="row">
        <div class="col-sm-12">Image Gallery</div>

        <?php foreach($product as $category => $data): ?>
        <div class="col-sm-12"><?= $category</div>

            <?php foreach($data as $name => $image): ?>
            <div class="col-sm-4">
                <div><?= $name ?></div>
                <div><?= $image?></div>
            </div>
            <?php endforeach; ?>

        </div>
        <?php endforeach; ?>

    </div>
</body>
</html>

To take it a step further, you could change $product to only hold the image url instead of the whole img tag.

Want to display associative array of php in neat 3 columns and rows

1 Answers1

Step 1 - Separate logic and presentation

Step 2 - display it as html