I have a working image bootstrap 4 carousel on my static website.
But when I want it dynamically for my WordPress theme, the images are not showing. But, in the source code, the images are showing perfectly fine.
Here is the code snippet from the image carousel:
<div id="slider" class="carousel slide" data-ride="carousel">
<div class="carousel-inner">
<?php $args = array('cat' => 2,'post_per_page' => 4);
$slider = new WP_Query($args);
if( $slider -> have_posts() ) :
/* start the loop */
while ($slider -> have_posts() ) : $slider -> the_post();
$thumb_id = get_post_thumbnail_id();
$thumb_url = wp_get_attachment_image_src($thumb_id,'full',true); ?>
<div class="carousel-item <?php if($i === 0): ?>active<?php endif; ?>">
<?php if ($thumb_url !== false) : ?>
<img class="d-block img-fluid" src="<?= $thumb_url[0] ?>" width="<?= $thumb_url[1] ?>" height="<?= $thumb_url[2] ?>" />
<?php endif; ?>
</div>
<?php endwhile; /* end of the loop */
wp_reset_postdata();
endif;
?>
</div>
<!-- Prev,Next Btn -->
<a href="#slider" class="carousel-control-prev" data-slide="prev">
<span class="carousel-control-prev-icon"></span>
</a>
<a href="#slider" class="carousel-control-next" data-slide="next">
<span class="carousel-control-next-icon"></span>
</a>
</div>
Related
Good morning,
I'm currently developing on the understrap-child theme and I have an issue with a Bootstrap Carousel which I made into a repeater using Acf pro plug-in on Wordpress.
The issue is about the indicator arrows not working. The slider is perfectly working as a repeater, but the right arrow (carousel-control-next) does not work, only the left one allows me to interact with the slider.
I'm wondering if the issue is related to the repeater itself or with me making some stupid mistake I'm not able to see! PLEASE HELP ME
Here's my code:
<div class="container-fluid containerslider sliderdesktop container-home-sub ">
<div id="HomeCarouselIndicators" class="carousel slide" data-ride="carousel">
<!--indicators-->
<?php if( have_rows('slider') ): $i = 0; ?>
<ol class="carousel-indicators">
<?php while ( have_rows('slider') ): the_row(); ?>
<li data-target="#HomeCarouselIndicators" data-slide-to="<?php echo $i; ?>" class="<?php if($i == 0) echo 'active'; ?>"></li>
<?php $i++; endwhile; ?>
</ol>
<?php endif; ?>
<!--end of indicators-->
<div class="carousel-inner" role="listbox">
<?php // check if the repeater field has rows of data
$count = 0;
if( have_rows('slider') ){
//loop through
while ( have_rows('slider') ){
//define the row
the_row();
?>
<!-- Slide One - Set the background image for this slide in the line below -->
<div class="carousel-item subheader-carousel <?php if ($count==0) {echo "active";} ?>" style="background-image: url('<?php the_sub_field('slider_background'); ?>')" >
<div class="">
</div>
</div>
<a class="carousel-control-prev" href="#HomeCarouselIndicators" role="button" data-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="carousel-control-next" href="#HomeCarouselIndicators" role="button" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
<?php
$count=$count+1;
}
}
?>
</div><!--end of carousel inner-->
</div><!--end of homecarouselindicators-->
</div><!--end container slider-->
At a glance, you have your controls inside your carousel-inner.
https://getbootstrap.com/docs/4.0/components/carousel/
Shows the controls being outside the carousel-inner but inside the carousel.
I don't have much idea about wordpress. I have a blog in wordpress. In my blog page, i am showing the most recent post in top and rest of post will appear in bottom . I am getting the repitation of most recent blog in bottom as well. that means, it's appearing twice on page. I want to get rid it from bottom. Thanks
<?php if (have_posts()):?>
<!-- section -->
<section>
<div class="row justify-content-center">
<div class="col-md-5"><?php $image1 = get_field('main_image');?>
<img id="theImage" class="img-fluid" src="<?php echo $image1['url']; ?>" width="100%" height="auto" /></div>
<div class="col-md-4 base">
<div class="hero_col">
<p class="blog_content"><?php the_time('F j, Y'); ?> </p>
<span class="head_blog_content">
<?php
$thePostID = $wp_query->post->ID;
echo get_post_meta($thePostID, 'blog_desc_content', true); ?>
</span>
<div class="read_article py-3"><a class="col btn-change" style="color: white;" href="<?php the_permalink(); ?>">Read Article</a></div>
</div>
</div>
<div class="centered_cols"><span class="hero_text"><!-- post title -->
<?php the_title(); ?>
</span></div>
</div>
</section><!-- Gallery Section -->
<div class="product-container">
<div class="row justify-content-center">
<?php $Number = 1; ?>
<?php while ( have_posts() ) : the_post(); ?>
<div class="col-sm-12 col-md-3 blog-container mb-3"><a href="#">
<?php $image1 = get_field('main_image');?>
<img src="<?php echo $image1['url']; ?>" width="100%" height="auto" /></a>
<!-- post details -->
<p class="blog_date"><?php the_time('F j, Y'); ?></p>
<span class="blog_caption"><?php the_title(); ?>
</span>
<p class="blog_content"><?php
$thePostID = $wp_query->post->ID;
echo get_post_meta($thePostID, 'blog_desc_content', true); ?>
</p>
<div class="column-bottom"><span class="read_article">
<a class="col btn-change" style="color: white;" href="<?php the_permalink(); ?>">Read Article</a></span></div>
</div>
<!-- /post details -->
<!-- article -->
<!-- post thumbnail -->
<?php if ( has_post_thumbnail()) : // Check if thumbnail exists ?>
<a href="<?php the_permalink(); ?>" title="<?php the_title(); ?>">
<?php the_post_thumbnail(array(120,120)); // Declare pixel size you need inside the array ?>
</a>
<?php endif; ?>
<!-- /post thumbnail -->
<?php html5wp_excerpt('html5wp_index'); // Build your custom callback length in functions.php ?>
<!-- /article -->
<?php $Number++; endwhile; ?>
<?php else: ?>
<!-- article -->
<article>
<h2><?php _e( 'Sorry, nothing to display.' ); ?></h2>
</article>
<!-- /article -->
<?php endif; ?>
I guess, since you don't know much about wordpress, its easier to create a counter to skip output in first item, something like this:
while (have_posts()) : the_post();
$Number = 1; //initial value
if ($count != 1) : ?>
//all your post content here
<?php endif;
$Number++; // incrementing counter by 1
It seems you came up with the counting (I've set the var name as Number based on your code), you're just missing the conditional aparently.
Im trying to get it so if the field is set show the top half else show a placement. It works to some degree in that fact it shows the empty, but its showing it twice and i cant seem to figure out why
<?php if( have_rows('attach_files_multiple') ): while ( have_rows('attach_files_multiple') ) : the_row(); ?>
<?php if( get_row_layout() == 'neck' ) : ?>
<div class="media">
<div class="media-left media-middle">
<!-- Image Start -->
<?php $image = get_sub_field('preview_prop_neck');
if( !empty($image) ): ?>
<img class="media-object" width="100px" src="<?php echo $image['url']; ?>" alt="<?php echo $image['alt']; ?>" />
<?php endif; ?>
<!-- Image End -->
</div>
<div class="media-body">
<?php $file = get_sub_field('prop_file_neck'); ?>
<h4 class="media-heading">
Neck Piece
<i class="fa fa-download"></i> Download
</h4>
</div>
</div>
<?php elseif ( !empty(get_row_layout('neck')) ) : ?>
<div class="overlay"><h3>Helmet - No File Found</h3></div>
<div class="media">
<div class="media-left media-middle">
<!-- Image Start -->
<img class="media-object" width="100px" src="<?php bloginfo('template_directory'); ?>/images/pdo.png">
<!-- Image End -->
</div>
<div class="media-body">
<h4 class="media-heading">
Neck Piece
<i class="fa fa-download"></i> Download
</h4>
</div>
</div>
<?php endif; ?>
<?php endwhile; ?> <!-- End while ( have_rows( ) -->
<?php endif; ?> <!-- End if( have_rows ) ?> -->
<?php if( get_row_layout() == 'neck' ) : ?>
Here you are saying "if neck row layout exists, output the layout below".
<?php elseif ( !empty(get_row_layout('neck')) ) : ?>
Here you are basically saying "if neck row layout is not empty, output the layout below". So it's outputting twice because I'm assuming you have a neck row.
I'm using a custom post type on my WP website and also using bootstrap.
I want to list 5 custom post type entries on my home page, and I want the first 3 to have class col-md-4 in one row and in the next row 2 cpt entries to have the class col-md-6
At the moment I have a class col-md-4 and 2 items in the 2nd row are not centered nicely.
This is my current code:
<div class="container-fluid gray-section">
<div class="container">
<div class="row">
<?php
$projects = get_posts(array('post_type'=>'project','posts_per_page'=>5, 'order'=>'ASC'));
if ($projects) { ?>
<ul class="list-unstyled">
<?php foreach ($projects as $post) { setup_postdata( $post ) ?>
<li class="col-md-4 col-sm-6 col-xs-12 col-xxs-12 text-center ">
<a class="highlights-item" href="<?php echo get_permalink(); ?>">
<div class="highlights-container">
<?php the_post_thumbnail(); ?>
<span class="highlights-title">
<?php the_excerpt(); ?>
</span>
</div>
</a>
</li>
<?php } wp_reset_postdata(); ?>
</ul>
<?php }
?>
</div> <!-- end row -->
</div> <!-- end container -->
</div> <!-- end container fluid -->
Any suggestions how to fix this?
This sort of issue is usually solved by adding a count to foreach loop and adding 1 each time. Then within the loop you can check what the count is and apply specific classes. e.g.
<div class="container-fluid gray-section">
<div class="container">
<div class="row">
<?php
$projects = get_posts(
array(
'post_type'=>'project',
'posts_per_page'=>5,
'order'=>'ASC'
)
);
if ($projects) { $count = 1; ?>
<ul class="list-unstyled">
<?php foreach ($projects as $post) {
setup_postdata( $post );
if( $count >= 4 ) { $extra_class = 'col-md-6'; }
else { $extra_class = 'col-md-4'; }
?>
<li class="<?php echo $extra_class; ?> col-sm-6 col-xs-12 col-xxs-12 text-center ">
<a class="highlights-item" href="<?php echo get_permalink(); ?>">
<div class="highlights-container">
<?php the_post_thumbnail(); ?>
<span class="highlights-title">
<?php the_excerpt(); ?>
</span>
</div>
</a>
</li>
<?php $count++; } wp_reset_postdata(); ?>
</ul>
<?php }
?>
</div> <!-- end row -->
</div> <!-- end container -->
</div> <!-- end container fluid -->
Give that a go...
Regards
Dan
<?php
$i = 0;
foreach ($projects as $post) { setup_postdata( $post )
?>
<li class="<?php echo ($i>2):'col-md-6'?'col-md-4' ?> col-sm-6 col-xs-12 col-xxs-12 text-center ">
<a class="highlights-item" href="<?php echo get_permalink(); ?>">
<div class="highlights-container">
<?php the_post_thumbnail(); ?>
<span class="highlights-title">
<?php the_excerpt(); ?>
</span>
</div>
</a>
</li>
<?php
$i++;
}
wp_reset_postdata();
?>
I am trying to get the post thumbnail image for my carousel thumbnail indicators which are outside of the loop.
Currently it's setup with image placeholders but I need each thumb to represent the currently selected post.
<?php
$items = new WP_Query(array(
'post__in' => get_option('sticky_posts'),
'caller_get_posts' => 1,
'posts_per_page' => 10,
'meta_key' => '_thumbnail_id'
));
$count = $items->found_posts;
?>
<div id="myCarousel" class="carousel slide" data-ride="carousel">
<!-- Wrapper for slides -->
<div class="carousel-inner">
<?php
$ctr = 0;
while ( $items->have_posts() ) :
$items->the_post();
$url = wp_get_attachment_url( get_post_thumbnail_id($post->ID) );
$custom = get_post_custom($post->ID);
$link = $custom["more-link"][0];
$class = $ctr == 0 ? ' active' : '';
?>
<div class="item<?php echo $class; ?>" id="<? the_ID(); ?>">
<?php the_post_thumbnail( 'full', array (
'class' => 'img-responsive'
)); ?>
<div class="carousel-caption">
<h3><a href="<?php the_permalink(); ?>">
<?php the_title(); ?>
</a></h3>
</div>
</div>
<!-- End Item -->
<?php $ctr++;
endwhile; ?>
</div>
<!-- End Carousel Inner -->
<div class="thumbs">
<div class="row">
<div class="col-md-2 active item" data-target="#myCarousel" data-slide-to="0"><img src="http://placehold.it/1200x440/999999/cccccc" class="img-responsive"></div>
<?php for($num = 1; $num < $count; $num++){ ?>
<div class="col-md-2 item" data-target="#myCarousel" data-slide-to="<?php echo $num; ?>"><img src="http://placehold.it/1200x440/999999/cccccc" class="img-responsive"></div>
<?php } ?>
</div>
</div>
</div>
<!-- End Carousel -->
Instead of:
<?php for($num = 1; $num < $count; $num++){ ?>
<div class="col-md-2 item" data-target="#myCarousel" data-slide-to="<?php echo $num; ?>">
<a href="#">
<img src="http://placehold.it/1200x440/999999/cccccc" class="img-responsive">
</a>
</div>
<?php } ?>
try using:
<?php $counter2 = 0; ?>
<?php while ( $items->have_posts() ) : $items->the_post(); ?>
<?php $counter2++; ?>
<div class="col-md-2 item <?php echo $counter2 == 1 ? 'active' : ''; ?>" data-target="#myCarousel" data-slide-to="<?php echo $counter2; ?>">
<a href="#">
<?php
the_post_thumbnail('thumbnail', array(
'class' => 'img-responsive'
));
?>
</a>
</div>
<?php endwhile; ?>
This will display it with your markup, but with a thumbnail image instead of the placeholder.