0

I have a slider that contains li's with images. The first 3 images are required, but the user should be able to add as many as 20. I think I have to create a ul with actually 20 li's, the li's after the 3rd are set to display: none, but for some reason it breaks the slider. I have the same slider set with custom post types, with a loop, and it works fine, but it seems that if I hardcode the li's, even if they are set to display: none, it breaks.

This is my code:

$imagen2            = get_field("imagen2");
$imagen3            = get_field("imagen3");
$imagen4            = get_field("imagen4");
$imagen5            = get_field("imagen5");
$imagen6            = get_field("imagen6");

...



<div class="artiq-slidder-detalle-wrap">
                        <div class="artiq-slidder detalle-slidder">
                            <ul class="artiq-slidder-ul">
                                <li class="artiq-slidder-item"> <img src="<?php echo $imagen1['url'] ?>"></li>
                                <li class="artiq-slidder-item clickable"> <img src="<?php echo $imagen2['url'] ?>"></li>
                                <li class="artiq-slidder-item"> <img src="<?php echo $imagen3['url'] ?>"></li>

<li class="artiq-slidder-item"> <img src="<?php echo $imagen4['url'] ?>"></li>

                            </ul>
                        </div>
                    </div>

The 4th li is an empty custom field, and so it breaks the slider even though is set to display: none;

How could I create some sort of loop that says, if there is data in the custom field, create the li with the custom field?

Right now I get an empty li with an img inside with scr(unknown).

1

You could add a check to only display the item if it exists:

<?php if ( $imagen4 ) { ?>
<li class="artiq-slidder-item"> <img src="<?php echo $imagen4['url'] ?>"></li>
<?php } ?>

But it looks like you are using the Advanced Custom Fields plugin. If this is the case, you would probably be better off using a repeater field, and specifying a minimum number of images. Then, display it in a loop.

<?php if( have_rows('images') ): ?>
<div class="artiq-slidder-detalle-wrap">
    <div class="artiq-slidder detalle-slidder">
       <ul class="artiq-slidder-ul">
<?php while( have_rows('imagen') ): the_row(); 
$imagen = get_sub_field('imagen');
?>
          <li class="artiq-slidder-item"> <img src="<?php echo $imagen['url'] ?>"></li>
<?php endwhile; ?>
        </ul>
    </div>
</div>
<?php endif; ?>

(The above code assumes your repeater is named "images")

  • The first solution does exactly what I needed, I couldn't test the second as I don't have the premium version of ACF. – Sergi Jun 9 '17 at 19:21

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.