How to display the content on the following grid enter image description here Here are my sketches. Like all the same, bring the info as a picture

<div class="col-xs-12"> <?php $the_query = new WP_Query( array( 'cat' => 3, 'showposts' => 6 ) ); ?> <?php if ( $the_query->have_posts() ) : ?> <?php while ( $the_query->have_posts() ) : $the_query->the_post(); ?> <?php $i++; ?> <?php if(in_array($i, array(1,4))) { ?> <div class="column"> <div class="card"> <?php if ( has_post_thumbnail() ) : ?> <a href="<?php the_permalink(); ?>"><?php the_post_thumbnail('thumb3x4'); ?><p><?php the_title(); ?></p></a> <?php endif; ?> </div> </div> <?php } else { ?> <?php if(in_array($i, array(2,5))) { ?><div class="column"><?php } ?> <div class="card"> <?php if ( has_post_thumbnail() ) : ?> <a href="<?php the_permalink(); ?>"><?php the_post_thumbnail('thumb3x2'); ?><p><?php the_title(); ?></p></a> <?php endif; ?> </div> <?php if(in_array($i, array(3,6))) { ?></div><?php } ?> <?php } ?> <?php endwhile; ?> <?php wp_reset_postdata(); ?> <?php endif; ?> </div>
  • What do you want to withdraw? Tabular or block layout? - Yaroslav Molchan
  • @YaroslavMolchan block, although I would just withdraw as on the layout - J.Doe

1 answer 1

 <?$i=0;?> <?php $the_query = new WP_Query( array( 'cat' => 3, 'showposts' => 7 ) ); ?> <?php if ( $the_query->have_posts() ) : ?> <?php while ( $the_query->have_posts() ) : $the_query->the_post(); ?> <?php $i++; ?> <?php if(in_array($i, array(4))) { ?> <div class="column" style="width: 33.33333333%;"> <div class="card card-<?=$i?>"> <?php if ( has_post_thumbnail() ) : ?> <a class="img-href-<?=$i?>" href="<?php the_permalink(); ?>"><?php the_post_thumbnail(array(380,380,true)); ?><p><?php the_title(); ?></p></a> <?php endif; ?> </div> </div> <?php } else { ?> <?php if(in_array($i, array(1,5))) { ?><div class="column" style="width: 33.33333333%;"><?php } ?> <?php if(in_array($i, array(3))){echo"<div class='clearfix'></div>";} ?> <div class="card card-<?=$i?><?if(in_array($i, array(1,2,6,7))):?> col-md-6 p0<?endif;?>"> <?php if ( has_post_thumbnail() ) : ?> <a href="<?php the_permalink(); ?>"><?php the_post_thumbnail('thumb3x2'); ?><p><?php the_title(); ?></p></a> <?php endif; ?> </div> <?php if(in_array($i, array(3,7))) { ?></div><?php } ?> <?php } ?> <?php endwhile; ?> <?php wp_reset_postdata(); ?> <?php endif; ?>