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

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.