Wordpress post grid last posts - html

Question

how can i create a grid like image? for show last posts
<?php if ( have_posts() ) : ?>
<?php while ( have_posts() ) : the_post(); ?>
<?php the_content(); ?>
<?php endwhile; ?>
<?php endif; ?>
<?php wp_reset_query(); ?>
<?php $latest_post = get_posts( 'numberposts=4' ); ?>
<?php foreach( $latest_post as $post ) : setup_postdata( $post ); ?>
<?php the_title(); ?><br />
<?php the_content(); ?>
<?php endforeach; ?>
<?php wp_reset_query(); ?>

Answer 1

One option is to use PHP to swap around the position of the image based on whether or not the increment is odd or even, for instance:
$i = 0;
while ( have_posts() ) : the_post();
if ($i % 2 == 0 ) {
// Display two columns with image on left
}
else {
// Display two columns with image on right
}
$i++;
endwhile;
If you're building your theme from scratch I'd suggest using a grid framework to handle your columns, otherwise see if the theme you're using has a grid framework already.
Edit:
There are also ways of doing this without actually having to change the markup of the page. For instance:
Swapping columns (left / right) on alternate rows
In this case you'd be able to generate your post markup without the if statement and just use CSS to swap the position of the image/video.

Answer 2

You can use the masonry technology or you can try this plugin

Answer 3

In your code above you fired two WordPress content loops. I am not sure why you had to fire two loops, although they both will work. First will print the recent posts depending on the number of Posts Per Page you selected via Settings->Reading tab from your WordPress Dashboard and the second one will again print the top 4 recent posts. I am using the first loop to tell you how you can create the attached image like grid.
Below is the PHP/HTML modifications that you have to make:
<?php $count = 1; if ( have_posts() ) : ?>
<?php while ( have_posts() ) : the_post(); ?>
<div class="one-half <?php if( $count++ % 2 == 0 ): echo 'last-col'; endif; ?>">
<?php
// the function below will print the featured image attached to the post
the_post_thumbnail( 'your-featured-image-sizename' ); ?>
</div>
<!-- one-half -->
<div class="one-half">
<span class="post_stamp"><?php the_time( 'j m Y' ); ?></span>
<span class="post_cat"><?php the_category(', '); // This will print News if you filled the post under News Category ?></span>
<h3><?php the_title(); ?></h3>
<?php the_excerpt(); // Insteading of printing the whole content this function will print exceprt only ?>
</div>
<!-- one-half -->
<div class="clearfix"><!-- --></div>
<?php endwhile; ?>
<?php endif; ?>
<?php wp_reset_query(); ?>
You would have to put the below given links to your style file:
<style>
.one-half{width: 50%; float: left;}
.last-col{float: right;}
.clearfix{clear: both; overflow: hidden;}
</style>
After making the above changes your posts will be displayed as the attached image. Good Luck (y)