First thumbnail padding bottom and excerpt

Resolved bstojkoski
(@bstojkoski)

8 years, 7 months ago

Hello Hector.

I am done with changing the first thumbnail bigger than other thumbnails, and thank you very much for that.

How can I add excerpt only on the first post with the bigget thumbnail and padding bottom 7px from first thumbnail?

Thanks a lot.

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

Viewing 4 replies - 1 through 4 (of 4 total)

Plugin Author

(@hcabrera)

Hey there!

Regarding the excerpt, add this function to your functions.php file and then call it within the loop from your code like this:

<?php
function my_custom_popular_posts_html_list( $posts, $options ){

    ...

    // loop the array of popular posts objects
    foreach( $posts as $popular ) {

        ...

        // Excerpt
        $excerpt = '';

        if ( 1 == $counter ) {
            $excerpt = get_excerpt_by_id( $popular->id );
        }

        $output .= "<li>";
        $output .= $thumbnail;
        $output .= "<a href=\"" . get_permalink( $popular->id ) . "\" title=\"" . esc_attr( $popular->title ) . "\" class=\"wpp-post-title\">" . $popular->title . "</a>";
        $output .= $excerpt;
        $output .= "</li>" . "\n";

        $counter++;

    }

    $output .= '</ul>';

    return $output;

}
add_filter( 'wpp_custom_html', 'my_custom_popular_posts_html_list', 10, 2 );

About the thumbnail, you could just add the style to the image tag directly like so:

$thumbnail = "<a href=\"" . get_permalink( $popular->id ) . "\" style="padding-bottom: 7px;"><img src=\"" . $thumbnail_src . "\" class=\"wpp-thumbnail wpp_cached_thumb wpp_featured\" alt=\"" . esc_attr( $popular->title ) . "\"></a>";

Plugin Author

Hector Cabrera

(@hcabrera)

8 years, 7 months ago

Actually, it should be:

$thumbnail = "<a href=\"" . get_permalink( $popular->id ) . "\" style=\"padding-bottom: 7px;\"><img src=\"" . $thumbnail_src . "\" class=\"wpp-thumbnail wpp_cached_thumb wpp_featured\" alt=\"" . esc_attr( $popular->title ) . "\"></a>";

Thread Starter

bstojkoski

(@bstojkoski)

8 years, 7 months ago

This is the code I have in this moment:


/*
 * 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, 200 ); // Change this
    $regular_thumbnail_size = array( 90, 70 ); // 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 );

I just need to update it?