How to display name under photo in a foreach loop - php

Question

Edit: I'm using php to accomplish this.
I'm making a page that draws information from a database (name, photo path) and I want it to show the picture and then the name of who it is underneath.
foreach ($result_array as $la ) {
$firstname = $la['first_name'];
$lastname = $la['last_name'];
$fullname = $firstname . ' ' . $lastname;
$image = $la['photo'];
echo '<img src="' . $image . '" width="100px" height="100px" alt="'.$fullname.'"/> '.$fullname.' ';
}
As of now, the name is displayed next to the photo and just looks bad. How would I go about making the name appear below the photo?

Answer 1

While a little more code than simply adding a line break, you could wrap your image in a <figure> and add a <figcaption> after your <img>.
foreach ($result_array as $la ) {
$firstname = $la['first_name'];
$lastname = $la['last_name'];
$fullname = $firstname . ' ' . $lastname;
$image = $la['photo'];
echo '<figure><img src="' . $image . '" width="100px" height="100px" alt="'.$fullname.'"/><figcaption>'.$fullname.'</figcaption></figure>';
}
To display multiple images per line, add the following to your CSS:
figure {
display: inline-block;
}
Check it out in this jsfiddle.

Answer 2

Try this: Add <br> to create a line break
foreach ($result_array as $la ) {
$firstname = $la['first_name'];
$lastname = $la['last_name'];
$fullname = $firstname . ' ' . $lastname;
$image = $la['photo'];
echo '<img src="' . $image . '" width="100px" height="100px" alt="'.$fullname.'"/> <br>'.$fullname.' ';
}

Answer 3

There are different options for this depending on your needs. A simple solution is to add a line break after the image:
echo '<img src="' . $image . '" width="100px" height="100px" alt="'.$fullname.'"/><br /'.$fullname.' ';
If you want more control on styling, you can wrap the name in a div or span and assign a class to style it further with CSS:
echo '<img src="' . $image . '" width="100px" height="100px" alt="'.$fullname.'"/><div class="imagename">'.$fullname.'</div>';
Of course you could also wrap the entire image and text in a div, with or without the full name in its own div within there for further styling flexibility.