Featured post and thumbnails in 3 columns layout

  • I’m trying to feed featured post with thumbnail and excerpt to this layout:
    https://opusdesign.co/troubleshoot/threecolumns.png

    The difficulty I have is pulling them randomly without them being repeated. With the way I have it right now pulls the posts randomly, but in order to be able to have the two columns div in the center of the page, I have to repeat the random php line, which causes the posts to be repeated.

    Any ideas on how I could achieve that?

    Thanks

Viewing 4 replies - 1 through 4 (of 4 total)
  • vtxyzzy

    (@vtxyzzy)

    It isn’t the same layout, but here is an article showing how to have a multi-column, multi-width layout using only one query and a post counter to set the correct divs:

    https://wordpress.mcdspot.com/2011/06/16/multi-size-multi-row-image-layout/

    Maybe this can give you some ideas.

    Thread Starter TootsieRoll

    (@tootsieroll)

    Sweet, thanks, I’ll look into it

    Michael

    (@alchymyth)

    use a single query and a single loop;

    $wp_query->current_post indicates the post position in the loop, starting with zero for the first post;

    (($wp_query->current_post %5 == 0 || $wp_query->current_post %5 == 3) ? 'first' : '')
    this ternary operator checks for the first and fourth post and adds a css class of .first (as in ‘first in line’) to be styled with clear:both;.

    (($wp_query->current_post %5 <=2) ? ' third' : ' half')
    this ternary operator checks for alternating for three and two posts and adds a css class of .third and .half resp, to be styled with float:left;width:33%; and float:left;width:50%; resp.

    this is how to include the new css classes into the post_class() –
    assuming this is the begin of your post div (example from Twenty Eleven):

    <article id="post-<?php the_ID(); ?>" <?php post_class(); ?>>

    then change to:

    <article id="post-<?php the_ID(); ?>" <?php $extra = array((($wp_query->current_post %5 == 0 || $wp_query->current_post %5 == 3) ? 'first' : ''),(($wp_query->current_post %5 <=2) ? ' third' : ' half')); post_class($extra); ?>>

    Thread Starter TootsieRoll

    (@tootsieroll)

    Wow! awesome, this seems logical, I’ll try it out when I get a chance to get back on that project. I’ll let you know how it goes. Thanks!

Viewing 4 replies - 1 through 4 (of 4 total)
  • The topic ‘Featured post and thumbnails in 3 columns layout’ is closed to new replies.