PHP For Each Loops And Images

Question

So in the videos the icon names are in the style.css, but where are the actual <img> tags for the images. I'm wanting to do a foreach() loop to in php with a project I have with images like that, but not sure how to get them implemented into the file and whatnot. Can someone help me? I have the code listed below. Is it because my file is about.html and not about.php? Or am I just doing something wrong? If I can't do it through PHP can someone help me do it through JavaScript with a foreach loop type thing for my images I'm wanting to use?

<!DOCTYPE html>
<html>
  <head>
    <title>Leah Pugh Stories</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="css/bootstrap.min.css" rel="stylesheet" media="screen">
    <link href="css/bootstrap-theme.min.css" rel="stylesheet" media="screen">
    <link href="css/main.css" rel="stylesheet" media="screen">
  </head>
  <body>
    <!-- NAVBAR -->
    <div class="navbar navbar-inverse navbar-fixed-top">
      <div class="container">
      <div id="notification">
    This site is under construction. Leave feedback by clicking the link at the bottom of the page.
    </div>
       <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
        </button>      
        <a class="navbar-brand text-muted" href="index.html">Leah Pugh</a>
        <div class="collapse navbar-collapse">
          <ul class="nav navbar-nav navbar-right">
            <li><a href="index.html">Stories</a></li>
            <li><a href="purchase.html">Purchase</a></li>  
            <li class="active"><a href="about.html">About Leah</a></li>
            <li><a href="contact.html">Contact</a></li>
          </ul>
        </div>
      </div>
    </div>
    <!-- END NAVBAR -->
    <!-- CONTAINER -->  
    <div class="container"> 
      <!-- MAIN BODY CONTENT -->    
        <section>
        <img src="img/LeahPugh.jpg" alt="Photo of Leah Pugh" class="profile-photo hidden-xs">
        <div class="about"> 
        <h3>About</h3>
            <p>Hi, my name is Leah Pugh, and I am an author. I mainly write children's books, but am working on some other novels as well. I am currently working on the third book in the Crystal O'Mally series.  The second book is now out and available for purchase! Head over to the <a href="purchase.html">Purchase</a> page for more details! If you would like to follow me or contact me on Facebook, my username is <a href="https://www.facebook.com/LeahPughAuthor?fref=ts">Leah Pugh.</a>I have also won a few awards such as the <i>50 Great Writers You Should Be Reading</i> award two years in a row.</p>
        <?php
            $awards = array('5star-shiny-web', 'LeahPughCard', 'Seal-2013Winner-300-Copy');
        ?>
        <?php
            foreach( $awards as $award ){
        ?>
        <li><span class = "awards <?php echo $awards ?>"</li> 
        <?php
        }
        ?>
        </div>
        </section>
      <!-- END MAIN BODY CONTENT -->
    </div>
    <!-- END CONTAINER -->     
      <!-- FOOTER -->     
      <div id="footer" class="row col-xs-12, col-sm-12, col-md-12, and col-lg-12">
        <a href="https://www.facebook.com/LeahPughAuthor?fref=ts"><img src="img/FB-f-Logo__blue_50.png" alt="Facebook Logo" class="social-icon"></a>
      <p>&copy; 2015 LPSTORIES | This website was designed and coded by <a href="mailto:danielh.webdev@gmail.com">Daniel Hildreth</a></p>
      </div>
    <!-- END FOOTER -->     
    <script src="http://code.jquery.com/jquery.js"></script>
    <script src="js/bootstrap.min.js"></script>
    <script src="js/scripts.js"></script>    
  </body>
</html>

Answer 1 · 2015-09-10T04:55:01Z

September 10, 2015 4:55am

You will need a .php extension on your file and also a server with PHP installed, such as a local server such as WAMP or MAMP.

Answer 2 · 2015-09-11T04:30:49Z

September 11, 2015 4:30am

I have used XAMPP on Windows 7 and Linux computers and recommend it. You do need the file to be .php. There are also some issues with your code, which I reproduce here for clarity:

<?php
            $awards = array('5star-shiny-web', 'LeahPughCard', 'Seal-2013Winner-300-Copy');
        ?>
        <?php
            foreach( $awards as $award ){
        ?>
        <li><span class = "awards <?php echo $awards ?>"</li> 
        <?php
        }
        ?>

This is how I would write it.

<?php
            $awards = array('5star-shiny-web', 'LeahPughCard', 'Seal-2013Winner-300-Copy');

            foreach( $awards as $award ){

            echo "<li><span class = 'award $award'</li>"; 
            }
        ?>

Answer 3 · 2015-09-12T15:28:43Z

September 12, 2015 3:28pm

Thanks Ted, I put all the code inside the PHP tags, but I still can't see the images on my website. Do I have to add the image file extensions (.png, .jpeg, and etc) to the end of the names in the array? The names in the array is the name of each of the iimages I want to use. I also renamed my file to have the .php on the end of it, and my hosting does support PHP. So anything I'm doing wrong and why I can't see it?

Answer 4 · 2015-09-12T15:52:38Z

September 12, 2015 3:52pm

Ok did a little research and it looks like I have to install a local server on my machine that supports PHP and test it that way, with a live preview. I'll look into the WAMP and let you know after installation and such if it works or not.

Answer 5 · 2015-09-12T18:00:51Z

September 12, 2015 6:00pm

I suggest XAMPP, but have not used WAMP. Yes, you absolutely do need the file extensions. They are part of the file name. Remember that it is also case sensitive.

Welcome to the Treehouse Community

Looking to learn something new?

Daniel Hildreth

Daniel Hildreth

PHP For Each Loops And Images

5 Answers

mikes02

mikes02

Ted Sumner

Ted Sumner

Daniel Hildreth

Daniel Hildreth

Daniel Hildreth

Daniel Hildreth

Ted Sumner

Ted Sumner