使用Count在旋转木马中加载图像

Question

I have a working website and now I am trying to simplyfy and improve the code. The site lists properties for a holiday rental and on each property page there are details of the property including a carousel with fading images (Bootstrap).

At the moment I am using multiple 'if' statements (see below) to create the slide show but can't help thinking that although it works perfectly well and loads quite quickly, there must be a better way. At the moment each property has between 6 and 16 images stored in a folder and I have a database table with 16 columns (one for each image). Each column has a path reference to each image (eg ../images/property/photo-01.jpg) or the column is left empty.

 <div class="carousel-inner" role="listbox">
    <div class="carousel-item active"> <img class="img-fluid d-block mx-auto" src="<?php echo $results['photo_01']; ?>" alt=""></div>
    <div class="carousel-caption"><h1><?php echo $results['nom_propriete']; ?></h1></div>
    <div class="carousel-item"> <img class="img-fluid d-block mx-auto" src="<?php echo $results['photo_02']; ?>" alt=""></div>
    <div class="carousel-item"> <img class="img-fluid d-block mx-auto" src="<?php echo $results['photo_03']; ?>" alt=""></div>
    <div class="carousel-item"> <img class="img-fluid d-block mx-auto" src="<?php echo $results['photo_04']; ?>" alt=""></div>
    <div class="carousel-item"> <img class="img-fluid d-block mx-auto" src="<?php echo $results['photo_05']; ?>" alt=""></div>
    <div class="carousel-item"> <img class="img-fluid d-block mx-auto" src="<?php echo $results['photo_06']; ?>" alt=""></div>
    <?php
    if ($results['photo_07'] <> NULL or "") {
    ?><div class="carousel-item"> <img class="img-fluid d-block mx-auto" src="<?php echo $results['photo_07']; ?>" alt=""></div><?php }
    if ($results['photo_08'] <> NULL or "") {
    ?><div class="carousel-item"> <img class="img-fluid d-block mx-auto" src="<?php echo $results['photo_08']; ?>" alt=""></div><?php }
    if ($results['photo_09'] <> NULL or "") {
    ?><div class="carousel-item"> <img class="img-fluid d-block mx-auto" src="<?php echo $results['photo_09']; ?>" alt=""></div><?php }
    if ($results['photo_10'] <> NULL or "") {
    ?><div class="carousel-item"> <img class="img-fluid d-block mx-auto" src="<?php echo $results['photo_10']; ?>" alt=""></div><?php }
    if ($results['photo_11'] <> NULL or "") {
    ?><div class="carousel-item"> <img class="img-fluid d-block mx-auto" src="<?php echo $results['photo_11']; ?>" alt=""></div><?php }
    if ($results['photo_12'] <> NULL or "") {
    ?><div class="carousel-item"> <img class="img-fluid d-block mx-auto" src="<?php echo $results['photo_12']; ?>" alt=""></div><?php } 
    if ($results['photo_13'] <> NULL or "") {
    ?><div class="carousel-item"> <img class="img-fluid d-block mx-auto" src="<?php echo $results['photo_13']; ?>" alt=""></div><?php } 
    if ($results['photo_14'] <> NULL or "") {
    ?><div class="carousel-item"> <img class="img-fluid d-block mx-auto" src="<?php echo $results['photo_14']; ?>" alt=""></div><?php } 
    if ($results['photo_15'] <> NULL or "") {
    ?><div class="carousel-item"> <img class="img-fluid d-block mx-auto" src="<?php echo $results['photo_15']; ?>" alt=""></div><?php } 
    if ($results['photo_16'] <> NULL or "") {
    ?><div class="carousel-item"> <img class="img-fluid d-block mx-auto" src="<?php echo $results['photo_16']; ?>" alt=""></div><?php } 
    ?>
   </div>

I have spent some time trying to find a better method by I'm struggling so I would be very greatful if someone could point me in the right direction. I have in my head that there must be a way of counting the number of images in a folder then loading them into the carousel rather than going through a process of checking all table columns each time a query is made. I hope that makes sense. Thanking you very much in advance for any advice.

Answer 1

You can use a for loop

    for($i=2;$i<=16;$i++){
$x=$i;
if($i<10){
$x='0'.$i;
}
    $image='photo_'.$x;
    if(!empty($results[$image])){
    ?>
    <div class="carousel-item"> <img class="img-fluid d-block mx-auto" src="<?= $results[$image] ?>" alt=""></div>
    <?php
    }
    }