1

I am looking to create a slider that uses ACF to display a separate slider on each individual page that has its own images loaded into the gallery field.

I have currently created the slider using flexslider, and have managed to get the images to display, but the problem I have is all the images are displaying on each page that has an image set. So page 1 has image 1 and this only displays on page 1 (no other pages) which is what I want. However, if I add an image to page 2, the page 1 and page 2 both display the slider with image 1 and 2. I need to have separate slide images for each individual page, andI need the slider to not display if no images are set on a page. I hope that all makes sense. This is the code I have so far:

<div id="featured" class="flexslider clearfix">

                         <ul class="slides">

                                 <?php
                                 $args = array(
                                 'post_type' => 'page',
                                 );

                                 $the_query = new WP_Query($args);

                                 ?>

                                 <?php if (have_posts()) : while ($the_query->have_posts()) : $the_query->the_post(); ?>

                                         <?php

                                         $images = get_field('slider_image');

                                         if ($images): ?>

                                         <?php foreach ($images as $image): ?>
                                                 <li>
                                                         <img src="<?php echo $image['url']; ?>">
                                                 </li>
                                         <?php endforeach; ?>

                                         <?php endif; ?>

                                         <?php endwhile; endif;?>

                                 </ul>

                 </div>

Any help would be really appreciated. I'm guessing I need to loop pages by id or something, but I'm pretty new to PHP so I'm not entirely sure. Thanks

4
  • Are you making two queries in page.php? – 99teko Aug 18 '16 at 10:11
  • You better post your whole page.php file so I can take a good look at the code. – 99teko Aug 18 '16 at 10:11
  • Thanks for getting back to me. That is the full code because it needs to go in functions.php in a child theme. Thanks again – user53340 Aug 18 '16 at 11:03
  • just to clarify, the plan is to wrap this in a function and hook into a theme hook to place the slider in the correct place. Thanks – user53340 Aug 18 '16 at 12:04
1

For what you want to achieve you do not need a loop at all. Both page 1 and 2 display all images because you query all pages on your site, then take all the images from each 'slider_image' ACF field and put them into the foreach loop.

When you get values from any field it will by default takes the values for the current page, so there is no need for you to pass any additional ID as that is the default behaviour.

If I understand correctly what you need is the basic loop that can be found in the documentation https://www.advancedcustomfields.com/resources/gallery/

<?php 

$images = get_field('slider_image');

if( $images ): ?>
  <div id="featured" class="flexslider clearfix">
    <ul class="slides">
        <?php foreach( $images as $image ): ?>
            <li>
                     <img src="<?php echo $image['url']; ?>" width="<?php echo $image['width']; ?>" height="<?php echo $image['height']; ?>" alt="<?php echo $image['alt']; ?>" />
            </li>
        <?php endforeach; ?>
    </ul>
  </div>
<?php endif; ?>

The part if( $images ): checks whether $images contains any values. If not, then nothing within that if will display on the page. Put the into the if also, so you don't have empty divs on the page.

EDIT: Just saw the comment regarding the hook. Then you would have to add a variable to get the ID for the current page get_the_ID and pass that ID into the get_field as the second argument. That should ensure that you always get the current page and the rest should work as described above.

1
  • Wow I feel like a massive idiot right now ='( I just thought it would have to be more complex then that. I seriously need to grasp when to use what based on what the code is doing in WordPress. I'm guessing my while loop was looping every page and getting every slider_image field and then outputting the content which is why it was displaying all the images on every page. Thank you so much for your help!! I have learnt something new which is really useful. Thanks again for your time! – user53340 Aug 18 '16 at 14:22

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.