Welcome to the Treehouse Community

The Treehouse Community is a meeting place for developers, designers, and programmers of all backgrounds and skill levels to get support. Collaborate here on code errors or bugs that you need feedback on, or asking for an extra set of eyes on your latest project. Join thousands of Treehouse students and alumni in the community today. (Note: Only Treehouse students can comment or ask questions, but non-students are welcome to browse our conversations.)

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and a supportive community. Start your free trial today.

General Discussion

Joseph McClellan
Joseph McClellan
4,045 Points

PHP loop question

I'm outputting some photos with a php loop and I'd like to assign a css class to every 8th image that is output. I'm not 100% certain how to go about doing this. Any ideas?

I already have a loop implemented to do something with the 32nd image outputted at which point the loop cuts out... here's my code thus far.. oh this is using wordpress as the CMS.

$speakers_image_loop = new WP_Query( $args ); $count = 0; while ( $speakers_image_loop->have_posts() ) : $speakers_image_loop->the_post(); ?>

<?php $count++; ?> <!-- increment the count variable -->

<?php the_post_thumbnail();?>

<?php if ($count == 32) : ?> <!-- output goes here --> <?php else : ?><?php endif; ?> <!-- that's the end of the loop interrupt -->

<?php // Loop ends endwhile; // Reset the query wp_reset_postdata();
?>

So I figure I can just use the count variable and call it on the 8th, 16th and 24th image to be output. It's probably an easy solution, but it's evading me.

3 Answers

A couple of options for you:

Using Only CSS If you are looking to add a class for styling, use CSS (following example does not work non-modern browsers)

div img:nth-child(8n) {
    /* CSS class you wish to add*/
}

CSS-Tricks

Using PHP If you are looking to add the class for reasons other than styling (or for styling in older browsers) the following may help (it uses the modulus operator):

    <?php
// the following goes inside your loop

// increment your counter
++$count;

// used a "switch" statement in case you need to add more items, you could also use an "if" statement
switch (true) {

    // this first, as switch() only executes one item per run
    case (32 === $count):
        // code here for your last item
        break;

    // every 8th item
    case (0 === ($count % 8)):
        echo '<img src="/img/whatever.jpg" alt="alt content" class="eighthItem">
        break;
}
?>

PHP Math page

Joseph McClellan
Joseph McClellan
4,045 Points

I had it working for a while with CSS, then it broke. I figured out what went wrong -- added an 'a' tag before the image. Just had to update the css to be

div a:nth-child(8) img {
    /* css class *
}
Joseph McClellan
Joseph McClellan
4,045 Points

I still need to use the loop for something else, but at least this little problem is fixed. Thanks!