Add class to featured thumb array

  • I’m using the following code to display featured images of a category. It shows them inline and my css has a right-margin of 20px. The problem is the last image in the array still has the right-margin and I want to override this with a right-margin of 0.
    Normally, I would add a class called .last and create a custom style for this but I can’t get that to work with my code below. Any ideas?

    Thanks,
    Bob

    <?php
$args = array(
    'post__in' => get_option('sticky_posts'),
    'cat' => 4,
    'showposts' => 4,
    'orderby' => date,
    'order' => 'desc'
);

$sticky = new WP_Query( $args );
if ( $sticky->have_posts() ):
    while ( $sticky->have_posts() ): $sticky->the_post(); ?>
 <a href="<?php the_permalink(); ?>"><?php
    if ( has_post_thumbnail() ) {
  the_post_thumbnail('homepage-thumb');
}
    endwhile;
endif;
wp_reset_query();
?></a>
Viewing 6 replies - 1 through 6 (of 6 total)

  • In theory (as I haven’t tested the code) this should work:

    <?php
    $args = array(
        'post__in' => get_option('sticky_posts'),
        'cat' => 4,
        'showposts' => 4,
        'orderby' => date,
        'order' => 'desc'
    );

    $sticky = new WP_Query( $args );
    if ( $sticky->have_posts() ):
    // set loop counter so we know which post is displayed
        $loopCounter = 1;

    // count all posts
        $totalPosts = count($sticky);

    // set array with arguments that's going to be passed to the_post_thumbnail function
        $the_post_thumbnail_last_post_args = array();

        while ( $sticky->have_posts() ): $sticky->the_post(); ?>
     <a href="<?php the_permalink(); ?>">
        <?php
            if ( has_post_thumbnail() ) {

// if last post's being displayed - add class argument so it adds class=last to the last image
                if ( $loopCounter == $totalPosts ){
                    $the_post_thumbnail_last_post_args = array(
                        'class' => ' last'
                    );
                    the_post_thumbnail('homepage-thumb',$the_post_thumbnail_last_post_args);
                }
            }
        ?>
     </a>
        <?php
        ++$loopCounter;
        endwhile;
    endif;
    wp_reset_query();
?>

    Any joy with this one?

    Thread Starter rwilki

    (@rwilki)

    Wow thanks for this code. I figured out a CSS hack to create an override that works fine but might not be as elegant as your approach.

    div :nth-child(4n+4) {max-width:228px !important;}

    Thanks again for your time and I’ll try your approach!
    Bob

    The :nth-child pseudo-class is a perfectly valid approach – well done. It may be also worth reading this thread on stackoverflow.

    Thread Starter rwilki

    (@rwilki)

    @x500.net I did try your code and it only displayed one thumbnail not the 4 I was expecting. That’s why I went with the CSS solution.

    Thanks for sending the stackoverflow link. Figures IE has a problem with something…

    @rwilki Please find the corrected code below

    <?php
    $args = array(
        'post__in' => get_option('sticky_posts'),
        'cat' => 4,
        'showposts' => 4,
        'orderby' => date,
        'order' => 'desc'
    );

    $sticky = new WP_Query( $args );
    if ( $sticky->have_posts() ):
    // set loop counter so we know which post is displayed
        $loopCounter = 1;

    // count all posts
        $totalPosts = count($sticky);

    // set array with arguments that's going to be passed to the_post_thumbnail function
        $the_post_thumbnail_last_post_args = array();

        while ( $sticky->have_posts() ): $sticky->the_post(); ?>
     <a href="<?php the_permalink(); ?>">
        <?php
            if ( has_post_thumbnail() ) {

// if last post's being displayed - add class argument so it adds class=last to the last image
                if ( $loopCounter == $totalPosts ){
                    $the_post_thumbnail_last_post_args = array(
                        'class' => ' last'
                    );
                }
                the_post_thumbnail('homepage-thumb',$the_post_thumbnail_last_post_args);
            }
        ?>
     </a>
        <?php
        ++$loopCounter;
        endwhile;
    endif;
    wp_reset_query();
?>
Viewing 6 replies - 1 through 6 (of 6 total)
  • The topic ‘Add class to featured thumb array’ is closed to new replies.