Foreach not displaying multiple contents - php

Question

I have a little problem in my Shortcode which I am creating for WordPress. The foreach loop is not displaying multiple posts each time. I'm not sure why is it doing this because if I var_dump the $post variable it shows that both the posts are available to that variable, can someone help me out please?
CODE:
function notes_shortcode($atts) {
global $post;
$atts = shortcode_atts( array( 'category' => $args["category"]), $atts, 'notes' );
$args = array( 'category_name' => $atts["category"]);
$posts = get_posts( $args );
$date = get_the_date( 'd', $post->ID );
$month = get_the_date( 'M', $post->ID );
foreach( $posts as $post ) {
setup_postdata($post);
$imgURL = getpostImage( $post->ID );
$title = get_the_title( $post->ID );
$content = substr(get_the_content() , 0, 125);
$post = '<div class="animated fadeInUp" data-animation="fadeInUp" data-delay="200" style="opacity: 0;">';
$post .= '<div class="col-md-4 bloglist">';
$post .= '<div class="post-content">';
$post .= '<div class="post-image">';
$post .= '<div class="flexslider blog-slider">';
$post .= '<div class="overlay" style="opacity: 0;"></div>';
$post .= '<div class="flex-viewport" style="overflow: hidden; position: relative;">';
$post .= '<ul class="slides" style="width: 800%; -webkit-transition: 0s; transition: 0s; -webkit-transform: translate3d(-350px, 0px, 0px);">';
$post .= '<li class="clone" aria-hidden="true" style="width: 350px; float: left; display: block;"> <img src="' . $imgURL . '" alt="" draggable="false"> </li>';
$post .= '<li class="flex-active-slide" style="width: 350px; float: left; display: block;"> <img src="' . $imgURL . '" alt="" draggable="false"> </li>';
$post .= '<li style="width: 350px; float: left; display: block;"> <img src="' . $imgURL . '" alt="" draggable="false"> </li>';
$post .= '<li class="clone" aria-hidden="true" style="width: 350px; float: left; display: block;"> <img src="' . $imgURL . '" alt="" draggable="false"></li>';
$post .= '</ul></div></div></div>';
$post .= '<div class="date-box"><span class="day">' . $date . '</span>';
$post .= '<span class="month">' . $month . '</span> </div>';
$post .= '<div class="post-text">';
$post .= '<h3>' . $title . '</h3>';
$post .= '<p> ' . $content . '<br>';
$post .= ' Read More</p></div></div></div></div>';
return $post;
}
}
add_shortcode( 'notes', 'notes_shortcode' );
function getpostImage($postid) {
if (has_post_thumbnail($post->ID)){
$imgArray = wp_get_attachment_image_src( get_post_thumbnail_id( $post->ID), 'thumbnail' );
$imgURL = $imgArray[0];
return $imgURL;
}
}
Thanks ..

Answer 1

