I was trying to display more than 5 items at once on a single slide, which by default suppose to be just one. I tried creating two loops, one to place content inside the active class and another to place content inside the item class, with post_per_page = 3, what I am getting a first output post three posts on the home, but after first slide it changes to one, what's the possible solution towards this.
Thanks in advance.
I hope you understand, that was my best way to explain this.
Here is what I want to achieve.
Here is my code
<div id="myCarousel" class="carousel slide">
<!-- Carousel items -->
<div class="carousel-inner">
<?php
$my_query = new WP_Query('posts_per_page=3');
while ($my_query->have_posts()) : $my_query->the_post();
$do_not_duplicate = $post->ID;?>
<!-- The 1st Loop... -->
<div class="active item well-blue">
<div class="offset1">
<h3><?php the_title(); ?></h3>
<p class="lead"><?php $excerpt = strip_tags(get_the_excerpt()); echo $excerpt; ?></p>
Read more...
</div>
</div>
<?php endwhile; wp_reset_query(); ?> <?php
// The 2nd Loop limits the query to 2 more posts...
$limit_query = new WP_Query('posts_per_page=3');
while ($limit_query->have_posts()) :$limit_query->the_post();$do_not_duplicate = $post->ID;?>
<!-- The 2nd Loop same data as 1st loop -->
<div class="item well-blue">
<div class="offset1">
<h3><?php the_title(); ?></h3>
<p class="lead"><?php $excerpt = strip_tags(get_the_excerpt()); echo $excerpt; ?></p>
Read more...
</div>
</div>
<?php endwhile; wp_reset_query(); ?>
</div>
<!-- Carousel nav -->
<a class="carousel-control left" href="#myCarousel" data-slide="prev">‹</a>
<a class="carousel-control right" href="#myCarousel" data-slide="next">›</a>
Check this link : https://teamtreehouse.com/community/bootstrap-carousel-and-wordpress-loop-without-postspages
you just need to find this line
// Item size (set here the number of posts for each group)
$i = 4;
And change 4 to 5.
Related
I've created a list of logos with ACF repeater field. I'd like to have the 10 first logos displayed in my template and the others in an expand collapse. I've almost managed to make it work but the problem is that it's creating an expand collapse every 10 entries while I only want to have 1 containing everything after 10.
<div class="row"><!-- open first .row -->
<?php
while (have_rows('partenaires')) {
the_row();
$partner_image = get_sub_field('logo_partenaire');
if (($count%10) == 0 && $count > 0) { ?>
</div><!-- close last .row -->
</div><!-- close last .section -->
<a role="button" class="text-center" data-toggle="collapse" href="#collapsePartners" aria-expanded="false" aria-controls="collapsePartners"><?php _e( 'Et bien d\'autres', 'oleandre' ); ?></a>
<div class="collapse" id="collapsePartners"><!-- open next .section -->
<div class="row"><!-- open next .row -->
<?php
} // end if 10
?>
<div class="col-lg-2 col-xs-6 col-sm-6">
<div>
<img class="img-responsive" src="<?php echo $partner_image['url']; ?>" alt="<?php echo $partner_image['alt'] ?>" />
</div>
</div>
<?php
// increment count
$count++;
} // end while have_rows
?>
</div><!-- close last .row -->
</div><!-- close lase .section -->
<?php
} // end if have_rows
?>
</div>
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'll get quickly to the point: I'm creating a Wordpress theme for my blog, using _s starter theme. I'm using the bootstrap 4 grid system, in order to achieve a 2 column post (on home page/search/archive): the post thumbnail inside a div on the left, while the post content (title, excerpt etc.) on the right.
I want to set the post thumbnail as a background-image of the div, I already achieved that, on desktop/tablet no problem, but on mobile when the thumbnail is above the post content, it won't show up, unless I set a fixed height to the image, I'm ok with that, but the issue is that some posts do not have a post thumbnail, so you can imagine that the result is pretty brutal, with blank space on post without thumbnail;
Maybe this is stupid and easy, but the question is: is there a way to solve this? Maybe it's possible to set the fixed height on mobile but only on posts that has the thumbnail?
<div class="container-fluid">
<div class="row">
<div class="post-thumbnail col-md-5" <?php echo 'style="background-image: url(' . get_the_post_thumbnail_url() . ')"' ?>>
</div>
<div class="post-content <?php echo (has_post_thumbnail())?$small:$large;?>">
</div> <!-- post content -->
</div> <!-- row -->
</div> <!-- container fluid -->
If I understood you correctly, maybe you could try something like this
<div class="container-fluid">
<div class="row">
<?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>
<article>
<div class="col-md-6">
<h2>
<a href="<?php the_permalink() ?>">
<?php the_title(); ?>
</a>
</h2>
<?php the_content(); ?>
</div>
<div class="col-md-6">
<?php if(has_post_thumbnail()) : ?>
<div class="post-thumbnail" style="background: url('<?php get_the_post_thumbnail_url(); ?>') center center / cover"></div>
<?php else : ?>
<div class="post-thumbnail" style="background: url('[some fixed image url]') center center / cover"></div>
<?php endif; ?>
</div>
</article>
<?php endwhile; else: ?>
<p>There no posts to show</p>
<?php endif; ?>
</div>
</div>
I have a nested repeater field.
The nested part is a modal window, which when open expands on the second repeater field. But when everything is filled out the modal window displays the info from the first item in the loop.
This is how it should be working:
http://pagedev.co.uk/hoppings/product-sector.php#
Here is my code:
<div class="container">
<?php while( have_rows('product_sections') ): the_row(); ?>
<div class="sector-heading">
<img src="<?php the_sub_field('section_logo'); ?>">
<div><?php the_sub_field('section_intro'); ?></div>
</div>
<?php if( have_rows('products') ): ?>
<div class="grid-wrapper">
<?php while( have_rows('products') ): the_row(); ?>
<!--Start Single Product-->
<div class="grid-item">
<div class="image-hovers">
<img src="<?php the_sub_field('thumbnail'); ?>">
<a class="js-open-modal" href="#" data-modal-id="popup"><div class="product-hover"></div></a>
</div>
<div class="grid-title">
<h2><?php the_sub_field('product_name'); ?></h2>
</div>
</div>
<!--Start Single Product Modal-->
<div id="popup" class="modal-box">
×
<div class="modal-wrap">
<div class="modal-img">
<img src="<?php the_sub_field('thumbnail'); ?>">
</div>
<div class="modal-content">
<h2><?php the_sub_field('product_name'); ?></h2>
<p><strong><?php the_sub_field('product_size'); ?></strong></p>
<hr>
<?php the_sub_field('product_description'); ?>
<div class="modal-stockist">Find a Stockist</div>
<div class="modal-literature">Literature</div>
</div>
</div>
</div>
<!--Close Single Product Modal-->
<?php endwhile; // end of the loop. ?>
</div>
<!--End Grid Wrapper-->
<?php endif; ?>
<!-- Close product repeater field -->
<?php endwhile; // end of the loop. ?>
</div>
<!--End Container-->
Any help would be great!
Lee
I figured it out. Something so simple!
My modal window needed a unique ID for each product!
All solved :)
Im trying to make a popup window which will display the post title and post thumbnail.
I have added this popup code into the category page template.
Basically if you click on the post title, the popup window will display showing the post thumbnail and post title, however each popup window is showing the same post details.
What changes would I need to make, so each popup window displays the corresponding post details
example. I have 3 post, titled, Post A, Post B, Post C, but in the lightbox all post titles say "Post A"
Any suggestions would be appreciated
Here is the code im using.....................
<div id="maincontainer" style="width:700px; height:auto; display:block;"><!-- Begin Main Container -->
<?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>
<span id="magblock"> <!-- Begin Post Block -->
<div class="magazinethumbs">
<?php
// check if the post has a Post Thumbnail assigned to it.
if ( has_post_thumbnail() ) {
the_post_thumbnail( 'magazine-thumb' );
}
?>
</div>
<!-- This opens the Lightbox -->
<a class="lbp-inline-link-1 cboxElement" href="#">
<h2 class="indextitle" style="font-size:12px;">
<?php the_title(); ?>
</h2>
</a>
</span> <!-- End Post Block-->
<div style="display: none;"> <!-- Lightbox Popup -->
<div id="lbp-inline-href-1" style="padding:10px; background: #fff;">
<!-- Here is the bug, the lightbox is loading the same post details -->
<div class="magazinethumbs">
<?php
// check if the post has a Post Thumbnail assigned to it.
if ( has_post_thumbnail() ) {
the_post_thumbnail( 'magazine-thumb' );
}
?>
</div>
<h2 class="indextitle" style="font-size:12px;">
<?php the_title(); ?>
</h2>
</div>
</div> <!-- End Lightbox Popup -->
<?php endwhile; else: ?>
<p><?php _e('Sorry, no posts matched your criteria.'); ?></p>
<?php endif; ?>
<?php wp_reset_query();?>
</div><!-- End Main container -->
Im using "Lightbox Plus For Wordpress" plugin
http://www.endocreative.com/how-to-insert-content-in-a-popup-using-lightbox-plus-for-wordpress/
I tried your modified code but did not work... Simply loads the entire category page inside the lightbox...
Here is the modified code
<a class="lbp-inline-link-<?php the_ID(); ?> cboxElement" href="#">
<h2 class="indextitle" style="font-size:12px;">
<?php the_title(); ?>
</h2>
</a>
<div style="display: none;"> <!-- begin popup -->
<div id="lbp-inline-href-<?php the_ID(); ?>" style="padding:10px; background: #fff;">
<h2 class="indextitle" style="font-size:12px;">
<?php the_title(); ?>
</h2>
</div>
</div> <!-- End popup -->
Thanks
I may be sleeping when you answer my comment, so.
You have to do the step 2 of that tutorial, it will give you Inline Lightbox Individual Settings.
it'll give you a sequential classes
lbp-inline-link-1 for lbp-inline-href-1,
lbp-inline-link-2 for lbp-inline-href-2 and so on..
before
<?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>
insert:
<?php
$i = 1;
if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>
in the place of:
<a class="lbp-inline-link-1 cboxElement" href="#">
put
<a class="lbp-inline-link-<?php echo $i;?>" href="#">
do the same for the:
<div id="lbp-inline-href-1" style="padding:10px; background: #fff;">
put
<div id="lbp-inline-href-<?php echo $i; ?>" style="padding:10px; background: #fff;">
and before the endwhile put
<?php
$i++;
endwhile; else: ?>
OBS: you have to set the number os posts being show the same number of the "Number of Inline Lightboxes::"
Eg.: If the post list will show, 10 posts per page, on step 2 "Number of Inline Lightboxes::" you have to set to 10.