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.
与恶龙缠斗过久,自身亦成为恶龙；凝视深渊过久,深渊将回以凝视…
