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

Hi,
I’m setting up a website gallery I have a set of images 1 image/page. I’d like to use a table like the one I’ve uploaded:img-tbl
to use in<img src’“ColA” style=“width: ColB; margin-left: ColC; margin-top: ColD” alt="">
My coding skills are pretty weak, so really appreciate any advice or snippets how to do this.
Thanks for any help
David

That table, is that a database table?
So I’m presuming you want to pull image data from the database table, then render the image to the page in HTML.
Is that correct?

Hi Sam,

I’m developing the site using Kirby - a flatfile cms - this data is stored as meta data per image.

I’m interested in learning to do this using the data in the table - don’t have a database, was thinking maybe as an array.

Thanks

Hi @rambleon and a warm welcome to the forum.

I get the impression that the images have different dimensions and the hard-coded style parameters being passed position the image nicely on a particular page width.

I would be tempted to investigate the CSS statements to :slight_smile:

  1. create a parent container for the image
  2. display the image full width and height inside the parent div
  3. parent div to have:
    a. set margin, padding and borders, inline-block
    b. centralise dynamic div within parent width
    c. center dynamic div vertically

Applying the above conditions will make the image responsive for all web pages sizes.

1 Like

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>

Output:

1 Like

Hi John,
Thanks very much for this. Exactly the advice and snippets I was looking for.
I’m trying to build a website for my wife’s paintings - one painting / page - these range from miniatures to full size canvases.
I’ll work through this and let you know
Thanks very much

2 Likes