HTML - Display Multiple Images (possibly with Button)

Question

Alright, so I have created a Portfolio Page for a Model containing several images, but I want to add a bunch more images using a specific HTML script. As a programmer, I try to eliminate redundancy, but I don't know anything about JavaScript or PHP.

What I want:

• Iterate over each image file in a directory (./images)
• Loop a specific block of HTML, plugging in the path to image.

Bonus

• Execute code when Button is pressed, displaying more images within current window (i.e "Portfolio" button -> Extend.php).

My Site: ChrisNguyen.ml/Portfolio

Example Code (Other example in raw HTML in a above link):

<?php
$dirname = "images_all";
$images = glob($dirname."*.png");

foreach($images as $image) {
    echo '<article class="4u 12u$(xsmall) work-item">
        <a href="'.$image'" class="image fit thumb"><img src="'.$image'" alt="" /></a>
        <h3> </h3>
    </article> ';
}
?>

HTML Block that needs to be repeated:

    <article class="4u 12u$(xsmall) work-item">
        <a href="images/fulls/01.jpg" class="image fit thumb"><img src="images/fulls/01.jpg" alt="" /></a>
        <h3> </h3>
    </article>

Other Info: LAMP Server running on AWS EC2 (So I can use PHP, etc)

In case you didn't get it:

1. How do I display multiple images with HTML using a "For loop"?
2. How to display more images with Button.

Update: It does support PHP because of the SMTP form at the bottom of the page.

Update 2: I am implementing all your guy's suggestions (thanks!), and modifying the HTML page and other files, and testing it with the live server/site. I do see changes in the page, but not the results desired (i.e the page displays the variable name rather than the value "{$dirArray[$index]}")

Answer 1

if i understood your question correct (it is only an easy and short code example hope it will help you):

First Question: 1.) How do I display multiple images with HTML using a "For loop"?

in this code example, all images from the folder "images" will shown on the website.

<?php
$path = "";

$allImages= scandir($path);

foreach ($allImages as $image) { 

        $imageInf= pathinfo($path ."/".$image); 

            echo "
            <article class='4u 12u$(xsmall) work-item'>
            <a href='#' class='image fit thumb'><img src='".$imageInf['dirname']."/".$imageInf['basename']."' alt='' /></a>
            <h3> </h3>
            </article> 
            ";
}
    ?>

Second Question: 2.) How to display more images with a Button

Only with PHP: this script will show you one more img on your website (i dont know how many images you need or which specific img you need)

<?php
if(isset($_POST['NAMEOFBUTTON']))
{

                echo "
                <article class='4u 12u$(xsmall) work-item'>
                <a href='#' class='image fit thumb'><img src=' (IMAGE PATH WITH IMAGE NAME) ' alt='' /></a>
                <h3> </h3>
                </article> 
                ";
}

?>

OR

<?php
if(isset($_POST['NAMEOFBUTTON']))
{
      for ($i = 1; $i <= 10; $i++) {
      $var_name = "IMAGENAME".$i;
                    echo "
                    <article class='4u 12u$(xsmall) work-item'>
                    <a href='#' class='image fit thumb'><img src=' (IMAGE PATH WITH $var_name) ' alt='' /></a>
                    <h3> </h3>
                    </article> 
                    ";
       }
}

?>

OR

if(isset($_POST['NAMEOFBUTTON']))
{
    $path = "";

    $allImages= scandir($path);

    foreach ($allImages as $image) { 

            $imageInf= pathinfo($path ."/".$image); 

                echo "
                <article class='4u 12u$(xsmall) work-item'>
                <a href='#' class='image fit thumb'><img src='".$imageInf['dirname']."/".$imageInf['basename']."' alt='' /></a>
                <h3> </h3>
                </article> 
                ";
}
}



?>
<form method='post'>
<input type='submit' name='NAMEOFBUTTON' />
</form>

OR WITH JQuery;

HTML:

<input type='button' onclick='moreimg();' />
<div id='Show_Images'></div>

JQUERY:

<script>
function moreimg(){
   $('#Show_Images').load('IMG.php');
}
</script>

PHP: You can use in the file "IMG.php" the code from the First Question

Answer 2

So the answer above is correct. However, it did not work/execute in the server currently used (Apache) because the server didn't recognize PHP within the HTML itself. That is why it only worked as a separate file. [ How do I add PHP code/file to HTML(.html) files? ]

What I needed to do:

1. Find the directory where the "httpd.conf" was located. On my AWS Apache server, it was located at "/etc/httpd/conf"
2. Stop your server temporaily ("sudo service httpd stop")
3. Edit the file ("sudo nano httpd.conf")
4. Append "AddType application/x-httpd-php .htm .html" to tell Apache/the-server how to properly execute the embedded PHP (I put it in the bottom)
5. Also follow instructions here to ensure the httpd.conf file will accept/execute the above line/code [ Use .htaccess file on an apache localhost server ]
6. Start your server ("sudo service httpd stop")
7. ...and if your PHP is correct and embedded properly, your page will now execute the PHP as normal!

Check my site (ChrisNguyen.ml/Portfolio) for the finished result/code.

Answer 3

Now remove the dollar sign from the as $image and use as in the below code. It might help you.

<?php
$dirname = "images_all";
$images = glob($dir`enter code here`name."*.png");

foreach($images as image) {
    echo '<article class="4u 12u$(xsmall) work-item">
        <a href="'.$image'" class="image fit thumb"><img src="'.$image'" alt="" /></a>
        <h3> </h3>
    </article> ';
}
?>