Page to show example of the shortcode to post list

page-custom.php

<?php

/**
 * Template Name: Custom Template
 */

function posts_lists($atts) {

	// Attributes
	$atts = shortcode_atts(
		array(
			'post_type' => 'article',
			'per_page' => '-1',
			'orderby' => 'date',
			'meta_position' => 'bottom',
			'show_excerpt' => true,
		),
		$atts,
		'video_embed'
	);
    
	$post_type = explode( ',', $atts['post_type'] );	
    $posts = new WP_Query(array('post_type' => $post_type, 'orderby' => $atts['orderby'], 'order' =>'ASC','posts_per_page' => $atts['per_page']));
    var_dump($post_type);

    if ($posts->have_posts()):
        $output = '';
        $output.= '<div class="container">';
        $output.= '<div class="row inner-content-width">';        
        while ($posts->have_posts()):
            $posts->the_post();
            $post_thumbnail_id = get_post_thumbnail_id();
            $post_thumbnail_url = wp_get_attachment_url($post_thumbnail_id);
        $position = ( $atts['meta_position'] == 'left') ? 'pull-left' : '';
        $bool = filter_var($value, FILTER_VALIDATE_BOOLEAN);

        $excerpt = ( filter_var($atts['show_excerpt'], FILTER_VALIDATE_BOOLEAN) ) ? '<p class="excerpt">' . get_the_excerpt() . '</p>' : '';
        
	    $output .= '<div class="col-xs-12 col-sm-6 post">
	    	<a class="overlay" href="' . get_the_permalink() . '"></a>
	    	<div class="image '.$position.'">
               ' . get_the_post_thumbnail(null, null, array('class' => 'img-responsive')) . '
            </div>
            <div class="copy-slug">
                <h3 class="header sans">' . get_the_title() . '</h3>' . $excerpt . '
            </div>
            </div>';
        endwhile;
        $output.= '</div><!-- row -->';
        $output.= '</div><!-- container -->';
    else:
        $output = '<p class="bg-danger">Not Activities Found!</p>';
    endif;    
    wp_reset_postdata();
    return $output;
}

add_shortcode('posts-list', 'posts_lists');
get_header();
?>
<style>
	body {
  font-family: 'Bitter', 'Georgia', serif;
  font-weight: 400;
}
.inner-content-width {
  width: 960px;
  margin: 0 auto;
  padding: 10px 0px;
}

.post {
  margin-bottom: 40px;
  overflow: hidden;
}

.post .image {
  width: 44%;
  margin-right: 6%;
  /*float: left;*/
  position: relative;
  margin-bottom: 10px;
}

a.overlay {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  text-decoration: none;
  /* Makes sure the link   doesn't get underlined */
  z-index: 100;
  /* raises anchor tag above everything else in div */
  background-color: white;
  /*workaround to make clickable in IE */
  opacity: 0;
  /*workaround to make clickable in IE */
  filter: alpha(opacity=1);
  /*workaround to make clickable in IE */
  cursor: pointer;
}

a ~ .image {
  opacity: .9;
}

a:hover ~ .image {
  opacity: 1;
}

.post .copy-slug h3 {
  text-transform: uppercase;
  font-family: 'Oswald', 'Impact', sans-serif;
  font-weight: 400;
  font-size: 1.2em;
  line-height: 1.2em;
  margin-top: 0px;
  margin-bottom: 5px;
}

.post .copy-slug .excerpt {
  padding-top: 15px;
  font-size: .88em;
  line-height: 1.5em;
}

.post .copy-slug:before {
  content: '';
  margin-left: 50%;
  width: 50%;
  height: 100%;
  position: absolute;
  left: 0;
  top: 0;
  background: -moz-linear-gradient(rgba(255, 255, 255, 0) 150px, white);
  background: -ms-linear-gradient(rgba(255, 255, 255, 0) 150px, white);
  background: -o-linear-gradient(rgba(255, 255, 255, 0) 150px, white);
  background: -webkit-gradient(linear, 0 0, 0 100%, color-stop(1.5, rgba(255, 255, 255, 0)), to(white));
  background: -webkit-linear-gradient(rgba(255, 255, 255, 0) 150px, white);
  background: linear-gradient(rgba(255, 255, 255, 0) 150px, white);
}
</style>

<?php

echo do_shortcode('[posts-list post_type="spirits, articles" per_page="10" show_excerpt="false"]');
?>