I am creating an events calendar that pulls a custom post type and displays them in a format which the earliest event is the large featured image, and 4 later events are smaller sub images. Wrapped in a ‘row’ tag, if the counter is 0, the featured image is large (fits 6 columns in bootstrap), and the sub images are small. The smaller images should be in a nested row in itself and also fits 6 columns. My if $counter states that if it is > 0 and < 3, it should create a nested row and add the div.

How do I keep it from repeating the nested row everytime a sub event is made?

here’s the code:

$counter = 0;

            //output the event list
            foreach ($events as $event) : 

            $permalink = $event['permalink'];
            $title = $event['title'];
            $thumb = $event['thumb'][0];
            $ticket = $event['ticket'];

            //Max out at 5 events on page

            ?>
            <?php if ($counter == 0) : ?>
                <div class="event-box col-md-6">
                    <div class="featured-event event-<?php echo $counter; ?>" style="background: url(<?php echo $thumbnail; ?>) center; background-size: cover;">
                        <div class="event-text">
                            <h4><?php echo $title; ?></h4>
                        </div>
                    </div>
                </div>
            <?php endif // counter == 0 ?>

                    <div class="row">
            <?php if ($counter > 0 && $counter < 3) : ?>
                        <?php if ($counter == 1 || $counter == 2) { ?>
                            <div class="event-box col-md-3">
                                <div class="sub-event event-<?php echo $counter; ?>" style="background: url(<?php echo $thumbnail; ?>) center; background-size: cover;">
                                    <div class="event-text">
                                        <h4><?php echo $title; ?></h4>
                                    </div>
                                </div>
                            </div> 
                        <?php } ?>
                    </div>

            <?php endif;  // counter > 1 && < 3 ?>

            <?php $counter++; ?>
          <?php endforeach; $i++; ?>

Read more here: How do I write columns without repeating the row?


Solution:

If you know the solution of this issue, please leave us a reply in Comment section, to update the question.


Wordpress related questions and answers: