First thumbnail bigger with post excerpt

Hi bstojkoski,

Can you please help me to make the first thumbnail with different dimensions than other?

You can use CSS’s first-child selector to make the first thumbnail bigger than the rest, but the image might pixelate a bit. You can try adding this to your theme’s stylesheet:

.wpp-list li:first-child a img {
width:100px;
height:100px;
}

… where width and height are the dimensions of the image in pixels. Adjust the values to your needs.

…have post excerpt only in the first post?

This can’t be done easily (or at least I can’t think of a simple solution right now, it’s 12:07 am and I’m a bit tired).

Thank you Hector.

Can I do something about the picture quality, because I want to have first thumbnail with dimension 300×200 ?

Can I do something about the picture quality, because I want to have first thumbnail with dimension 300×200?

Unfortunately, no. The plugin wasn’t designed to create different thumbnail images on the list so the image will pixelate.

There’s an alternative which is to build your own HTML list using this method. With it, you would be able to specify a bigger thumbnail for the first post and also get its excerpt. The downside is that for this you would need coding skills, which I suppose you don’t have. If so, I can provide you with some sample code.

It’s true that I don’t have the needed skills Hector. ??

Please help me with some sample code…

Alright, add this to the end of your theme’s functions.php:

function custom_popular( $original, $data ){
	$counter = 0;

    $output = '<ul>';	

	foreach( $data as $popular ) {
		// Different output for the first post: show different thumbnail and post excerpt (summary)
		if ( 0 == $counter ) {
			$custom_thumbnail = get_the_post_thumbnail( $popular->id, array(300, 200), array('alt' => esc_attr($popular->text_title), 'title' => esc_attr($popular->text_title)) );
			$output .= "<li>{$custom_thumbnail} {$popular->title} {$popular->stats} {$popular->summary}</li>" . "\n";
		} else { // Regular output
			$output .= "<li>{$popular->img} {$popular->title} {$popular->stats}</li>" . "\n";
		}

		$counter++;
	}

	$output .= '</ul>';

	echo $output;
}
add_filter( 'wpp_html', 'custom_popular', 10, 2 );

Keep in mind that this is an experimental feature that works only on WPP version 2.3.7 (the latest version available at the time of writing this). For future versions -like the upcoming WPP 3.0- this piece of code will not work anymore, so please remind me to update it afterwards.

Thank you very much Hector.

You are the best!

Hector, my website is https://denar.mk

I added the code and now other posts in list with smaller thumbnail looks bad ??

I can’t see the popular list due to a Javascript error caused by another plugin / script. Please disable that plugin / script (Poll) or disable WPP’s Ajaxify feature.

I am using W3 Total Cache.

When I added the code you gave me, in my plugin there was no css. It used widget default css code.

Ah, it seems I forgot to add a CSS class to the code. This should suffice:

function custom_popular( $original, $data ){
	$counter = 0;

    $output = '<ul class="wpp-list">';	

	foreach( $data as $popular ) {
		// Different output for the first post: show different thumbnail and post excerpt (summary)
		if ( 0 == $counter ) {
			$custom_thumbnail = get_the_post_thumbnail( $popular->id, array(300, 200), array('alt' => esc_attr($popular->text_title), 'title' => esc_attr($popular->text_title)) );
			$output .= "<li>{$custom_thumbnail} {$popular->title} {$popular->stats} {$popular->summary}</li>" . "\n";
		} else { // Regular output
			$output .= "<li>{$popular->img} {$popular->title} {$popular->stats}</li>" . "\n";
		}

		$counter++;
	}

	$output .= '</ul>';

	echo $output;
}
add_filter( 'wpp_html', 'custom_popular', 10, 2 );

Hector, this is ok.
How can I add class wpp-thumbnail in the first post?

I need this to add padding-top and bottom 5px.

And why between Posttitle and Excerpt text has “:” sign? How can I remove it?

Try changing this line:

get_the_post_thumbnail( $popular->id, array(300, 200), array('alt' => esc_attr($popular->text_title), 'title' => esc_attr($popular->text_title)) );

To:

get_the_post_thumbnail( $popular->id, array(300, 200), array('alt' => esc_attr($popular->text_title), 'title' => esc_attr($popular->text_title), 'class' => 'wpp-thumbnail') );

And why between Posttitle and Excerpt text has “:” sign? How can I remove it?

That’s the default output when the Excerpt option is enabled on the widget. You can remove it by doing any of the following:

• Quick fix: On the widget, enable the Custom HTML Markup option and set Post HTML Markup to <li>{thumb} {title}{excerpt} {stats}</li>.
• Long fix (and probably the best option, IMHO):

1. On the widget, disable the Show post excerpt option (and also the Custom HTML Markup option as well, if enabled).
2. Add this function to your theme’s functions.php.
3. Change this line:
   $output .= "<li>{$custom_thumbnail} {$popular->title} {$popular->stats} {$popular->summary}</li>" . "\n";
   … to:
   $output .= "<li>{$custom_thumbnail} {$popular->title} {$popular->stats} <span class=\"wpp-excerpt\">" . get_excerpt_by_id($popular->id) . "</span></li>" . "\n";

Thanks again Hector. You are awesome.

It would be nice if you make it like option to have different first post on your plugin by default.

You can see the plugin on my website now, it looks great.
I just need to make the first thumb clickable, but I can do it by myself.

https://denar.mk

Hello Hector.

The plugin is updated, and I want to update it, but I don’t want to lose the first big thumbnail.

Can I ask you for help?

Thanks.
Branko

Hi Branko! It’s been a while!

Right now, I’m busy with work projects (and I shouldn’t be here, actually) so I’ll give you a hand with it during this weekend, alright?