PHP import images from directory into 2 column HTML row

Question

I have found some PHP that I am trying to adapt onto my page but can not seem to get it to work. Here is the code:

<?php

$pagetitle = "Test Gallery";
$dirname = "img/folder_1/";
$images = glob($dirname."*.jpg");

?>


<?php $i=0; foreach($images as $image): ?>
    <?php if($i%2 === 0) echo '<div class="row">' ?>
        <div class="col-sm-6">
            <img class="lazy store-img" src="IMAGE_SOURCE" alt="" title="">
            <h3>IMAGE_NAME</h3>
            <button href="#" class="btn btn-primary">Purchase Image</button>
        </div>
    <?php if($i%2 === 0) echo '</div>' ?>
<?php $i++; endforeach ?>

I am trying to get the images to be pulled from a directory and each image is wrapped in a .col-sm-6 div then each 2 are wrapped in a .row div, then if there is an odd number of the files the last one would just be one .col-sm-6 div on its own. Below is the structure that I am trying to achieve:

<div class="row">
    <div class="col-sm-6">
       <img class="lazy store-img" src="IMAGE_SOURCE" alt="" title="">
       <h3>IMAGE_NAME</h3>
       <button href="#" class="btn btn-primary">Purchase Image</button>
    </div>
   <div class="col-sm-6">
       <img class="lazy store-img" src="IMAGE_SOURCE" alt="" title="">
       <h3>IMAGE_NAME</h3>
       <button href="#" class="btn btn-primary">Purchase Image</button>
    </div>
 </div>

<div class="row">
    <div class="col-sm-6">
       <img class="lazy store-img" src="IMAGE_SOURCE" alt="" title="">
       <h3>IMAGE_NAME</h3>
       <button href="#" class="btn btn-primary">Purchase Image</button>
    </div>
 </div>

The IMAGE_NAME I would add something to pull through the imported filename so it can be displayed on the page and the IMAGE_SOURCE would be the images URL so for now please ignore those bits of text as I don't think it will affect this?

I am new to PHP and just can't seem to find why nothing is showing on the page unless this code is not suited to my needs?

P.s. if any of my syntax's are incorrect I apologies in advance.

`$images = glob($dirname."*.jpg");` just returns an array of filenames into the `$images`. In other words, an array of strings. Not sure why you think the entries would have a `->url() ` method? In your foreach loop, `$image` will be a simple string e.g. "image.jpg", and nothing more. Isn't that throwing an error or warning? If not, make sure you've got PHP error reporting switched on fully. Also, your stated output is missing other things which are supposedly added by the code, so I'm not sure this output is actually coming from the version of the code you've shown us. — ADyson, Jul 20 '18 at 12:52
Is the output really produced by this code? The `$images` array should be an array of strings, so calling `$image->url()` should not return an `#`. Also the class, alt and title attributes that your code should produce are missing in your output. — Karsten Koop, Jul 20 '18 at 12:53
The produced HTML above is what I am trying to produce not what the PHP has produced. Sorry if that wasn't clear. @ADyson I am not getting any errors in the console just a blank page. — Ryan Kerswell, Jul 20 '18 at 13:03
Completely blank? What debugging have you done? To begin with, write `var_dump($images);` just after the call to "glob" and see if it contains anything. Clearly, if it's empty you'll get no HTML. Also turn on error reporting so all errors, warnings, and notices are dumped to the screen (see https://stackoverflow.com/a/21429652/5947043 , and/or some of the other useful answers) — ADyson, Jul 20 '18 at 13:15
P.S. The code you've got will never produce exactly the output you've shown, as it inserts other attributes into several of the tags. And I'm not sure the output is desirable anyway - images with a `src="#"` attribute will never display anything. It'll need a valid URL (or relative URL) to the image file in order to work. Also, what does your "baseline()" function do? We don't know how that affects the output. — ADyson, Jul 20 '18 at 13:19
@ADyson seems my explanations are very vague. I have added a shortened version of the PHP and matched the same attributes that I would expect the code to reproduce above. Hope that clears things up. Also the "baseline()" I read somewhere that it can grab the filename from the image and populate it in the attribute but I may be wrong? I will run that debugger tonight and report back and also see what errors I get on the page. Thanks for your help so far. Really appreciated :) — Ryan Kerswell, Jul 20 '18 at 15:11

score 0 · Accepted Answer · answered Jul 20 '18 at 18:40

$images will be filled by your golb

So basically you just edit the line

<?php if($i%2 === 0) echo '</div>' ?>

To

<?php if($i%2 === 1) echo '</div>' ?>

Here a more readable example:

<?php
    $images = [
        'https://via.placeholder.com/10x50','https://via.placeholder.com/20x50','https://via.placeholder.com/30x50','https://via.placeholder.com/40x50',
        'https://via.placeholder.com/50x50','https://via.placeholder.com/60x50','https://via.placeholder.com/70x50',
    ];
?>

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.2/css/bootstrap.min.css"/>
<?php
    $cols = 2; // dividable by 12 please
    for( $i = 0; $i < count($images) && $image = $images[$i]; $i++) {
        if( $i%$cols == 0 ) { echo '<div class="row">'; }

        echo '<div class="col-sm-' . 12/$cols . '">';
        echo '<img class="lazy store-img" src="' . $image . '" alt="" title="">';
        echo '<h3>IMAGE_NAME</h3>';
        echo '<button href="#" class="btn btn-primary">Purchase Image</button>';
        echo '</div>';


        if( $i%$cols == $cols-1 ) { echo '</div>'; } /* here comes the magic :) */
    }
    if( count( $images )%$cols > 0 ) {
        echo '</div>';
    }
?>

Exactly what I wanted and works like a dream. Can tweak it now to add other attributes that I need. Thanks a lot. :) — Ryan Kerswell, Jul 20 '18 at 19:45

PHP import images from directory into 2 column HTML row

1 Answers1