简体   繁体   中英

Adding a fallback image to a wordpress advanced custom fields loop

I'm currently using the advanced custom fields plugin on a wordpress site that I'm developing and it is proving very useful.

I bought the repeater addon which had helped me generate a list of staff members. However I imagine that there won't always be an image available for the staff member so I would like to use a fallback image or use an online placeholder image service like http://placehold.it ?

Here is the code:

                <?php if(get_field('about_the_practioner')): ?>

                <?php while(the_repeater_field('about_the_practioner')): ?>

                <article class="colleague_excerpts">

                         <figure>
                            <?php if(get_field('image')): ?>
                            <img src="<?php the_field('image' ) ?>" alt="<?php the_sub_field('image_alt_text'); ?>">
                            <?php else: ?>
                            <img src="http://placehold.it/160x160&text=Awaiting Image">
                            <?php endif; ?> 

                         </figure>

                        <div class="description">
                            <header>
                                <h4><?php the_sub_field('header')?><span><?php the_sub_field('title')?></span></h4>
                            </header>
                            <p><?php the_sub_field('text') ?></p>
                            <a href="<?php the_sub_field('page_link')?>" class="button"><?php the_sub_field('page_link_text') ?></a>
                        </div>
                    <hr>

                </article>

                <?php endwhile; ?>

                <?php endif; ?>

I've seen conditional statements used to create fallback images if a featured image is not available. I have tried something similar in this case at the point where the image is called, I'm not good with php however and only the fallback image is brought into the webpage even if the image field is populated. Any help would be appreciated.

Just figured it out! The functions that I was passing into the conditional statement were incorrect! I was using the repeater field feature of advanced custom fields and should have been passing in get_sub_field for all the values above. Its the little things that trip you up!

<?php if(get_sub_field('image')): ?>
<img src="<?php the_sub_field('image' ) ?>" alt="<?php the_sub_field('image_alt_text'); ?>">
<?php else: ?>
<img src="http://placehold.it/160x160&text=Awaiting Image">
<?php endif; ?>

Although I don't know what some of these functions return the function get_field('image') may return something no matter if there is an image or not, so instead of

<?php if(get_field('image')): ?>
<img src="<?php the_field('image' ) ?>" alt="<?php the_sub_field('image_alt_text'); ?>">
<?php else: ?>
<img src="http://placehold.it/160x160&text=Awaiting Image">
<?php endif; ?> 

Maybe try

<?php if(!empty(the_field('image'))): ?>
<img src="<?php the_field('image' ) ?>" alt="<?php the_sub_field('image_alt_text'); ?>">
<?php else: ?>
<img src="http://placehold.it/160x160&text=Awaiting Image">
<?php endif; ?> 

Which returns the placeholder if the image is empty.

I might be counting wrong, in fact I was. Ignore this answer. I thought the brackets weren't matching up, and that a problem in the generated HTML was causing a problem. Jonny Beech has worked it out.

Try this

 <?php 
$image = get_field('banner');
if( !empty($image) ): 
?>
<img src="<?php echo $image['url']; ?>" alt="<?php echo $image['alt']; ?>"/>
<?php else: ?>
<?php 

 echo "no image";?>


<?php endif; ?>

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM