Preview posts – blog roll

I am creating a forum thread to where we can add blog posts preview methods. Front page (showing latest posts) or a specific blog page. Focus on best practice methods. Please include both ways front page and blog page. Thanks.

Here are some screenshots from various themes. https://cloudup.com/iCri1KMR4Q1

https://cloudup.com/iAeGY-TL4e4

Here is code that is somewhat similar to the above grid image. Code is from the Bench theme. The problem here is that the grid also jumps into the single post view. So here I need to have a function that only shows it on the blog page. (I have not figured it out yet.)

// Posts grid
 beans_add_attribute( 'beans_content', 'class', 'tm-posts-grid uk-grid uk-grid-width-small-1-2 uk-grid-width-medium-1-3' );
  beans_add_attribute( 'beans_content', 'data-uk-grid-margin', '' );
  beans_add_attribute( 'beans_content', 'data-uk-grid-match', "{target:'.uk-panel'}" );
 beans_wrap_inner_markup( 'beans_post', 'bench_post_panel', 'div', array(
    'class' => 'uk-panel uk-panel-box'
  ) );

https://cloudup.com/iVn--lLdzHI

https://cloudup.com/ioS8LjFxesW

Do please also add additional code snippets for other kinds of layouts. I am creating a tutorial directly in this thread with your help. How do you style the front or blog page?

Here is some code I have found helpful:

We see the featured image in the blog roll/ blog page and here we remove it from single post view.

// Remove featured image from post:  https://community.getbeans.io/discussion/how-to-remove-featured-images-from-posts/
add_action( 'wp', 'beans_child_setup_document' );
function beans_child_setup_document() {
    // Only apply for single view.
    if ( is_single() ) {
        beans_remove_action( 'beans_post_image' );
    }
}

By default it seems the featured images are very large. Here we can resize them to the size we ourselves choose.

/* ---------- Resize featured images: https://community.getbeans.io/discussion/default-featured-image-size/ ------ */
add_filter( 'beans_edit_post_image_args', 'example_post_image_edit_args' );
function example_post_image_edit_args( $args ) {
    return array_merge( $args, array(
        'resize' => array( 200, 200, true ),
    ) );
}