Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

WordPress

Jonathan Davies
Jonathan Davies
2,162 Points

ACF: Gallery + Custom Post Type + Flexslider

Ok so i have followed Zac's tutorial and i've almost comepletely finished my website. However, I want to have a flexslider gallery for individual projects in the single-project.php (would be single-work.php in the tutorial) of my site.

I downloaded the ACF: Gallery so i could upload multiple images for the slider, but when i use the snippet of code for the flexslider from the front-page.php is doesn't work.

I also use the guide from the http://www.advancedcustomfields.com/add-ons/gallery-field/ with no avail.

So i decided to use my initiative and play around to get it work, but so far i've managed to display the images I want but it just wont display in the flexslider.

Jonathan Davies
Jonathan Davies
2,162 Points

I had a read of a few posts associated with flexslider, then i read throught the code. If i removed the if statement from:

wp_register_style('flexslider', get_template_directory_uri() . '/css/flexslider.css'); if(is_front_page()) { wp_enqueue_style('flexslider'); }

this would maybe remove any restriction from displaying the flexslider on other pages besides the front-page.php. This shows the container for the flexslider but no images.

Jonathan Davies
Jonathan Davies
2,162 Points

Haha fixed it!

So the fix is to remove both the if(is_front_page()) so it looks like:

wp_register_style('flexslider', get_template_directory_uri() . '/css/flexslider.css'); wp_enqueue_style('flexslider');

and to remove the if(is_page('home')) to make it look like

wp_register_script('flexslider', get_template_directory_uri() .'/js/flexslider.js', array('jquery'), ' ', true); wp_enqueue_script('flexslider');

Jonathan Davies
Jonathan Davies
2,162 Points

Also the code for you .php would need to look like this if your using ACF: Gallery.

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

                <ul class="slides">                 

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

                    $the_query = new WP_Query( $args );

                    ?>

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

                        <?php

                        $images = get_field('project_images');

                        if($images): ?>

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

                        <?php endif; ?>

                        <?php endwhile; endif;?>

                    </ul>

            </div>
Jonathan Davies
Jonathan Davies
2,162 Points

Slider works now but show all the images for every project not the single projects.

1 Answer

Jonathan Davies
Jonathan Davies
2,162 Points

Just use the video from ACF: Gallery, but make sure you take the if statements out of your function.php so you can use flexslider on all pages.