First thumbnail bigger than others

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 ??

What version of WPP are you using now?

The last one

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?

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.

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.

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.