Uneven grid for latest posts

Resolved

(@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 9 years, 4 months ago by elsonponte.

Viewing 1 replies (of 1 total)

Plugin Author

Hector Cabrera

(@hcabrera)

9 years, 4 months ago

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.

Tags