WordPress.org

Ready to get started?Download WordPress

Forums

Add class to featured thumb array (7 posts)

  1. rwilki
    Member
    Posted 10 months ago #

    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>
  2. x500.net
    Member
    Posted 10 months ago #

    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?

  3. rwilki
    Member
    Posted 10 months ago #

    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

  4. x500.net
    Member
    Posted 10 months ago #

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

  5. rwilki
    Member
    Posted 10 months ago #

    @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...

  6. Theme And Simple
    Member
    Posted 10 months ago #


  7. x500.net
    Member
    Posted 10 months ago #

    @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();
    ?>

Reply

You must log in to post.

About this Topic

Tags

No tags yet.