How to loop posts in Wordpress?

Question

Guys I need to create that provision of articles in my Wordpress loop and do not know how I could do. I know it will require some instructions in PHP and some implementations of Bootstrap, I’m using this framework CSS.

Does anyone have any idea how I can start thinking about this structure?

Answer 1

Apparently there are some posts that have photo that is 2x1, and others that have photo of 1x2 (I refer to these photos):

In addition, there are 3 columns. Bootstrap can do this easily:

<div class="row">
  <div class="col-md-4">
    <!-- conteudo -->
  </div>
  <div class="col-md-4">
    <!-- conteudo -->
  </div>
  <div class="col-md-4">
    <!-- conteudo -->
  </div>
</div>

Your logic, however, will have to analyze the image of each post within the loop and check:

1. If this post is part of this <div class="row">, or you need to start another
2. If the post is listed as one or two columns.
3. If the post appears as two Rows, you will have to skip the third column in the next Row

Example

Obs: This is not code you can just copy and paste into your application - it’s just an attempt to show something similar to direct you on the right path.

<?php 
 $colunas = 3;
 $coluna_corrente = 0;
 $duas_rows = false;
?>
<?php if ( have_posts() ) : ?>
 <?php while( have_posts() ) : the_post(); ?>
   <?php
    ++$coluna_corrente;
    if ( $coluna_corrente % $colunas == 0 ) {
      echo "<div class='row'>";
    }
    if ( tamanho_relativa_da_foto( $colunas, $post->foto ) < 2 ) { //esse função não existe
     echo '<div class="col-md-4">';
     the_title();
     //algo mais
     echo "</div>";
    } else if ( tamanho_relativa_da_foto( $colunas, $post->foto ) == 2 && !$duas_rows ) {
     echo '<div class="col-md-8">';
     //etc...
     echo '</div>';
    } else {
      $duas_rows = true;
      echo '<div class="col-md-4">';
      //...
      echo '</div>';
    }
    if ( $coluna_corrente == $colunas ) {
      echo "</div>";
    }
   ?>
 <?php endwhile; ?>
<?php endif; ?>

Answer 2

I suggest you use the bootstrap grid http://getbootstrap.com/css/#grid to create the. layouts by first assembling the grids and then implementing the loops. https://codex.wordpress.org/pt-br:O_Loop

Well, I guess it’s something you have to wear:

<div class="row">
  <div class="col-sm-6">  


    <?php if (have_posts()) : ?>
      <?php $number = 0 ?>
      <?php while (have_posts()) : the_post(); ?>
        <article id="post-<?php the_ID(); ?>" <?php post_class(); ?>>
         

            <h2><a href="<?php the_permalink(); ?>" title="<?php the_title(); ?>"><?php the_title(); ?></a></h2>
            <a href="<?php the_permalink(); ?>" title="<?php the_title(); ?>"><p><?php echo the_content(); ?></p></a>
          
 
        </article><!--col--> 
        <?php $number++; ?>      
      <?php endwhile; ?>
    <?php endif; ?>
  </div>  

</div>  

You define how the grid will be represented and then create the loop to bring the wordpress information