Support » Plugin: WordPress Popular Posts » First thumbnail padding bottom and excerpt

  • Resolved bstojkoski

    (@bstojkoski)


    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 Héctor Cabrera

    (@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 Héctor Cabrera

    (@hcabrera)

    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>";

    bstojkoski

    (@bstojkoski)

    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?

    • This reply was modified 1 month ago by  bstojkoski.
    Plugin Author Héctor Cabrera

    (@hcabrera)

    Yep, just update it with what I posted above @bstojkoski.

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