WordPress.org

Ready to get started?Download WordPress

Forums

[resolved] Latest post in home with different style (6 posts)

  1. Erfo
    Member
    Posted 1 year ago #

    Hi.
    I have latest 4 posts in home page.
    Each post has a thumbnail. I wish that the thumbnails float left in the first post, float right in the second post, float left in the third post and float right in the fourth post.
    How?
    Thanks...

  2. alchymyth
    The Sweeper & Moderator
    Posted 1 year ago #

    assuming your theme is using a default loop and post_class() in the post div, you can try and add a filter to functions.php of your theme, to add alternating css classes to the posts on the front page;
    http://codex.wordpress.org/Function_Reference/post_class
    http://codex.wordpress.org/Function_Reference/post_class#Add_Classes_By_Filters

    example:

    add_filter('post_class','alternating_post_css_class');
    function alternating_post_css_class($classes) {
      if( is_home() ) {
       global $wp_query;
       $classes[] = ($wp_query->current_post%2)?'even-post':'odd-post';
      }
    return $classes;
    }

    and in style.css, add for example:

    .odd-post .wp-post-image { float:left; margin-right:1em; }
    .even-post .wp-post-image { float:right; margin-left:1em; }

    details might depend on the used theme.

  3. Erfo
    Member
    Posted 1 year ago #

    Hi alchymyth.
    When I add that code in functions.php, the home page become blank, so it dowsn't work.

    I have this code in home page:

    <?php $myposts = get_posts('numberposts=4&category=3');
    foreach($myposts as $post) : ?>
    <?php the_post_thumbnail('thumbnail'); ?>
    <?php the_excerpt(); ?>
    <?php setup_postdata($post); ?>
    <?php endforeach; ?>
  4. alchymyth
    The Sweeper & Moderator
    Posted 1 year ago #

    there was an error in my code :-(

    corrected in the reply above.

    anyway, it would not work with get_posts();

    try using a counter variable;

    <?php $myposts = get_posts('numberposts=4&category=3');
    $counter = 1;
    foreach($myposts as $post) : ?>
    <?php $lr = ($counter++%2)?'left':'right'; //check if counter is odd or even and set alignment accordingly ?>
    <?php the_post_thumbnail('thumbnail',array('class' => 'align'.$lr.' attachment-thumbnail')); ?>
    <?php the_excerpt(); ?>
    <?php setup_postdata($post); ?>
    <?php endforeach; ?>

    http://codex.wordpress.org/Function_Reference/the_post_thumbnail

  5. Erfo
    Member
    Posted 1 year ago #

    So, I edit home's code and changed your code:

    <?php if (have_posts()) : ?><?php while (have_posts()) : the_post(); ?>
    
    <a href="<?php the_permalink(); ?>" rel="bookmark" title="<?php the_title(); ?>"><?php the_post_thumbnail('thumbnail'); ?><br/><?php the_title(); ?></a>
    
    <?php endwhile; endif; ?>

    but still doesn't work... Now the home page isn't blank, but the thumbanils aren't alignment...

  6. Erfo
    Member
    Posted 1 year ago #

    EDIT.

    Sorry, your last code is correct and now it works.
    Thanks.

Topic Closed

This topic has been closed to new replies.

About this Topic