ul list with only as many li's as filled custom fields

Question

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).

Answer 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")