Chris Nguyen Chris Nguyen - 24 days ago 14
HTML Question

HTML - Display Multiple Images (possibly with Button)

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

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