Add Posts Thumbnails in Latest Posts shortcode (News Section)

PHP part:

In functions.php add this code:

function cocobasic_latest_posts_thumbnails($atts, $content = null) {
    extract(shortcode_atts(array(
        "class" => '',
        "num" => 5,
        "more" => ''
                    ), $atts));
    global $post;
    $args = array(
        'post_type' => 'post',
        'posts_per_page' => $num
    );
    $loop = new WP_Query($args);
    $return = '<div class="blog-holder-scode latest-posts-scode block center-relative">';
    while ($loop->have_posts()) : $loop->the_post();
        $cat = '';
        foreach ((get_the_category()) as $category) {
            $cat .= '<li><a href="' . get_category_link($category->term_id) . '">' . $category->name . '</a></li> ';
        }
        $return .= '<article id="post-' . $post->ID . '" class="relative blog-item-holder-scode">';
        if (has_post_thumbnail()) {
            $medium_image_url = wp_get_attachment_image_src(get_post_thumbnail_id($post->ID), 'medium');                        
            $return .= '<a href="' . get_permalink($post->ID) . '"><div class="latest-posts-thumbnail" style="background-image: url(' . $medium_image_url[0] . ');"></div></a>';
        }
        $return .= '<h4 class="entry-title"><a href="' . get_permalink($post->ID) . '">' . get_the_title() . '</a></h4>
                    <div class="entry-date published">' . get_the_date('j M Y') . '</div>
                                    <div class="cat-links">
                            <ul>
                            ' . $cat . '                              
                            </ul>
                        </div>';
        $return .= '</article>';
    endwhile;
    if ($more != '') {
        $return .= '<div class="more-posts-link"><a href="' . $more . '"><img src="' . get_template_directory_uri() . '/images/[email protected]" alt=""></a></div>';
    }
    $return .= '<div class="clear"></div></div>';
    wp_reset_postdata();
    return $return;
}
add_shortcode("latest_posts_thumbnails", "cocobasic_latest_posts_thumbnails");

---------------------------

CSS part:

In Dashboard > Appearance > Customize > Additional CSS :

.latest-posts-thumbnail {
    width: 100%;
    height: 300px;
    background-size: cover;
    background-position: center center;
    margin-bottom: 20px;
    transition: .3s;
}
.latest-posts-thumbnail:hover {
    opacity: 0.8;
}

---------------------------

Update the content:

On your "News" section, instant of using:

[latest_posts num="5" more="YOUR_LINK_TO_BLOG"]

use the new shortcode, like this:

[latest_posts_thumbnails num="5" more="YOUR_LINK_TO_BLOG"]

---------------------------

The result:

You should have this as result: