Welcome to the Treehouse Community
Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.
Looking to learn something new?
Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.
Start your free trialDaniel Hildreth
16,170 PointsPHP For Each Loops And Images
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>© 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>
5 Answers
mikes02
Courses Plus Student 16,968 PointsYou 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.
Ted Sumner
Courses Plus Student 17,967 PointsI 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>";
}
?>
Daniel Hildreth
16,170 PointsThanks 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?
Daniel Hildreth
16,170 PointsOk 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.
Ted Sumner
Courses Plus Student 17,967 PointsI 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.