0

To be specific:

  • I'm using Masonry to show all posts within a certain category
  • Thumbnail images for each post are shown on the category page in a 3-column format using CSS fluid width columns
  • I need to show the 7th thumbnail image spanning the width of all 3 columns

In the past I've added a counter to posts to target the Xth post to apply a class and style accordingly. But is that possibly with Masonry, which is absolutely positioning elements?

EDIT

I'm using this code to query posts on the masonry page:

    if ( get_query_var( 'paged' ) ) {
    $paged = get_query_var( 'paged' );
} elseif ( get_query_var( 'page' ) ) {
    $paged = get_query_var( 'page' );
} else {
    $paged = 1;
}
$args = array(
    'posts_per_page' => 12, 
    'paged' => $paged
);

// Override the primary post loop
query_posts( $args );
1

This shouldn't be a problem with Masonry, at least I never had one with it (or its similar equivalent Isotope). Actually it is just the beauty of those libraries that you are able to have this kind of layout. The rest comes down to the right CSS styles. I don't know how you apply your counter/index class, but I would do it like shown below:

function wpse151589_indexed_post_class( $classes ) {
    global $wp_query;

    // the current_post property value starts counting at 0
    // we are doing + 1 to start from 1
    $index = $wp_query->current_post + 1;

    // if you want the number to always have 3 digits
    // like 001, uncomment the next line
    //$index = sprintf( '%1$03d', $index );

    // results in classes like post-nr-1/001
    $classes[] = 'post-nr-' . $index;

    return $classes;
}
add_filter( 'post_class', 'wpse151589_indexed_post_class' );



Edit: Reply to comment

There are some things I like to note,

  1. Do not use query_posts()

    There is a reason why even the according codex page states:

    This function isn't meant to be used by plugins or themes. As explained later, there are better, more performant options to alter the main query.

    And later on:

    For general post queries, use WP_Query or get_posts.

    And:

    It is strongly recommended that you use the pre_get_posts filter instead, and alter the main query by checking is_main_query

    The two most informational and outstanding sources for the why are actually located here on WordPress Development, they are absolutely worth the read:

  2. That post_class() can't be used outside the loop is not true

    There is even a section about that in the documentation. Granted the codex page for post_class isn't the best there is, but it is clear enough that the function has two parameter, they are: $classes and $post_id.

    post_class( $classes, $post_id );
    

    Which means:

    For displaying posts outside the Loop or in an alternate Loop, the second parameter to the post_class function can be the post ID. Classes will then be determined from that post.

    This - in addition with the information from 1. - makes it very much possible to use this for your purpose.

  3. The WP_Query object has a property named $current_post

    $current_post
    (available during The Loop) Index of the post currently being displayed.

    It can be used for your purpose, so no need to reinvent the wheel.

2
  • Thank you for your reply. This works for adding a numbered class within the primary post loop, but what about for querying posts outside of it? See above question with code added. Thanks!
    – melissa
    Jul 7 '14 at 17:04
  • My pleasure. Good that it works for you, but I have some notes to add, did it as part of the answer, especially in relation to best practice and optimizing your code. Maybe you might just find it interesting and/or helpful. @melissa
    – Nicolai
    Jul 7 '14 at 20:01
0

So I couldn't figure out how to add a number sequence class to each post/article div, but I just changed the template for the 7th post in the masonry template.

I did it like this:

<?php if ( have_posts() ) : ?>
<?php /* Start the Loop */ ?>
<?php while (have_posts()) : the_post(); ?>

<?php $count++; ?>
<?php if ($count == 7) : ?>

     <article class="masonry-entry masonry-3col masonry-post-no-7">
     </article>

<?php else: ?>  

     <article class="masonry-entry masonry-3col">
     </article>
<?php endif; ?>
<?php endwhile; ?>
1
  • This is actually incorrect. You need to reset your $count variable, otherwise this will only fire once. Alternatively, you could use if ( $count % 7 == 0 ) : Jul 7 '14 at 20:34

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.