Wordpress conditional slider (Advanced Custom Fields)

Question

Complete newbie to PHP but not bad at cobbling together. I've started using Advanced Custom Fields for Wordpress which helps immensely.

I've got the code together that turns a gallery field into a jQuery slider (you chuck in the images in the back end and it loops through and creates the slider). However, what I'd like it to do is only load a static image if there is only one image entered. In psudo-code:

if field contains more than one image, loop through the slider code else (if there is only one image) just wrap the one image in img tags.

Current live code that generates the slider:

<?php

/* Create the Markup for a slider */

$images = get_field('hero_image_gallery');

if( $images ): ?>
    <div id="slider" class="flexslider">
        <ul class="slides">
            <?php foreach( $images as $image ): ?>
                <li>
                    <img src="<?php echo $image['url']; ?>" alt="<?php echo $image['alt']; ?>" />
                    <p class="flex-caption"><?php echo $image['caption']; ?></p>
                </li>
            <?php endforeach; ?>
        </ul>
    </div>
<?php endif; 

?>

Any ideas? Initially I thought I'd want to count $images but I'm not sure that contains the number of images in the gallery.

Edit: Just dumped out the hero_image_gallery which starts:

array(2)

There's currently 2 images in there and if I add a third, I get array(3).

Edit 2: Full dump of hero_image_gallery below. I've had to edit out some details as I can only post 1 URL as a newbie.

array(2) { [0]=> array(9) { ["id"]=> int(971) ["alt"]=> string(14) "School" ["title"]=> string(12) "home-image-2" ["caption"]=> string(0) "" ["description"]=> string(0) "" ["url"]=> string(74) "#" ["width"]=> int(1260) ["height"]=> int(860) ["sizes"]=> array(9) { ["thumbnail"]=> string(74) "#" ["thumbnail-width"]=> int(150) ["thumbnail-height"]=> int(102) ["medium"]=> string(74) "#" ["medium-width"]=> int(300) ["medium-height"]=> int(204) ["large"]=> string(74) "#" ["large-width"]=> int(1024) ["large-height"]=> int(698) } } [1]=> array(9) { ["id"]=> int(977) ["alt"]=> string(0) "" ["title"]=> string(12) "home-image-1" ["caption"]=> string(0) "" ["description"]=> string(0) "" ["url"]=> string(74) "#" ["width"]=> int(1260) ["height"]=> int(860) ["sizes"]=> array(9) { ["thumbnail"]=> string(74) "#" ["thumbnail-width"]=> int(150) ["thumbnail-height"]=> int(102) ["medium"]=> string(74) "#" ["medium-width"]=> int(300) ["medium-height"]=> int(204) ["large"]=> string(74) "#" ["large-width"]=> int(1024) ["large-height"]=> int(698) } } }

zachwills zachwills · Accepted Answer · 2013-07-23T13:50:47

I think you might have answered your own question! If you currently have 2 images, and when you view the returned array and it comes back with 2 results, then to check if you only have 1 image you would do something like this :

if( count($images) == 1 )

Edit: added full code

<?php

/* Create the Markup for a slider */

$images = get_field('hero_image_gallery');

if( $images && count($images) == 1 ) { ?>
   <!-- there is only 1 image -->
<?php } else if ( $images && count($images) > 1 ) { ?>
    <!-- there is more than 1 image -->
    <div id="slider" class="flexslider">
        <ul class="slides">
            <?php foreach( $images as $image ): ?>
                <li>
                    <img src="<?php echo $image['url']; ?>" alt="<?php echo $image['alt']; ?>" />
                    <p class="flex-caption"><?php echo $image['caption']; ?></p>
                </li>
            <?php endforeach; ?>
        </ul>
    </div>
<?php } ?>

Wordpress conditional slider (Advanced Custom Fields)

1 Answers