PHP adding images from files to product page

Question

So I am working on creating a product gallery where a customer can view more than one image of a product. So on the product page it currently has one image, however I want to show different angles of a product that is why I have added another three images. I want to know how I can grab the 2nd, 3rd and 4th image from the folders and if there is no image do not display anything. For example: This snipper of code displays the product 157.jpg in the large folder. I want to restructure my folder for this to work by changing from 157.jpg to 157_1.jpg.

*/images/large/<?=$prod_id?>.jpg*

An example of how the new folder structure would look:

Code for displaying products

<div id="wrapper">
  <?php include ("includes/header.php") ?>
    <ul id="breadcrumbs">
        <li><a href="/">Home</a></li>
        <li> &rsaquo; <a href="/<?=$cat_name_slug?>"><?=$cat_name?></a></li>
        <li> &rsaquo; <?=$page_title?></li>
    </ul>
    <?php include ("includes/left-content.php") ?>
    <div id="main">
      <div id="prod-details-img">
          <?php
      if ($warranty >= 2) {
        echo '<div class="prod-details-warranty">' . $warranty . ' Years Warranty</div>';
      }
      ?>
          <div></div>
          <img src="/images/large/<?=$prod_id?>.jpg" alt="<?=$prod_title?>" />

          <div class="row">
            <div class="column">
              <img src="/images/large/<?=$prod_id?>.jpg" style="width:95px; height:95px;" onclick="openModal();currentSlide(2)" class="hover-shadow cursor">
            </div>
            <div class="column">
              <img src="/images/large/<?=$prod_id?>.jpg"style="width:95px; height:95px;" onclick="openModal();currentSlide(3)" class="hover-shadow cursor">
            </div>
            <div class="column">
              <img src="/images/large/<?=$prod_id?>.jpg" style="width:95px; height:95px;" onclick="openModal();currentSlide(4)" class="hover-shadow cursor">
            </div>
          </div>

          <div id="myModal" class="modal" style="display: block;">
            <span class="close cursor" onclick="closeModal()">×</span>
            <div class="modal-content">
              <img src="/images/logo.gif" style="width:50%; height:50%; display:block; margin:0 auto; top:10px;">
              <h3 style="text-align:center;"><?=$prod_title?></h3>

              <div class="mySlides" style="display: block;">
                <div class="numbertext">1 / 4</div>
                <img src="/images/xlarge/<?=$prod_id?>.jpg" style="width:95%; height:95%;">
              </div>

              <div class="mySlides" style="display: none;">
                <div class="numbertext">2 / 4</div>
                <img src="/images/xlarge/<?=$prod_id?>.jpg" style="width:95%; height:95%;">
              </div>

              <div class="mySlides" style="display: none;">
                <div class="numbertext">3 / 4</div>
                <img src="/images/xlarge/<?=$prod_id?>.jpg" style="width:95%; height:95%;">
              </div>

              <div class="mySlides" style="display: none;">
                <div class="numbertext">4 / 4</div>
                <img src="/images/xlarge/<?=$prod_id?>.jpg" style="width:95%; height:95%;">
              </div>

              <a class="prev" onclick="plusSlides(-1)">❮</a>
              <a class="next" onclick="plusSlides(1)">❯</a>

              <div class="caption-container">
                   <p id="caption"></p>
              </div>  

              <div class="column2">
                <img class="demo cursor active" src="/images/large/<?=$prod_id?>.jpg" style="width:95%; height:95%;" onclick="currentSlide(1)">
              </div>
              <div class="column2">
                <img class="demo cursor" src="/images/large/<?=$prod_id?>.jpg" style="width:95%; height:95%;" onclick="currentSlide(2)">
              </div>
              <div class="column2">
                <img class="demo cursor" src="/images/large/<?=$prod_id?>.jpg" style="width:95%; height:95%;" onclick="currentSlide(3)">
              </div>
              <div class="column2">
                <img class="demo cursor" src="/images/large/<?=$prod_id?>.jpg" style="width:95%; height:95%;" onclick="currentSlide(4)">
              </div>
            </div>
          </div>
        </div>
        <div id="prod-details">
          <h1 class="prod-title-large"><?=$prod_title?></h1>
            <span id="prod-details-delivery">
            <img class="price-prom-sml" src="/images/price-promise.gif" alt="Price Promise" /><br />
            Price includes VAT &amp; Delivery<br />Order before 1pm for Free Next Day Delivery <br/>(UK Mainland Only)*</span>
            <div id="prod-details-buy">
              £<?=$price_final?>
                <?php if ($stock == "TRUE"):?>
                <form action="<?php $_SERVER['PHP_SELF'] ?>" method="post">
                    <input type="hidden" name="Auto_ID" value="<?=$prod_id?>" />
                    <input type="hidden" name="QTY" value="1" />
                    <button type="submit" name="Add_Basket" id="buy-btn">Buy</button>
                </form>
        <?php else: ?>
                <br />Out of Stock
                <?php endif; ?>
            </div>
        </div>

user1915746 · Accepted Answer · 2017-06-28 11:09:22Z

1

You could use glob() to get an array of all files matching a pattern within your image folder(s).

foreach (glob('/images/large/*.jpg') as $filename) {
    //display image
}

See http://php.net/manual/en/function.glob.php

answered Jun 28, 2017 at 11:09

user1915746

5874 silver badges17 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Whitena Over a year ago

Is there a simple way of just adding <img src="/images/large/<?=$prod_id?>.jpg" so it grabs the product ID and add _1, _2, _3 ???

user1915746 Over a year ago

You can build your own pattern: glob('images/large/' . $prod_id . '_*.jpg')

Whitena Over a year ago

Aww right so would this work glob ('images/large/' . $prod_id . '_1.jpg') = 157_1.jpg ('images/large/' . $prod_id . '_2.jpg') = 157_2.jpg ('images/large/' . $prod_id . '_3.jpg') = 157_3.jpg But also how would I set it so if I don't have a product image for the third image how do I set it so nothing shows

user1915746 Over a year ago

Too complicated. glob('images/large/' . $prod_id . '_*.jpg') gives you an array of all images with the given prod_id in this folder (_1, _2, etc). With the foreach loop iterate over this array and output the images as html <img> and maybe also with the .column <div>. This will output as many images as in the folder are.

Collectives™ on Stack Overflow

PHP adding images from files to product page

1 Answer 1

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related