Alternating post styles

[mymoiety]

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 "odd" posts where the featured image is full width, but cropped in height (3:2 ratio). The "even" 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?

//* Adding even/odd post classes
     add_filter( 'post_class', 'even_odd_post_class' );
     function 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;
    overflow:hidden;
}

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

.even.entry img{
    height:auto;
    width:400px;
}

Here's an idea of what I want it to look like:
http://themes.fuelthemes.net/?theme=thevoux

[blogger boutique]

Did you find a solution to this? It sounds like something I would like to know how to do, as well. Care to share?

[carasmo]

You would use:nth-child
https://css-tricks.com/almanac/selectors/n/nth-child/

/* === change every other entry on a loop === */
.content .entry:nth-of-type(odd) {
  background-color: red;
}

/* ====== every 3rd =========== */
.content .entry:nth-of-type(3n) {
  background-color: purple;
}

Modern browsers only (ie9 and up). If you need IE8 support use jQuery to assign classes for each using similar means and then style with CSS. There may be a polyfil. I don't bother with styling IE8 precisely, if it looks good and readable, then that's all you can expect from a very old browser.

---

Genesis Theme Customization and Help

[carasmo]

Target the image of the odd child:

/* === change every other entry on a loop === */
.content .entry:nth-of-type(odd) .class-of-direct-parent-of-the-image {
  /* styles for image */
}

Where .class-of-direct-parent-parent-of-the-image is usually an <a href=" pointing to the post. If your blog is set up without anything around the img you can use just "img" without the dot or quote marks.

---

Genesis Theme Customization and Help

[Author]

Posts