WordPress.org

Ready to get started?Download WordPress

Forums

Featured post and thumbnails in 3 columns layout (5 posts)

  1. TootsieRoll
    Member
    Posted 2 years ago #

    I'm trying to feed featured post with thumbnail and excerpt to this layout:
    http://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

  2. vtxyzzy
    Member
    Posted 2 years ago #

    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:

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

    Maybe this can give you some ideas.

  3. TootsieRoll
    Member
    Posted 2 years ago #

    Sweet, thanks, I'll look into it

  4. alchymyth
    The Sweeper & Moderator
    Posted 2 years ago #

    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); ?>>
  5. TootsieRoll
    Member
    Posted 2 years ago #

    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!

Topic Closed

This topic has been closed to new replies.

About this Topic