Okay, I solved the problem. I used the WordPress Filters to hook the $buff variable and returned it outside the loop, below is the solution if anyone needs it.
function notes_shortcode($atts) {
global $post;
global $buf;
$atts = shortcode_atts( array( 'category' => $args["category"], 'posts_per_page' => $args["posts_per_page"]), $atts, 'notes' );
$args = array( 'category_name' => $atts["category"], 'posts_per_page' => $atts["posts_per_page"] );
$posts = get_posts( $args );
$date = get_the_date( 'd', $post->ID );
$month = get_the_date( 'M', $post->ID );
$buf = '';
$postHolder = array();
foreach( $posts as $post ) {
setup_postdata($post);
$imgURL = getpostImage( $post->ID );
$title = get_the_title( $post->ID );
$content = substr(get_the_content() , 0, 125);
$buf .= '<div class="animated fadeInUp" data-animation="fadeInUp" data-delay="200" style="opacity: 0;">';
$buf .= '<div class="col-md-4 bloglist">';
$buf .= '<div class="post-content">';
$buf .= '<div class="post-image">';
$buf .= '<div class="flexslider blog-slider">';
$buf .= '<div class="overlay" style="opacity: 0;"></div>';
$buf .= '<div class="flex-viewport" style="overflow: hidden; position: relative; max-width: 350px; max-height: 175px; padding-bottom: 15px; margin-bottom: 15px;">';
$buf .= '<ul class="slides" style="width: 800%; -webkit-transition: 0s; transition: 0s; -webkit-transform: translate3d(-350px, 0px, 0px);">';
$buf .= '<li class="clone" aria-hidden="true" style="width: 350px; float: left; display: block;"> <img src="' . $imgURL . '" alt="" draggable="false"> </li>';
$buf .= '<li class="flex-active-slide" style="width: 350px; float: left; display: block;"> <img src="' . $imgURL . '" alt="" draggable="false"> </li>';
$buf .= '<li style="width: 350px; float: left; display: block;"> <img src="' . $imgURL . '" alt="" draggable="false"> </li>';
$buf .= '<li class="clone" aria-hidden="true" style="width: 350px; float: left; display: block;"> <img src="' . $imgURL . '" alt="" draggable="false"></li>';
$buf .= '</ul></div></div></div>';
$buf .= '<div class="date-box"><span class="day">' . $date . '</span>';
$buf .= '<span class="month">' . $month . '</span> </div>';
$buf .= '<div class="post-text">';
$buf .= '<h3>' . $title . '</h3>';
$buf .= '<p> ' . $content . '<br>';
$buf .= ' Read More</p></div></div></div>';
$buf .= apply_filters( 'post_class', '</div>', $atts );
}
$buf .= apply_filters( 'post_class', '', $atts );
return $buf;
}
add_shortcode( 'notes', 'notes_shortcode' );
function getpostImage($postid) {
if (has_post_thumbnail($post->ID)){
$imgArray = wp_get_attachment_image_src( get_post_thumbnail_id( $post->ID), 'thumbnail' );
$imgURL = $imgArray[0];
return $imgURL;
}
}
Thankyou all for the help ..

Answer 2

You are returning the function, that means that your are making the function end. What you can do is send the array and then loop it later.Use the code below
function notes_shortcode($atts) {
global $post;
$atts = shortcode_atts( array( 'category' => $args["category"]), $atts, 'notes' );
$args = array( 'category_name' => $atts["category"]);
$posts = get_posts( $args );
$date = get_the_date( 'd', $post->ID );
$month = get_the_date( 'M', $post->ID );
$array = array();
foreach( $posts as $post ) {
setup_postdata($post);
$imgURL = getpostImage( $post->ID );
$title = get_the_title( $post->ID );
$content = substr(get_the_content() , 0, 125);
$post = '<div class="animated fadeInUp" data-animation="fadeInUp" data-delay="200" style="opacity: 0;">';
$post .= '<div class="col-md-4 bloglist">';
$post .= '<div class="post-content">';
$post .= '<div class="post-image">';
$post .= '<div class="flexslider blog-slider">';
$post .= '<div class="overlay" style="opacity: 0;"></div>';
$post .= '<div class="flex-viewport" style="overflow: hidden; position: relative;">';
$post .= '<ul class="slides" style="width: 800%; -webkit-transition: 0s; transition: 0s; -webkit-transform: translate3d(-350px, 0px, 0px);">';
$post .= '<li class="clone" aria-hidden="true" style="width: 350px; float: left; display: block;"> <img src="' . $imgURL . '" alt="" draggable="false"> </li>';
$post .= '<li class="flex-active-slide" style="width: 350px; float: left; display: block;"> <img src="' . $imgURL . '" alt="" draggable="false"> </li>';
$post .= '<li style="width: 350px; float: left; display: block;"> <img src="' . $imgURL . '" alt="" draggable="false"> </li>';
$post .= '<li class="clone" aria-hidden="true" style="width: 350px; float: left; display: block;"> <img src="' . $imgURL . '" alt="" draggable="false"></li>';
$post .= '</ul></div></div></div>';
$post .= '<div class="date-box"><span class="day">' . $date . '</span>';
$post .= '<span class="month">' . $month . '</span> </div>';
$post .= '<div class="post-text">';
$post .= '<h3>' . $title . '</h3>';
$post .= '<p> ' . $content . '<br>';
$post .= ' Read More</p></div></div></div></div>';
$array[] = $post;
}
return $array;
}
add_shortcode( 'notes', 'notes_shortcode' );
function getpostImage($postid) {
if (has_post_thumbnail($post->ID)){
$imgArray = wp_get_attachment_image_src( get_post_thumbnail_id( $post->ID), 'thumbnail' );
$imgURL = $imgArray[0];
return $imgURL;
}
}
Hope this helps you