Extra CSS class in last column (loading posts in loop)

  • Resolved AvWijk

    (@avwijk)


    10 years, 9 months ago

    Probably a very easy question to solve:

    I have a bootstrap framework with four columns, only thing is that the last column should have a class added ‘column-last’. How do I do that?

    Code is as follows

    <?php if (have_posts()) : ?><?php $paged = (get_query_var('paged')) ? get_query_var('paged') : 1; query_posts("category_name=portfolio&paged=$paged&posts_per_page=4"); ?>
                             <?php while (have_posts()) : the_post(); ?>
								   <?php if (has_post_thumbnail( $post->ID ) ): ?>
                                         <?php $image = wp_get_attachment_image_src( get_post_thumbnail_id( $post->ID ), 'single-post-thumbnail' ); ?>

                                 <div class="percent-one-fourth box fadeIn"><div class="work-member"><a title="Roche Corporate Mobile Website"><img class="work-avatar tempfilter" src="<?php echo $image[0]; ?>" alt="<?php the_title() ?>" title="<?php the_title() ?>"/></a></div></div>
                                     <?php endif; ?>
                                     	<?php endwhile; else: ?>
                		<?php endif; ?>
Viewing 4 replies - 1 through 4 (of 4 total)
  • Thread Starter AvWijk

    (@avwijk)

    The output should be like this:

    <div class="percent-one-fourth box fadeIn"><div class="work-member">stuff</div>
<div class="percent-one-fourth box fadeIn"><div class="work-member">stuff</div>
<div class="percent-one-fourth box fadeIn"><div class="work-member">stuff</div>
<div class="percent-one-fourth <strong>column-last</strong> box fadeIn"><div class="work-member">end column stuff</div>
    Moderator bcworkz

    (@bcworkz)

    Is each subsequent post placed in a subsequent column or are several posts output before the next column is output? Which way will dictate the exact method, but either way you need to maintain a loop counter.

    In the first case you output the different code for the fourth column when the loop count modulo 4 is 3. In the latter case output various combinations of close and open tags when the count reaches quarter increments of the posts per page count.

    use the build-in loop counter;

    untested:

    <div class="percent-one-fourth <?php if( $wp_query->current_post%4 == 3 ) echo ' column-last '; ?> box fadeIn"><div class="work-member"><a title="Roche Corporate Mobile Website"><img class="work-avatar tempfilter" src="<?php echo $image[0]; ?>" alt="<?php the_title() ?>" title="<?php the_title() ?>"/></a></div></div>
    Thread Starter AvWijk

    (@avwijk)

    Alchymyth, hero!! That did the trick.

Viewing 4 replies - 1 through 4 (of 4 total)
  • The topic ‘Extra CSS class in last column (loading posts in loop)’ is closed to new replies.