Using php/javascript toaccess an array of settings to display images

John_Betong · October 4, 2019, 5:55am

The PHP version:

<?php declare(strict_types=1);

$aDims = [
  '188x142' ,
  '142x188' ,
  '250' ,
  '250x150' ,
  '150' ,
  '150x250' ,
];

$imgs = '';
foreach ($aDims as $id => $dims) :
  $imgs .= '<div class="mga p42 bge">'
        .   '<img src="https://via.placeholder.com/' .$dims .'" alt="#">'  
        . '</div>'; 
endforeach;

?><!doctype html>
<html lang="en">
<head>
<title> title goes here </title>
<style>
img  {outline: solid 3px lime; }

.bd1 {border: solid 1px #ddd;}
.bge {background-color: #eee;}
.dib {display: inline-block;}
.h99 {height:100%;}
.mga {margin: 2em auto;}
.p42 {padding: 0.88em;}
.tac {text-align: center;} 
</style>
</head>
<body>
<h1> title goes here </h1>

  <div class="bd1 p42 bgs tac">
    <?= $imgs ?>
  </div>

</body>
</html>

Using php/javascript toaccess an array of settings to display images

Output: