Quantcast
Channel: WordPress › Support » Forum: Hacks - Recent Topics
Viewing all articles
Browse latest Browse all 8245

pocockn on "Using Bootstrap Carousel with custom post types"

$
0
0

I am attempting to use bootstraps carousel on my wordpress site. I want to use it on posts. I have created a custom post type called images and then made sure its visible in my case posts which is where i want to use the carousel. I have then uploaded the individual images into each post in the images field that has been created. I then try to create an array with the images in and then loop through them, I am getting the images into my array but no output when i try to loop through them in the carousel code..

Here is my code.

<?php
get_header();
?>

<?php
$args = array(
'post_type' => 'attachment',
'numberposts' => -1,
'post_status' => 'any',
'post_parent' => $post->ID,
'exclude' => get_post_thumbnail_id()
);

$attachments = get_posts($args);

$imageURL = array();

?>

<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 carousel-row hidden-xs">
            <div class="col-md-12">
                <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 ($attachments as $imageURL) { ?>
                        <div class="item <?php if ($i == 0) { echo 'active'; } ?>" style="background-size:cover; background:url('<?php echo $imageURL->guid; ?>') 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>
            <!-- end of col 12 -->
        </div>

Viewing all articles
Browse latest Browse all 8245

Trending Articles