Support » Plugin: WordPress Popular Posts » First thumbnail bigger than others

  • Resolved bstojkoski

    (@bstojkoski)


    Hello.

    Can you please help me to make the first thumbnail bigger (300px) than others?

    Thanks a lot.

    The page I need help with: [log in to see the link]

Viewing 12 replies - 1 through 12 (of 12 total)
  • Plugin Author Héctor Cabrera

    (@hcabrera)

    Hi there!

    Sure thing! Add this to your theme’s functions.php file:

    <?php
    /*
     * Customizes the HTML output of the WordPress Popular Posts widget.
     *
     * @param	array	$posts
     * @param	array	$options
     * @return	string
     */
    function my_custom_popular_posts_html_list( $posts, $options ){
    
        $output = '<ul class="wpp-list wpp-list-with-thumbnails">';
        $counter = 1;
    
        $first_thumbnail_size = array( 300, 125 ); // Change this
        $regular_thumbnail_size = array( 90, 77 ); // Change this
    
        // loop the array of popular posts objects
        foreach( $posts as $popular ) {
    
            // Thumbnail
            $thumbnail = '';
    
            if (
                $options['thumbnail']['active']
                && has_post_thumbnail( $popular->id )
            ) {
    
                if ( 1 == $counter ) {
                    $thumbnail_src = get_the_post_thumbnail_url( $popular->id, $first_thumbnail_size );
                }
                else {
                    $thumbnail_src = get_the_post_thumbnail_url( $popular->id, $regular_thumbnail_size );
                }
    
                $thumbnail = "<a href=\"" . get_permalink( $popular->id ) . "\"><img src=\"" . $thumbnail_src . "\" class=\"wpp-thumbnail wpp_cached_thumb wpp_featured\" alt=\"" . esc_attr( $popular->title ) . "\"></a>";
    
            }
    
            $output .= "<li>";
            $output .= $thumbnail;
            $output .= "<a href=\"" . get_permalink( $popular->id ) . "\" title=\"" . esc_attr( $popular->title ) . "\" class=\"wpp-post-title\">" . $popular->title . "</a>";
            $output .= "</li>" . "\n";
    
            $counter++;
    
        }
    
        $output .= '</ul>';
    
        return $output;
    
    }
    add_filter( 'wpp_custom_html', 'my_custom_popular_posts_html_list', 10, 2 );

    Feel free to tweak it to your own needs 🙂

    I added the code, but nothing changed 🙁

    Plugin Author Héctor Cabrera

    (@hcabrera)

    What version of WPP are you using now?

    The last one

    Plugin Author Héctor Cabrera

    (@hcabrera)

    Nope. Just checked your site and you’re running version 4.0.0. The latest one is 4.0.2, so please upgrade and check again.

    I made the upgrade, and nothing is changed.

    I want to ask you if it’s possible the first post to have excerpt?

    Plugin Author Héctor Cabrera

    (@hcabrera)

    Works for me, just tested it on my theme.

    Are you using a caching plugin by any chance?

    I am using W3 Total Cache plugin.

    I think that we should add css class in the code for the first thumbnail.

    Plugin Author Héctor Cabrera

    (@hcabrera)

    You’ll have to disable W3 Total Cache while we’re doing this, otherwise it’s going to be difficult to tell if the changes are applying or not. Once we’re done you can enable it back.

    Additionally, please:

    1. Add the following thumbnail sizes to your theme’s functions.php file:
      // WPP big thumbnail
      add_image_size( 'wpp-big-thumb', 300, 125, true );
      // WPP regular thumbnail
      add_image_size( 'wpp-regular-thumb', 90, 77, true );
    2. Since we are adding new thumbnail sizes, you’ll need to install and run the Regenerate Thumbnails plugin by Alex Mills.

    Hello Hector.

    I think now is ok with the small thumbnails, but the big one is with dimensions 375x250px.

    Plugin Author Héctor Cabrera

    (@hcabrera)

    Change the size here and here, then recreate the thumbnails again with Regenerate Thumbnails.

    Everything is ok now.

    Is it possible to have excerpt only on first post, and add padding from first thumbnail to title 5px?

    Thanks a lot.

Viewing 12 replies - 1 through 12 (of 12 total)
  • You must be logged in to reply to this topic.