Adding a new row after every three images PHP

Question

I've created an image gallery using Advanced Custom fields in WordPress. Now I need to add an if statement that will echo a new div and close it with the class of row after every three images. I have attempted to do it myself but it doesn't work. Where am I going wrong?

<div class="container">
    <?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>
        <?php the_content(); ?>
        <?php endwhile; else: ?>
        <p>No Content</p>
    <?php endif; ?>

    <?php 
        $images = get_field('gallery_images');
        $counter = 3;
    ?>

    <ul class="gal_list">
        <?php foreach( $images as $image ): ?>

        <?php 
            if($counter == 3){
                echo "<div class="row">";
                $counter = 0;
            }
        ?>

            <li class="col-md-4">
                <a class="img-responsive" href="<?php echo $image['url']; ?>" rel="<?php the_title() ?>"><img src="<?php echo $image['sizes']['thumbnail']; ?>" alt="<?php echo $image['alt']; ?>" /></a>
            </li>

            <?php 
                if($counter == 0){
                    echo "</div>";
                }
                $counter++;
            ?>
        <?php endforeach; ?>
    </ul>
</div>

You can easily achieve it by using a [modulo operator](http://php.net/manual/en/language.operators.arithmetic.php). However, I would strongly recommend starting out with something basic at this stage and, maybe, choosing a good editor to work in, to avoid quotation marks inside quotation marks in the future. — Pyromonk, May 22 '17 at 10:02
@Reece what does the `gal_list` class accomplish? Can the `ul` be replaced with a `div`? — Dov Benyomin Sohacheski, May 22 '17 at 10:03
@Reece, [`ul` elements are only supposed to have `li` elements as immediate children](http://stackoverflow.com/questions/11755628/can-i-use-div-as-a-direct-child-of-ul). — Pyromonk, May 22 '17 at 10:04
gal_list was a class just to remove the bullets I guess I could use a div instead — Reece, May 22 '17 at 10:05

score 1 · Accepted Answer · edited May 22 '17 at 10:47

1

You need to escape the quotation because you are using "

Change:

echo "<div class="row">";

To:

echo "<div class=\"row\">";

edited May 22 '17 at 10:47

Dov Benyomin Sohacheski

7,133
7
38
64

answered May 22 '17 at 09:43

Simos Fasouliotis

1,383
2
16
35

thanks its still not exactly what I wanted it to look like but now at least the code isn't broken and I can see it. Why did I need to add the slashes? – Reece May 22 '17 at 09:48
@Reece, because quotation marks are [string](http://php.net/manual/en/language.types.string.php) delimiters. – Pyromonk May 22 '17 at 09:59

score 1 · Answer 2 · answered May 22 '17 at 10:11

<div class="container">
    <?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>
        <?php the_content(); ?>
        <?php endwhile; else: ?>
        <p>No Content</p>
    <?php endif; ?>

    <?php 
        $images = get_field('gallery_images');
        $counter = 3;
    ?>

    <?php foreach( $images as $image ): ?>

    <!--add a new row after every three images-->
    <?php 
        if($counter == 3){
            echo "<ul class=\"row gal_list\">";
        }
    ?>

    <li class="col-md-4">
        <a class="img-responsive" href="<?php echo $image['url']; ?>" rel="<?php the_title() ?>"><img src="<?php echo $image['sizes']['thumbnail']; ?>" alt="<?php echo $image['alt']; ?>" /></a>
    </li>

    <!--close the row after three images, also decrement the counter and reset-->
    <?php 
        $counter--;
        if($counter == 0){
            echo "</ul>";
            $counter = 3;
        }
    ?>
    <?php endforeach; ?>
</div>

I this code ok?

Adding a new row after every three images PHP

2 Answers2