PHP: Dont' render row if value is empty

I have a a slider (Bootstrap 4) that renders some images that are uploaded on the server via FTP.

I am using the below code to render these images in front-end.

<img src="<?php echo get_template_directory_uri(); ?>/files/images/<?php the_sub_field('image'); ?>" class="img-fluid is-slider-item" />

This works but the problem is that in front-end also the empty fields are rendered, showing empty elements.

This is how "empty" slides are now rendered in HTML.

<img src="http://mywebsite.local/wp-content/themes/new/files/images/" class="img-fluid is-slider-item">

A working image is rendered like this in HTML

<img src="http://mywebsite.local/wp-content/themes/new/files/images/2345672.png" class="img-fluid is-slider-item">

How can I prevent empty slides to be rendered in front-end?

Here the whole code

<?php if( have_rows('files') ): ?>
    <div class="carousel_bg">
        <div class="container">
            <div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
                <!-- Indicators -->
                <ol class="carousel-indicators">
                    <?php
                    $active = 'active';
                    $num = 0;
                    while ( have_rows('files') ) : the_row();
                        ?>
                        <li data-target="#carousel-example-generic" data-slide-to="<?php echo $num ?>" class="<?php echo $active ?>"></li>
                        <?php
                        $active = '';
                        $num += 1;
                    endwhile; ?>
                </ol>
                <!-- Wrapper for slides -->
                <div class="carousel-inner" role="listbox">
                    <?php
                    $active = 'active';
                    while ( have_rows('files') ) : the_row();
                        ?>
                        <div class="carousel-item <?php echo $active ?> screen08">
                            <div class="container">
                                <img src="<?php echo get_template_directory_uri(); ?>/files/images/<?php the_sub_field('image'); ?>" class="img-fluid is-slider-item" />
                            </div>
                        </div><!-- /item -->
                        <?php $active = '';
                    endwhile;
                    ?>
                </div>
            </div>
        </div>
    </div><!-- /row -->
<?php endif; ?>

What I tried is to move <?php if( have_rows('files') ): ?> inside <div class="carousel_bg"> but it did not work

Any hint?

Many thanks!

1 answer

  • answered 2021-09-11 19:02 Orbital

    The picture we need is in sub_field ('image'), we need to check if there is a picture or not at the top of the loop. If not, skip this step.

    Try this code

    <?php if( have_rows('files') ): ?>
        <div class="carousel_bg">
            <div class="container">
                <div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
                    <!-- Indicators -->
                    <ol class="carousel-indicators">
                        <?php
                        $active = 'active';
                        $num = 0;
                        while ( have_rows('files') ) : the_row();
                        $image = get_sub_field('image');
                        if($image == "" ) continue;
                            ?>
                            <li data-target="#carousel-example-generic" data-slide-to="<?php echo $num ?>" class="<?php echo $active ?>"></li>
                            <?php
                            $active = '';
                            $num += 1;
                        endwhile; ?>
                    </ol>
                    <!-- Wrapper for slides -->
                    <div class="carousel-inner" role="listbox">
                        <?php
                        $active = 'active';
                        while ( have_rows('files') ) : the_row();
                        $image = get_sub_field('image');
                        if($image == "" ) continue;
                            ?>
                            <div class="carousel-item <?php echo $active ?> screen08">
                                <div class="container">
                                    <img src="<?php echo get_template_directory_uri(); ?>/files/images/<?php the_sub_field('image'); ?>" class="img-fluid is-slider-item" />
                                </div>
                            </div><!-- /item -->
                            <?php $active = '';
                        endwhile;
                        ?>
                    </div>
                </div>
            </div>
        </div><!-- /row -->
    <?php endif; ?>
    

How many English words
do you know?
Test your English vocabulary size, and measure
how many words do you know
Online Test
Powered by Examplum