Hello all I hope someone can help me here. Been spending all night trying to fix this I’m trying to use flexslider with ACF’s repeater field but it doesn’t work.
Basically I used a free downloaded html template and trying to convert it to WP with ACF.
Here’s what i’m trying to do:
And my code:
<?php if(get_field('portfolio_items')) : ?>
<div id="portfolioSlider">
<ul class="slides">
<li>
<?php while(has_sub_field('portfolio_items')) : ?>
<div class="col-md-4 wp4">
<div class="overlay-effect effects clearfix">
<div class="img">
<img src="<?php the_sub_field('portfolio_item_image')['url']; ?>" alt="<?php the_sub_field('portfolio_item_image')['alt']; ?>">
<div class="overlay">
<a href="#"><i class="fa fa-search"></i>View More</a>
<a>x</a>
</div>
</div>
</div> <!-- END .overlay-effect .effects .clearfix -->
<h2><?php the_sub_field('porfolio_item_title'); ?></h2>
<p><?php the_sub_field('portfolio_item_description'); ?></p>
</div> <!-- END .col-md-4 .wp4 -->
<?php endwhile; ?>
</li>
<!-- END .slides -->
</div> <!-- END .portfolioSlider -->
<?php endif; ?>
Now when I switch the while loop outside of li it’s working fine but the layout is messed up. I also tried adding wp_reset_postdata() after endwhile but it’s doesn’t work.
This reply has been marked as private.
This reply has been marked as private.
Hi @jeffelizaga
It means that you need to show the closing and opening </li><li> tag every third entry. It should be something like this:
<?php if(get_field('portfolio_items')) : ?>
<div id="portfolioSlider">
<ul class="slides">
<?php $i = 0; ?>
<li>
<?php while(has_sub_field('portfolio_items')) : $i++; ?>
<div class="col-md-4 wp4">
<div class="overlay-effect effects clearfix">
<div class="img">
<img src="<?php the_sub_field('portfolio_item_image')['url']; ?>" alt="<?php the_sub_field('portfolio_item_image')['alt']; ?>">
<div class="overlay">
<a href="#" class="expand"><i class="fa fa-search"></i><br>View More</a>
<a class="close-overlay hidden">x</a>
</div>
</div>
</div> <!-- END .overlay-effect .effects .clearfix -->
<h2><?php the_sub_field('porfolio_item_title'); ?></h2>
<p><?php the_sub_field('portfolio_item_description'); ?></p>
</div> <!-- END .col-md-4 .wp4 -->
<?php if ($i % 3 == 0){ ?>
</li><li>
<?php } ?>
<?php endwhile; ?>
</li>
</ul> <!-- END .slides -->
</div> <!-- END .portfolioSlider -->
<?php endif; wp_reset_postdata(); ?>
This page should give you more idea about it: http://stackoverflow.com/questions/936242/php-how-do-you-determine-every-nth-iteration-of-a-loop.
Hope this helps.
Thank you James. It works but now there is a 3rd extra slide with empty content where it’s supposed to be only two slides from the original html demo:(http://tympanus.net/Freebies/HalcyonDaysTemplate/#)
see attached image
Hi @jeffelizaga
In this case, you need to count the total item of the slide and only show the tags if it’s not the last item in the slider like this:
<?php if(get_field('portfolio_items')) : ?>
<div id="portfolioSlider">
<ul class="slides">
<?php
$i = 0;
$max_item = count(get_field('portfolio_items'));
?>
<li>
<?php while(has_sub_field('portfolio_items')) : $i++; ?>
<div class="col-md-4 wp4">
<div class="overlay-effect effects clearfix">
<div class="img">
<img src="<?php the_sub_field('portfolio_item_image')['url']; ?>" alt="<?php the_sub_field('portfolio_item_image')['alt']; ?>">
<div class="overlay">
<a href="#" class="expand"><i class="fa fa-search"></i><br>View More</a>
<a class="close-overlay hidden">x</a>
</div>
</div>
</div> <!-- END .overlay-effect .effects .clearfix -->
<h2><?php the_sub_field('porfolio_item_title'); ?></h2>
<p><?php the_sub_field('portfolio_item_description'); ?></p>
</div> <!-- END .col-md-4 .wp4 -->
<?php if ($i % 3 == 0 && $i != $max_item){ ?>
</li><li>
<?php } ?>
<?php endwhile; ?>
</li>
</ul> <!-- END .slides -->
</div> <!-- END .portfolioSlider -->
<?php endif; wp_reset_postdata(); ?>
I hope this helps.
It works perfect. I appreciate your help James. Thank you so much
Hi James. I apologize for asking too much questions. I’m still not very familiar with PHP and just took a course about ACF.
I have tried to do this with Custom Post Type UI and this time it’s for the team section: http://tympanus.net/Freebies/HalcyonDaysTemplate/#
I did the same thing just like the last code you posted but there’s an extra slide with empty content. What am I missing?
<div id="teamSlider">
<ul class="slides">
<?php $team = new WP_Query( array(
'post_type' => 'team',
'orderby' => 'post_id',
'order' => 'ASC'
)); ?>
<?php
$li = 0;
$max_li = count($team);
?>
<li>
<?php while($team->have_posts()) : $team->the_post(); $li++; ?>
<div class="col-md-4 wp5">
<?php if(has_post_thumbnail()) {
the_post_thumbnail();
} ?>
<h2><?php the_title(); ?></h2>
<p><?php the_content(); ?></p>
<div class="social">
<ul class="social-buttons">
<?php if(get_field('social_account')) : while(has_sub_field('social_account')) : ?>
<li>
<a href="<?php the_sub_field('team_social_link'); ?>" class="social-btn">
<?php the_sub_field('team_social_icon'); ?>
</a>
</li>
<?php endwhile; endif; ?>
</ul>
</div> <!-- END .social -->
</div> <!-- END .col-md-4 .wp5 -->
<?php if($li % 3 == 0 && $li != $max_li) { ?>
</li><li>
<?php } ?>
<?php endwhile; ?>
</li>
</ul> <!-- END .slides -->
</div> <!-- END #teamSlider -->
Hi @jeffelizaga
That’s because WP_Query will return not only the posts but also other things related to the query. You can debug the $team variable if you want. This page should give you more idea about it: https://www.advancedcustomfields.com/resources/debug/.
I believe you can get the total posts count by using this code:
$max_li = $team->post_count;
Please learn more about WP_Query here: https://codex.wordpress.org/Class_Reference/WP_Query.
I hope this helps.
