Support » Plugin: WordPress Popular Posts » Uneven grid for latest posts

  • Resolved elsonponte

    (@elsonponte)



    Hello there,

    I am using custom code to output the latest posts on a top section of a website’s homepage. My goal was to use an uneven grid where the first post’s thumbnail will be bigger and the rest of the top posts would have smaller thumbs.

    To achieve this I am using a bootstrap grid. Before using this plugin I was using conditions to count the post order and output the first top post markup different than the rest but since the markup is inside the args I have not found a way to make this markup to change according to each post.

    My code:

    <?php
    
          // Define a new query for the plugn
          $args = array(
              'header' => 'Popular Posts'
          );
    
          if ( function_exists('wpp_get_mostpopular') ) {
    
            ?>
    
            <div class="top-posts">
              <div class="wrap container">
                <div class="main">
    
                  <div class="text-xs-center">
                    <h2 class="section-title">Best Posts</h2>
                  </div>
    
                  <?php
                  $args = array(
                    'range' => 'weekly',
                    'limit' => 6,
                    'thumbnail_width' => 320,
                    'thumbnail_height' => 180,
                    'post_type' => 'post',
                    'title_length' => 20,
                    'stats_views' => 1,
                    'stats_date' => 1,
                    'wpp_start' => '<div class="row">',
                    'stats_date_format' => 'F j, Y',
                    'post_html' => '
                      <div class="col-xs-12 col-lg-4 latest-block-small">                          
                        <article>
                          <a class="thumb-link" href="{url}">{thumb_img}</a>
                          
                          <div class="latest-block-small-inside-content">
                            <h2 class="entry-title"><a class="entry-title-link" href="{url}">{text_title}</a></h2>
                          </div>
                        </article>
                      </div>
                    '
                  );
                  wpp_get_mostpopular( $args );
                  ?>
                
                </div>
              </div>
            </div>
          </div>
    
          <?php
    
        }

    Have anyone implemented a solution like this before using the plugin?

    Thanks.

    • This topic was modified 1 year, 7 months ago by  elsonponte.
Viewing 1 replies (of 1 total)
  • Plugin Author Hector Cabrera

    (@hcabrera)

    Hi!

    Some time ago someone asked a similar question but I can’t find it at the moment.

    Instead of using the post_html parameter to customize the output of the wpp_get_mostpopular() template tag use the wpp_custom_html filter hook since it allows you to loop through the array of post objects.

    For example:

    add_filter( 'wpp_custom_html', 'my_popular_posts_grid', 10, 2 );
    function my_popular_posts_grid( $popular_posts_array, $instance ) {
    
        $counter = 0;
        $output = '<div class="row">';
    
        foreach( $popular_posts_array as $popular_post ) {
    
            if ( 0 == $counter ) {
                /*
                 * TODO:
                 *
                 * Build markup for post with large thumbnail.
                 */
            }
            else {
                /*
                 * TODO:
                 *
                 * Build markup for post with small thumbnail.
                 */
            }
    
            $counter++;
    
        }
    
        $output .= '</div>';
    
        return $output;
    
    }

    … and then change your wpp_get_mostpopular() template tags to:

    if ( function_exists('wpp_get_mostpopular') ) {
    
        $args = array(
            'range' => 'weekly',
            'limit' => 6,
            'post_type' => 'post',
            'title_length' => 20,
            'stats_views' => 1,
            'stats_date' => 1,
            'stats_date_format' => 'F j, Y'
        );
        wpp_get_mostpopular( $args );
    
    }

    Make sure to check out the links from above for more detailed examples.

Viewing 1 replies (of 1 total)
  • The topic ‘Uneven grid for latest posts’ is closed to new replies.