Failing to populate Wordpress post images in list items - php

Question

I'm using the following code to pull all images uploaded to a post in a specific category. The idea is to have the images populate a slider as list elements but currently they're populating like so:
<li>
<img...>
<img...>
<img...>
<img...>
</li>
Instead of:
<li>
<img...>
</li>
<li>
<img...>
</li>
<li>
<img...>
</li>
Here's the code I'm using:
<?php
/*
Template Name: template_home
*/
get_header();
?>
<script src="<?php echo get_template_directory_uri(); ?>/js/jquery.bxslider.js"></script>
<ul class="bxslider" id="home-slider">
<?php
/*
this gets all the posts from a specific category
and all the attached images (uploaded to that post)
it will add in the "featured" image as the first image
*/
$category_name = 'home_slider';
query_posts('category_name='.$category_name.'&order=ASC&showposts=-1');
while (have_posts()) : the_post();
$media_array = array();
// GET FEATURED IMAGE /////////////////////////
if (has_post_thumbnail( $post->ID ) ){
$img_src_array = wp_get_attachment_image_src( get_post_thumbnail_id( $post->ID ), 'full' );
$img_src = $img_src_array[0];
$featured_img = $img_src;
array_push($media_array, $img_src);
}
//get other images ///////////////////////////
$args = array(
'order' => 'ASC',
'orderby' => 'menu_order',
'post_type' => 'attachment',
'post_parent' => $post->ID,
'post_mime_type' => 'image',
'post_status' => null,
'numberposts' => -1,
);
$attachments = get_posts($args);
if ($attachments) {
foreach ($attachments as $attachment) {
$img_array = wp_get_attachment_image_src( $attachment->ID, 'full');
$img_src = $img_array[0];
if($featured_img != $img_src){
array_push($media_array, $img_src);
}
}
}
//START OF PROJECT ///////////////////////////
//displays all images ///////////////////////
foreach($media_array as $image_src){
echo '<img src="'.$image_src.'" />';
}
/*
reset the query after we are done
*/
?>
<li><img src="<?php echo $img_src; ?>" alt="home-slide"></li>
<?php
endwhile;
?>
</ul>
<?php
get_footer();
?>
Thank you in advance

Answer 1

Please change your code in foreach loop, add LI in foreach loop.
Please check below code, I have changed in your code
<script src="<?php echo get_template_directory_uri(); ?>/js/jquery.bxslider.js"></script>
<ul class="bxslider" id="home-slider">
<?php
/*
this gets all the posts from a specific category
and all the attached images (uploaded to that post)
it will add in the "featured" image as the first image
*/
$category_name = 'home_slider';
query_posts('category_name='.$category_name.'&order=ASC&showposts=-1');
while (have_posts()) : the_post();
$media_array = array();
// GET FEATURED IMAGE /////////////////////////
if (has_post_thumbnail( $post->ID ) ){
$img_src_array = wp_get_attachment_image_src( get_post_thumbnail_id( $post->ID ), 'full' );
$img_src = $img_src_array[0];
$featured_img = $img_src;
array_push($media_array, $img_src);
}
//get other images ///////////////////////////
$args = array(
'order' => 'ASC',
'orderby' => 'menu_order',
'post_type' => 'attachment',
'post_parent' => $post->ID,
'post_mime_type' => 'image',
'post_status' => null,
'numberposts' => -1,
);
$attachments = get_posts($args);
if ($attachments) {
foreach ($attachments as $attachment) {
$img_array = wp_get_attachment_image_src( $attachment->ID, 'full');
$img_src = $img_array[0];
if($featured_img != $img_src){
array_push($media_array, $img_src);
}
}
}
//START OF PROJECT ///////////////////////////
//displays all images ///////////////////////
foreach($media_array as $image_src){
echo '<li><img src="'.$image_src.'" /></li>';
}
/*
reset the query after we are done
*/
?>
<li><img src="<?php echo $img_src; ?>" alt="home-slide"></li>
<?php
endwhile;
?>
</ul>
<?php
get_footer();
?>

Answer 2

you can insert li tag as below mention
foreach($media_array as $image_src){
echo '<li><img src="'.$image_src.'" /></li>';
}