php - Using WordPress custom post type -
i attempting utilize wordpress , bootstraps carousal. have created custom post type called images , linked posts want. have uploaded images each post, when loop through array ends outputting of images in carousel. meant go through each of images in custom field of images , echo them out in carousel.
it's outputting no-repeat center;">
plain text on html page. 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 slides --> <div class="carousel-inner"> <?php $i=0; foreach ($images $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>
this how understood question.
you made custom post type called images , added posts post type. posts containing image( assume using post thumbnail ).so need utilize images bootstrap carousel.
if i'm right here answer. please note code not tested. create backup of code before seek 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) { ($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 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; ?>
php jquery wordpress twitter-bootstrap
No comments:
Post a Comment