I am trying to output the latest 5 posts from my blog. I would like each post thumbnail to populate divs in the following format.
<div class="row full">
<div class="large-6 medium-6 small-12 columns"></div>
<div class="large-6 medium-6 small-12 columns"></div>
</div>
<div class="row full">
<div class="large-4 medium-4 small-12 columns"></div>
<div class="large-4 medium-4 small-12 columns"></div>
<div class="large-4 medium-4 small-12 columns"></div>
</div>
I’ve obtained this code from another post with a few edits but I’m not hitting the mark.
<?php
// Let's get all posts with thumbnail set in some category
$args = [
'posts_per_page' => 5,
'orderby' => 'date',
'order' => 'DESC'
];
// Fetch posts
$query = new WP_Query( $args );
if( $query->have_posts() )
{
while ( $query->have_posts() )
{
$query->the_post();
// Collect all items into a temp array
$tmp[] = sprintf(
'<div class="small-12 medium-6 large-6 columns"><a href="https://wordpress.stackexchange.com/questions/216480/%s">%s</a></div>',
get_permalink(),
get_the_post_thumbnail( get_the_ID(), 'large' )
);
}
$tmpp[] = sprintf(
'<div class="small-12 medium-4 large-4 columns"><a href="https://wordpress.stackexchange.com/questions/216480/%s">%s</a></div>',
get_permalink(),
get_the_post_thumbnail( get_the_ID(), 'large' )
);
}
// Split the divs into rows of 2 items
$rows = array_chunk( $tmp, 2 );
// Split the second chunk of divs into rows of 3 items
$rowss = array_chunk ($tmpp, 3);
// Housecleaning
unset( $tmp );
unset( $tmpp);
wp_reset_postdata();
// Output the rows
foreach( $rows as $row ){
printf( '<div class="row full">%s</div>', join( '', $row ) );
}
foreach( $rowss as $roww ){
printf( '<div class="row full">%s</div>', join( '', $roww ) );
}
?>
Unfortunately it’s not working correctly. What it’s outputting is this:
<div class="row full">
<div class="small-12 medium-6 large-6 columns"><a href="http://localhost:8888/myoshdiy/2015/12/15/5-decorating-tips-for-every-living-room/"><img width="1024" height="640" src="https://localhost:8888/myoshdiy/wp-content/uploads/2015/12/living-room-pictures-1024x640.jpg" class="attachment-large wp-post-image" alt="living-room-pictures"></a></div>
<div class="small-12 medium-6 large-6 columns"><a href="http://localhost:8888/myoshdiy/2014/03/26/excepteur-sint/"><img width="800" height="533" src="https://localhost:8888/myoshdiy/wp-content/uploads/2014/03/LED-flushmount.jpg" class="attachment-large wp-post-image" alt="LED-flushmount"></a></div>
</div>
<div class="row full">
<div class="small-12 medium-6 large-6 columns"><a href="http://localhost:8888/myoshdiy/2014/03/26/post-template-2/"><img width="576" height="384" src="https://localhost:8888/myoshdiy/wp-content/uploads/2014/03/165912.jpg" class="attachment-large wp-post-image" alt="165912"></a></div>
<div class="small-12 medium-6 large-6 columns"><a href="http://localhost:8888/myoshdiy/2014/03/26/left-sidebar-post/"><img width="800" height="534" src="https://localhost:8888/myoshdiy/wp-content/uploads/2014/03/165961.jpg" class="attachment-large wp-post-image" alt="165961"></a></div>
</div>
<div class="row full">
<div class="small-12 medium-6 large-6 columns"><a href="http://localhost:8888/myoshdiy/2014/03/26/wine-101-essential-wine-tips-and-information/"><img width="1024" height="682" src="https://localhost:8888/myoshdiy/wp-content/uploads/2014/03/IMG_9944-1300x866-1024x682.jpg" class="attachment-large wp-post-image" alt="IMG_9944-1300x866"></a></div>
</div>
<div class="row full">
<div class="small-12 medium-4 large-4 columns"><a href="http://localhost:8888/myoshdiy/2014/03/26/wine-101-essential-wine-tips-and-information/"><img width="1024" height="682" src="https://localhost:8888/myoshdiy/wp-content/uploads/2014/03/IMG_9944-1300x866-1024x682.jpg" class="attachment-large wp-post-image" alt="IMG_9944-1300x866"></a></div>
</div>