PHP Bootstrap row loop every 3 posts

Question

Trying to display the custom posts on my archive page within a bootstrap row containing 3 columns then starting a new row, got the code but new to PHP and dont know where to put the content.

    <?php
        //Columns must be a factor of 12 (1,2,3,4,6,12)
        $numOfCols = 3;
        $rowCount = 0;
        $bootstrapColWidth = 12 / $numOfCols;
        ?>
        <div class="row">
        <?php
        foreach ($rows as $row){
        ?>  
                <div class="col-md-4"<?php echo $bootstrapColWidth; ?>">
                    <div class="thumbnail">
                        <img src="user_file/<?php echo $row->foto; ?>">
                    </div>
                </div>


        <?php
            $rowCount++;
            if($rowCount % $numOfCols == 0) echo '</div><div class="row">';
        }
        ?>
        </div>


        <div class="embed-container">
        <?php the_field('podcast_embed_link'); ?>
        </div>



        <a href="<?php the_permalink(); ?>" title="<?php the_title_attribute(); ?>"><h3><?php the_title(); ?></a></h3>


        <p><b><?php echo $date->format( $format_out );?></b></p>

        <p><?php the_field('description'); ?></p>

        <?php if( get_field('thumbnail') ): ?>

        <img src="<?php the_field('thumbnail'); ?>" />


        <?php endif; ?>

        <?php endwhile; // end of the loop. ?>


        </div>
    </div>
</div><!-- #content -->

Here is the code for the page archive.podcasts.php, where would i add the custom fields within the row loop?

Nach · Accepted Answer · 2018-01-09 15:48:53Z

2

First of all, you don't need to close and open row tag each 3 items. If you leave the code like this:

<div class="row">
 <?php
        foreach ($rows as $row){
        ?>  
                <div class="col-md-<?php echo $bootstrapColWidth; ?>">
                    <div class="thumbnail">
                        <img src="user_file/<?php echo $row->foto; ?>">
                    </div>
                </div>
        <?php
        }
        ?>
</div>

you will get the same effect, but without the separation that a row tag involves. Notice that the line involving "col-md-4" has already changes in order to not create wrong col size usage.

answered Jan 9, 2018 at 15:48

Nach

3041 silver badge6 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

cmal Over a year ago

where would i add my custom post fields?

Nach Over a year ago

If you want your fields to repeat 3 times per row, you must put your content between the <div class="row-col-<?php echo $bootstrapColWidth;?>"> and </div> tags

cmal Over a year ago

whenever i place inside this tag the posts do not show front end?

cmal Over a year ago

could you please show me how you would layout the code?

Vladimir · Accepted Answer · 2018-01-09 15:41:37Z

0

In this part of code:

<div class="col-md-4"<?php echo $bootstrapColWidth; ?>">

You must get wrong bootstrap class like col-md-41, col-md-412. Correct you code by this way:

<div class="col-md-<?php echo $bootstrapColWidth; ?>">

answered Jan 9, 2018 at 15:41

Vladimir

1,40110 silver badges12 bronze badges

1 Comment

Peter Over a year ago

It will probably do nothing since the value is outputted outside of the "

Collectives™ on Stack Overflow

PHP Bootstrap row loop every 3 posts

2 Answers 2

4 Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

4 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related