how do i slip loop into group
-
<div class="carousel-item active"> - Post Title 1 - Post Title 2 - Post Title 3 </div> <div class="carousel-item"> - Post Title 4 - Post Title 5 - Post Title 6 </div> <div class="carousel-item"> - Post Title 7 - Post Title 8 - Post Title 9 </div> <div class="carousel-item"> - Post Title 10 - Post Title 11 - Post Title 12 </div>
I want to create loop slit as sample above and what should I change my carousel loop item below. Here is what i have done
<div id="myCarousel" class="carousel slide" data-ride="carousel" data-interval="5500"> <?php $1 = 0; ?> <div class="carousel-inner" role="listbox"> <?php if ( $query->have_posts() ) : while ( $query->have_posts() ) : $query->the_post(); ?> <div class="carousel-item <?php if ($1 === 0){echo "active";} ?>"> <?php telegraph_post_thumbnail(); ?> <div class="container"> <div class="description pt-3"> <h1 class="headline"><a>"><?php echo get_the_title() ?></a></h1> <p><?php the_excerpt(); ?></p> <span class="float-left text-muted"><?php echo get_the_date( ''); ?></span><span class="float-right text-muted"><?php the_category( ', ' ); ?></span> </div><!--description--> </div><!--container--> </div><!--carousel-item--> <?php $1++;?> <?php endwhile; wp_reset_postdata(); ?> <?php endif; ?> </div><!--carousel-inner--> </div><!--myCarousel-->-
This topic was modified 5 years, 9 months ago by
Steven Stern (sterndata).
-
This topic was modified 5 years, 9 months ago by
-
I want to create loop slit as sample above and what should I change my carousel loop item below. Here is what i have done
I’m unsure what you’re after. I think you want 3 posts in each carousel item instead of one, is that right? You can use your
$1counter for this, except you must rename it, you cannot start PHP variable names with a number after the $. Lets say it’s renamed to$x. Use the modulo operator%to get the remainder after integer division. When the remainder == 2, output a closing div tag and a new opening carousel item div.
if ( 2 == $x % 3 ) { echo '</div> <div class="carousel-item">';}
The very first opening div must be before the loop starts and the very last closing div must occur after the loop ends.Thanks for your response. it has generated three columns in a row but not sliding. How do echo active carousel-item active?
Thanks for your response. it has generated three columns in a row but not sliding. How do I echo active carousel-item active?
Kindly view what I have done so far below. When I view the source code in the browser, it generates three column in each carousel-item but not displaying it on the front-end of the website as everything remains blank. What am I getting wrong on the code and also what should I add to generate ‘carousel-item active’?
<div id="myCarousel" class="carousel slide" data-ride="carousel" data-interval="5500"> <?php $i=1; ?> <div class="carousel-inner" role="listbox"> <?php if ( $query->have_posts() ) : while ( $query->have_posts() ) : $query->the_post(); ?> <?php if($i==1 || $i%3==1) echo '<div class="carousel-group">' ;?> <div class="carousel-item"> <?php telegraph_post_thumbnail(); ?> <div class="carousel-caption text-left"> <h1><a>"><?php echo get_the_title() ?></a></h1> <p><?php the_excerpt(); ?></p> </div><!--carousel-caption--> </div> <?php if($i%3==0) echo '</div>' ;?> <?php $i++;?> <?php endwhile; wp_reset_postdata(); ?> <?php endif; ?> </div><!--carousel-inner--> </div><!--myCarousel-->-
This reply was modified 5 years, 9 months ago by
bcworkz. Reason: code fixed
The issue of not sliding is resolved here but it does generated three columns in a row. Help me check the code
<div id="myCarousel" class="carousel slide" data-ride="carousel" data-interval="5500"> <?php $x = 0; ?> <div class="carousel-inner" role="listbox"> <?php if ( $query->have_posts() ) : while ( $query->have_posts() ) : $query->the_post(); ?> <div class="carousel-item <?php if ( 2 == $x % 3 ) {echo "active";} ?>"> <?php telegraph_post_thumbnail(); ?> <div class="container"> <div class="description pt-3"> <h1 class="headline"><a>"><?php echo get_the_title() ?></a></h1> <p><?php the_excerpt(); ?></p> <span class="float-left text-muted"><?php echo get_the_date( ''); ?></span><span class="float-right text-muted"><?php the_category( ', ' ); ?></span> </div><!--description--> </div><!--container--> </div><!--carousel-item--> <?php $x++;?> <?php endwhile; wp_reset_postdata(); ?> <?php endif; ?>-
This reply was modified 5 years, 9 months ago by
bcworkz. Reason: code fixed
More like this (untested):
<div id="myCarousel" class="carousel slide" data-ride="carousel" data-interval="5500"> <?php $x = 0; ?> <div class="carousel-inner" role="listbox"> <?php if ( $query->have_posts() ) : ?> <div class="carousel-item active"> while ( $query->have_posts() ) : $query->the_post(); ?> <?php telegraph_post_thumbnail(); ?> <div class="container"> <div class="description pt-3"> <h1 class="headline"><a>"><?php echo get_the_title() ?></a></h1> <p><?php the_excerpt(); ?></p> <span class="float-left text-muted"><?php echo get_the_date( ''); ?></span><span class="float-right text-muted"><?php the_category( ', ' ); ?></span> </div><!--description--> </div><!--container--> <?php if ( 2 == $x % 3 ) { ?> </div><!--carousel-item--> <div class="carousel-item"> <?php } $x++;?> <?php endwhile;?> </div> <?php wp_reset_postdata(); ?> <?php endif; ?>For the carousel to run, its JavaScript code that initializes it needs to be executed. This would normally be done by the theme or plugin that’s providing carousel functionality. Check your browser’s console for JavaScript errors that may be preventing the carousel script from working as expected.
If you are using WP v5.5 and the carousel was previously working but it is not now, you may need the jQuwry Migrate Helper plugin.
When you post code in these forums, please use the code button or demarcate with backticks. When you don’t, your code gets corrupted by the forum’s parser. It would have been difficult to copy and edit your code had I not been able to fix your reply’s code for you.
ETA:
?>added to end of 4th line,<?phpatwhile, transposed chars at end of2 == $x % 3lineThanks I appreciate. I am making progress. It is presently sliding but the issue at hand is that the carousel slide is sliding in three row and this is contrary to three columns per row that I desired to have. Kindly help me look into the code.
I wish to have Carousel-item 1{post-1, post-2, post3}, carpusel-tiem-2 {post-3,post-4, post-5} Carousel-item 3 {post=7,post-8,post-9}, Carousel-item 4 {post-10, post-11, post-12}.This is the updated code.
<div id="myCarousel" class="carousel slide" data-ride="carousel" data-interval="5500"> <?php $x = 0; ?> <div class="carousel-inner" role="listbox"> <?php if ( $query->have_posts() ) : ?> <div class="carousel-item active"> <?php while ( $query->have_posts() ) : $query->the_post(); ?> <?php telegraph_post_thumbnail(); ?> <div class="description pt-3"> <h1 class="headline"><a><?php echo get_the_title() ?></a></h1> <p><?php the_excerpt(); ?></p> <span class="float-left text-muted"><?php echo get_the_date( ''); ?></span><span class="float-right text-muted"><?php the_category( ', ' ); ?></span> </div><!--description--> <?php if ( 2 == $x % 3 ) { ?> </div><!--carousel-item--> <div class="carousel-item"> <?php } $x++;?> <?php endwhile;?> </div> <?php wp_reset_postdata(); ?> <?php endif; ?><!--myCarousel-->I checked through the carousel css line and discovered ommision of closing div.I have updated it yet it is not creating three columns in a row. Help me help me check and let me know what is missing in the loop.
<div id="myCarousel" class="carousel slide" data-ride="carousel" data-interval="5500"> <?php $x = 0; ?> <div class="carousel-inner" role="listbox"> <?php if ( $query->have_posts() ) : ?> <div class="carousel-item active"> <?php while ( $query->have_posts() ) : $query->the_post(); ?> <?php telegraph_post_thumbnail(); ?> <div class="carousel-caption text-left"> <h1 class="headline"><a><?php echo get_the_title() ?></a></h1> <p><?php the_excerpt(); ?></p> <span class="float-left text-muted"><?php echo get_the_date( ''); ?></span><span class="float-right text-muted"><?php the_category( ', ' ); ?></span> </div><!--description--> <?php if ( 2 == $x % 3 ) { ?> </div><!--carousel-item--> <div class="carousel-item"> <?php } $x++;?> <?php endwhile;?> </div> <?php wp_reset_postdata(); ?> <?php endif; ?> </div><!--carousel-inner--> </div><!--myCarousel-->-
This reply was modified 5 years, 9 months ago by
bcworkz.
the_excerpt()seems to output<p>tags already, so you probably don’t need them in your template code as well, i.e. you don’t need these p tags:<p><?php the_excerpt(); ?></p>Unrelated to your problem, just something I noticed.
That code does output 3 posts in one carousel item. If they are stacking vertically instead of horizontally, the CSS needs adjustment. Ensure each post’s container (
.carousel-caption.text-left) is floated left and its width no more than 33%.If you can, next time you post code, try to use a version that has line feeds and indents. The version you posted without whitespace is very difficult to analyze.
I have updated as directed but the whole thing messedup.Kindly help me look into this code and let me know what I am missing out. Not working properly
<div id="myCarousel" class="carousel slide" data-ride="carousel" data-interval="5500"> <?php $x = 0; ?> <div class="carousel-inner" role="listbox"> <?php if ( $query->have_posts() ) : ?> <div class="carousel-item active"> <div class="container"> <?php while ( $query->have_posts() ) : $query->the_post(); ?> <?php telegraph_post_thumbnail(); ?> <div class="carousel-caption text-left"> <h1 class="headline"><a><?php echo get_the_title() ?></a></h1> <p><?php the_excerpt(); ?></p> <span class="float-left text-muted"><?php echo get_the_date( ''); ?></span><span class="float-right text-muted"><?php the_category( ', ' ); ?></span> </div><!--carousel-caption--> <?php if ( 2 == $x % 3 ) { ?> </div><!--container--> </div><!--carousel-item--> <div class="carousel-item"> <div class="container"> <?php } $x++;?> <?php endwhile;?> </div><!--container--> </div> <?php wp_reset_postdata(); ?> <?php endif; ?> </div><!--carousel-inner--> </div><!--myCarousel-->There’s an extra empty div generated at the end when the post count is evenly divisible by 3. To deal with that possibility, change the
if ( 2 == $x % 3) {line to this:
<?php if ( 2 == $x % 3 && ($query->post_count - 1) != $x ) { ?>Otherwise your code correctly generates 3 posts in every carousel-item div. What purpose does the carousel-inner div serve? Could it be you need a new carousel-inner div every time there’s a new carousel-item div? Instead of it containing all of the carousel-items in one overall div? Confirm by examining a conventional one post per item carousel.
I still suspect the issue might be CSS related. If so, I’d need a live link to the page with the problem in order to advise further about CSS.
` . Thanks once more for all your responses. The project I am working on is presently on localhost and not yet online. I will like you to do me little favour. Can you copy and re-edit it at your end as I don’t really know how to handle the issue of carousel-inner div you are talking about I have changed if ( 2 == $x % 3) { line to this: <?php if ( 2 == $x % 3 && ($query->post_count – 1) != $x ) { ?> as directed. <div id=”myCarousel” class=”carousel slide” data-ride=”carousel” data-interval=”5500″> <?php $x = 0; ?> <div class=”carousel-inner” role=”listbox”> <?php if ( $query->have_posts() ) : ?> <div class=”carousel-item active”> <div class=”container”> <?php while ( $query->have_posts() ) : $query->the_post(); ?> <?php telegraph_post_thumbnail(); ?> <div class=”carousel-caption text-left”> <h1 class=”card-title”><a href=”<?php esc_url( the_permalink() ); ?>”><?php echo get_the_title() ?></a></h1> <?php the_excerpt(); ?> <a href=”<?php the_permalink() ?>” class=”btn” rel=”bookmark” title=”Permanent Link to <?php the_title_attribute(); ?>”>Read more…</a> <span class=”float-left text-muted”><?php echo get_the_date( ”); ?></span><span class=”float-right text-muted”><?php the_category( ‘, ‘ ); ?></span> </div><!–carousel-caption–> <?php if ( 2 == $x % 3 && ($query->post_count – 1) != $x ) { ?> </div><!–container–> </div><!–carousel-item–> <div class=”carousel-item”> <div class=”container”> <?php } $x++;?> <?php endwhile;?> </div><!–container–> </div> <?php wp_reset_postdata(); ?> <?php endif; ?> </div><!–carousel-inner–> </div><!–myCarousel–>
Unless you’re sure the carousel-inner is required for every carousel item, I recommend keeping a backup of the current version in case altering carousel-inner turns out to be the wrong call. Handle carousel-inner like this:
<?php if ( $query->have_posts() ) : ?> <div id="myCarousel" class="carousel slide" data-ride="carousel" data-interval="5500"> <?php $x = 0; ?> <div class="carousel-inner" role="listbox"> <div class="carousel-item active"> <div class="container"> <?php while ( $query->have_posts() ) : $query->the_post(); ?> <?php telegraph_post_thumbnail(); ?> <div class="carousel-caption text-left"> <h1 class="headline"><a><?php echo get_the_title() ?></a></h1> <p><?php the_excerpt(); ?></p> <span class="float-left text-muted"><?php echo get_the_date( ''); ?></span><span class="float-right text-muted"><?php the_category( ', ' ); ?></span> </div><!--carousel-caption--> <?php if ( 2 == $x % 3 && ($query->post_count - 1) != $x ) { ?> </div><!--container--> </div><!--carousel-item--> </div><!-- carousel-inner --> <div class="carousel-inner" role="listbox"> <div class="carousel-item"> <div class="container"> <?php } $x++;?> <?php endwhile;?> </div><!--container--> </div><!--carousel-item--> </div><!--carousel-inner--> </div><!--myCarousel--> <?php wp_reset_postdata(); ?> <?php endif; ?>I also moved the coverage of
if ( $query->have_posts() ) :to include the outermost carousel div. It’s very unlikely for it to ever not have posts, but in such a case I’d expect there should be no carousel related content of any sort.This is the sort of structure you end up with for three posts:
.carousel .inner .item .container .thumbnail .caption .thumbnail .caption .thumbnail .caption .end container .end item .end inner .end carouselDo you think there should be a container div for every post or no?
Why are you using two different accounts to post replies? For one thing, it’s confusing. Furthermore, we generally do not allow people to use more than one account in the forums. You need to stop using one of them. Which one would you prefer to keep using?
Is the account you will not use needed for anything else on this .org site, or can it be completely abandoned? I’ll either disable it or change its role so it cannot post in the forums.
-
This reply was modified 5 years, 9 months ago by
The topic ‘how do i slip loop into group’ is closed to new replies.