PHP将目录中的图像导入2列HTML行

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.

Answer 1

$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>';
    }
?>