Display folder of images in html using php-CodePudding

sorry I couldn't find the answers i needed so hope someone can help.

I have a gallery.html folder, and wanting to display all images inside my "img" folder within this.

I want to use PHP for this, but it never works, or seems to run the PHP. I have place the PHP tags inside the .html folder like below, including the code, but only prints out as if it it just text?

    <div >
      <?php 
    
      $dirname = "/img/";
      $images = glob($dirname."*.jpg");
      
      foreach($images as $image) {
          echo '<img src="'.$image.'" /><br />';
      }
      
      ?>
    </div>

Am I doing something wrong, if I place the PHP in its own file, how can I pull this in to the div where the gallery will be stored?

CodePudding user response：

first of all, as far as I know it is not possible to run php code in a file with the extension ".html".

So I would recommend that you change the extension from ".html" to ".php". This will allow you to run the script in your div container.

This was also recommended in the comment of ADyson.

But you can rename the file with .php and still put html in it too

next you need to set the path correctly. I couldn't find out what operating system you are using. So I assume it will be linux, please correct me if this is not the case!

You could do this for example as follows:
in the index.php file:

Step 1.)
get your current directory

<?php
 system("pwd"); #pwd = print working directory
?>

system() is a function php provides which makes it possible to execute linux bash commands. system function php doc

Step 2.)
make sure that the folders can be found, you can also find this out with the php function system:

<?php
 system("ls"); #ls = list all files in this level
?>

Now you should know where your files are and how to navigate to them.

Now to the actual problem.

To answer your question I have created a small environment for myself.
It looks like this:

App
|-img
|  |-img.jpg
|  |-img2.jpg
|  |-img3.jpg
|-index.php

App is my root folder, I have a sub folder called img.
My sub folder img contains all my images (img1.jpg to img3.jpg).
And last but not least on the same level as img is my index.php file.

I'll show you my code first, and the explanation will follow:

Index.php

<!doctype html>

<html lang="en">
<head>
  <meta charset="utf-8">
  <title>My PHP Website</title>
</head>

<body>
  <h1>My PHP Website</h1>
  <p>Here is some static content.</p>
  
  <?php
    $images = glob("./img/*.jpg");
    print_r($images); #output is an array!

    foreach ($images as $img) {
     # print_r($img); #to see that the iteration $img looks like "./img/img1.jpg"
      echo "<img src='$img' />";
    }

  ?>

</body>
</html>

because my sub folder img is on the same level as index.php you have to put a dot and a slash in front of the folder img (in my case!), which is to understand that it should search for the folder img on the same level as index.php.

How to search on other levels you can find here

Then you would have the right path by using the function glob() and after that you don't have to do anything more than going through the array and inserting the iteration into the img attribute src.

Please keep in mind that glob() returns the specified path, i.e. you do not need to specify it again!
CHECK THE CODE EXAMPLE CAREFULY

I hope it will help, please let me know!

CodePudding user response：

First you have to get the working directory then, change your working directory to the images directory get all images, and then change your directory back to working directory.

The constant GLOB_BRACE will help you to get the image name with extension only.

<div >
    $dirname = getcwd() . "/img/";

    // change your current directory to image directory
    chdir($dirname);

    $images = glob("*.jpg", GLOB_BRACE);

    // change your directory back to working directory
    chdir($dirname);

    foreach ($images as $image) {
        echo '<img src="/img/' . $image . '" /><br />';
    }
</div>