Member Avatar for DaveyMoyes

Hi Everyone, I have a foreach array that prints out images one per line.

How can I print images out so I have 3 per line ?

here is the code I am working with.

        if (count($friendDataRawArray) > 0) {
            foreach ( $friendDataRawArray as $id => $friend) {

                //$name = $friend['name'];
                $photo = $friend['photo'];

            $html .= '<div class="fb-friend"><img src="' . $photo . '" alt="" class="fb-friend-img" /></div>';

It is driving me nuts, any help, and learning curve very much appreciated.

  • 2 Contributors
  • 4 Replies
  • 194 Views
  • 1 Hour Discussion Span
  • Latest Post Latest Post by brandonrunyon

Dani AI

Generated

Short answer: prefer a CSS layout. That keeps HTML/PHP simple and avoids brittle <br> hacks. As noted, a DIV is block-level — so either make each friend an inline-level box or use a grid/flex container so three items naturally sit on a row.

A simple CSS Grid solution (recommended for modern browsers):

.friends-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
}
.friend-item img {
  width: 100%;
  height: auto;
  display: block;
}
@media (max-width: 600px) {
  .friends-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 400px) {
  .friends-grid { grid-template-columns: 1fr; }
}

Wrap all friend blocks with a single container (class above). No server-side row markup required, and the layout becomes responsive.

If you must create explicit rows in PHP (for older environments or specific markup), use a counter and modulo to open/close row wrappers and remember to close the final row if the total count is not divisible by 3. Example pattern:

$i = 0;
foreach ($friends as $f) {
    if ($i % 3 === 0) echo '<div class="friends-row">';
    $src = htmlspecialchars($f['photo'], ENT_QUOTES, 'UTF-8');
    echo '<div class="friend-item"><img src="' . $src . '" alt=""></div>';
    if ($i % 3 === 2) echo '</div>';
    $i++;
}
if ($i % 3 !== 0) echo '</div>';

Quick tips: avoid using <br> for layout; use CSS for spacing and responsive behavior; add loading="lazy" on img for performance; always escape user data (htmlspecialchars) to prevent XSS; test at different widths to confirm 3/2/1 column behavior. This keeps markup clean and the layout stable.

Recommended Answers

All 4 Replies

Member Avatar for brandonrunyon

I don't know what your array looks like, but you could do an foreach and then embed a while loop that cuts after three photos

foreach($array as $a) {
    while ($i<3) {
        print $a['photo'][$i];
    }
}
Member Avatar for DaveyMoyes

Hi, thanks for the quick responce.
How would I encorporate your code into mine.
As I am trying to get the image of a friend using the $id & $friend vars.
Thanks in advance.

Member Avatar for DaveyMoyes

Hi, I forgot to mention that I didnt want to stop at just three images, I would like to display all images, but just three per line ?

Member Avatar for brandonrunyon

a div is display block, so it's always going to display on a new line, you could put a counter in your loop and then print a break tag after it gets to 3. The resulting format might look like :

<div>
    <img src="someimg.png" />
    <img src="blah.jpg" />
    <img src="xxx.png" />
    <br />
    <img />
    <img />
    <img />
    <br />
</div>

or whatever you like, as an img tag is inline, it would show 3 to a line, broken by a break, you could also do them by way of divs since they are block.

Edited by brandonrunyon
Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.