Using WordPress custom post type

Question

I am attempting to use Wordpress and bootstraps carousal. I have created a custom post type called images and linked it to the posts I want. I have then uploaded images to each post, When I loop through the array however it ends up outputting all of my images in the carousel. It is meant to go through each of the images in my custom field of images and echo them out in the carousel.

It's also outputting no-repeat center;"> as plain text on my html page. Which im not sure why

  <?php 
get_header(); 
?>

<?php 

global $wp_query;
$postid = $wp_query->post->ID;
wp_reset_query();

$images = get_post_meta($postid, 'images', false);


?>


<div class="row">
    <div class="col-md-3">
        <div id="page_title">Case Studies</div>
    </div>
    <div class="col-md-9">
        <div id="page_excerpt">
            <div class="vertical_align_centre">
                <?php the_excerpt();?>
            </div>
        </div>
    </div>
</div>

<!-- Content -->


<div class="row">
<?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>
<?php endwhile; endif; ?>

<div class="col-md-3">

    <?php the_post_thumbnail('casestudy img-responsive');?>
</div>

     <div class="carousel-row hidden-xs">
            <div class="col-md-9">
                <div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
                    <!-- Indicators -->
                    <ol class="carousel-indicators">
                        <li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
                        <li data-target="#carousel-example-generic" data-slide-to="1"></li>
                        <li data-target="#carousel-example-generic" data-slide-to="2"></li>
                    </ol>

                    <!-- Wrapper for slides -->
                    <div class="carousel-inner"> 
                        <?php $i=0; foreach ($images as $image) { ?> 
                        <div class="item <?php if ($i == 0) { echo 'active'; } ?>" style="background-size:cover; background:url('<?php echo $image; ?>') no-repeat center;">
                            <div class="carousel-caption">
                                <h4><?php echo $imageURL->post_excerpt;?></h4>
                            </div>
                        </div>
                        <?php $i++; } ?>
                    </div>
                    <!-- Controls -->
                    <a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev">
                        <span class="glyphicon glyphicon-chevron-left"></span>
                    </a>
                    <a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next">
                        <span class="glyphicon glyphicon-chevron-right"></span>
                    </a>
                </div>
              </div>
            </div>

Answer 1

From the query it looks like you are getting all the posts available in your array.

You could fix this at the top:

'numberposts' = 10, //or however many you want

or cut up the array after the fact:

$attachments = array_slice($attachments ,0 ,10);

http://codex.wordpress.org/Template_Tags/get_posts

http://php.net/manual/en/function.array-slice.php

Answer 2

This is how I understood your question.

You made a custom post type called images and you added posts to that post type. Those posts containing a image( I assume you are using post thumbnail for this ).So you need to use those images as bootstrap carousel.

If I'm right here is your answer. Please note that this code is not tested. so make a backup of your code before try this.

<?php get_header(); ?>
<?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>
<div class="row">
<div class="col-md-3">
    <div id="page_title">Case Studies</div>
</div>
<div class="col-md-9">
    <div id="page_excerpt">
        <div class="vertical_align_centre">
            <?php the_excerpt();?>
        </div>
    </div>
</div>
</div>
<div class="row">
<div class="col-md-3">
    <?php the_post_thumbnail('casestudy img-responsive');?>
</div>
<div class="carousel-row hidden-xs">
        <div class="col-md-9">
        <?php $args = array('post_type' => 'images','posts_per_page' => -1 ); $loop = new WP_Query($args); if( $loop->have_posts() ):  ?>
            <div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
             <!-- Indicators -->
                <ol class="carousel-indicators">
                    <?php $count_images = wp_count_posts('images'); 
                            $published_images = $count_images->publish;
                                if(count($published_images) > 0) {
                                    for ($i=0; $i < $published_images; $i++) { ?>
                                        <li data-target="#carousel-example-generic" data-slide-to="<?php echo $i; ?>" <?php if($i == 0){ echo 'class="active"';} ?>></li>
                                    <?php }
                                }
                    ?>
                </ol>

            <!-- Wrapper for slides -->
                <div class="carousel-inner">
                <?php $j = 0; while( $loop->have_posts() ): $loop->the_post(); global $post; ?>
                    <div class="item <?php if($j == 0) { echo 'active'; }?>">
                        <img src="<?php echo wp_get_attachment_url( get_post_thumbnail_id($post->ID) ); ?>" alt="<?php echo get_the_title(); ?>">
                            <div class="carousel-caption">
                                <?php the_excerpt(); ?>
                            </div>
                    </div>
                <?php $j++; endwhile;?>
                </div>

            <!-- Controls -->
            <a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev">
                <span class="glyphicon glyphicon-chevron-left"></span>
            </a>
            <a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next">
                <span class="glyphicon glyphicon-chevron-right"></span>
            </a>
        </div>
    <?php endif; wp_reset_query(); ?>
        </div>
        </div>
<?php endwhile; endif; ?>