Alternating post styles

  • So, I’ve been trying to set up some alternating post styles on this blog design I’m working on. I’ve currently managed to set up two different post classes (odd and even) and used css to change look of these classes. But I’m wondering if I can do it a better way…

    What I want is to have .even posts where the featured image is full width, but cropped in height (3:2 ratio). The odd posts I want to have a much smaller image (about 50% of the width of the post) and be 1:1 ratio with the title, info and excerpt to the right of it. I have the look I want, except for the image ratios, though I feel like the code isn’t perfect…

    I’m trying to learn, so is there a better way to do this?

    //* Add even/odd post class for Posts in Posts page, Archives and Search results
     add_filter( 'post_class', 'sk_even_odd_post_class' );
     function sk_even_odd_post_class( $classes ) {

     global $wp_query;

     if ( is_home() || is_archive() || is_search() ) {
     $classes[] = ($wp_query->current_post % 3 == 0) ? 'odd' : 'even';
     }

     return $classes;

    }

    CSS

    /*Styrer annenhver post*/
.odd.entry {
    border: 0px solid #288eb0;
    width:100%;
}

.odd.entry img{
    width:100%;
    height:auto;
    /*max-height:400px;*/
    overflow:hidden;
}

.even.entry {
    border: 0px solid #fff;
}

.even.entry img{
    height:auto;
    width:400px;
}
Viewing 3 replies - 1 through 3 (of 3 total)
  • Moderator Jose Castaneda

    (@jcastaneda)

    THEME COFFEE MONKEY

    Hey moiety!

    One way I can think of would be using the post_thumbnail_size filter for the_post_thumbnail.

    Something like:

    add_filter( 'post_thumbnail_size', 'm_new_size' );
function m_new_size( $size ){
	if ( ( $GLOBALS['wp_query']->current_post % 3 ) == 0 ){
		return 'one-one-ratio';
	} else {
		return 'three-two-ratio';
	}
}

    Sort of a quick and dirty example of how you can do it. Hope that helps steer you in the right direction!

    Thread Starter moiety

    (@moiety)

    I tried adding 

    add_filter( 'post_thumbnail_size', 'm_new_size' );
    function m_new_size( $size ){
        if ( ( $GLOBALS['wp_query']->current_post % 3 ) == 0 ){
            return genesis_do_post_image(1000,400,true);
        } else {
            return genesis_do_post_image(600,600,true);
        }
    }

    to functions.php, but it didn’t work… I’m starting to wonder if I should just crop the featured image with css, but I’m not sure how to do that either…

    Moderator Jose Castaneda

    (@jcastaneda)

    THEME COFFEE MONKEY

    Hey moiety,

    I think part of that reason is because the function needs to return a text string rather than print up some HTML. The text you return would be the corresponding image size that you added.

    So, if you had an image size called slider-large, it would look like:

    add_filter( 'post_thumbnail_size', 'm_new_size' );
function m_new_size( $size ){
	if ( is_front_page() ){
		return 'slider-large';
	} else {
		return $size;
	}
}

    Do keep in mind that commercial products are not supported on these forums.

Viewing 3 replies - 1 through 3 (of 3 total)
  • The topic ‘Alternating post styles’ is closed to new replies.