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

HTML & CSS
1

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
img-tbl707×325 36 KB

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

2

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?

3

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

4

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
5

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:

Screenshot_2019-10-04%20title%20goes%20here
Screenshot_2019-10-04%20title%20goes%20here600×657 6.95 KB

1 Like
6

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
7

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.