Issue with ACF fields showing up in WordPress template

Question

Okay, I am having the most bizarre issue ever. I have a custom home page template for a WordPress site I am working on.

You can see a screenshot of how I have my ACF fields for this template setup on the backend here.

The issue I am having is that when I try to display the field

<img src="<?php the_field('slide_1_thumb'); ?>" alt="" />

the image doesn't show up at all. I have the Return Value set to 'Image URL', and the odd thing is that it shows the images for

<?php the_field('slide_1'); ?>

just fine with no issues at all.

I'm not sure what I am doing wrong here, but there are no spelling errors at all, for some reason those slide_1_thumb images won't show up. I want to think this is one of those Occam's Razor type of situations where I missed something so simple, but I've gone over this a million times with no luck.

Below you will find a copy of the PHP code for my home-page.php template.

<?php
/**
 * Template Name: Home Page
 *
 * A custom template for the home page.
 *
 * The "Template Name:" bit above allows this to be selectable
 * from a dropdown menu on the edit page screen.
 */

 get_header(); ?>

 <div id="slideshow-container">
<div id="slideshow" class="slideshow pcfcu-theme">
    <div class="slideshow-img" style="background-image: url(<?php      the_field('slide_1'); ?>);">
        <div class="slideshow-img-inner">
            <div class="slideshow-img-text">
                <h1><?php the_field('slide_1_title'); ?></h1>
                <p><?php the_field('slide_1_description'); ?></p>
            </div>
        </div>
    </div>
    <div class="slideshow-img" style="background-image: url(<?php the_field('slide_2'); ?>);">
        <div class="slideshow-img-inner">
            <div class="slideshow-img-text">
                <h1><?php the_field('slide_2_title'); ?></h1>
                <p><?php the_field('slide_2_description'); ?></p>
            </div>
        </div>
    </div>
    <div class="slideshow-img" style="background-image: url(<?php the_field('slide_3'); ?>);">
        <div class="slideshow-img-inner">
            <div class="slideshow-img-text">
                <h1><?php the_field('slide_3_title'); ?></h1>
                <p><?php the_field('slide_3_description'); ?></p>
            </div>
        </div>
    </div>
</div>
 </div>

 <div id="content-container">
<div id="content-container-inner">
    <div id="recent-blog-entries-container">
        <div id="recent-blog-entries">
            <header><h1>Recent Blog Entries</h1></header>
            <?php $postslist = get_posts('numberposts=2&order=DESC&orderby=date'); 
                foreach ($postslist as $post) : setup_postdata($post);
            ?> 
                <h2 class="rbe-title"><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h2>
                <p class="rbe-posted-on">Posted on: <?php the_time(get_option('date_format')) ?></p>
                <div class="rbe-excerpt"><?php the_excerpt(); ?></div>
            <?php endforeach; ?>
        </div>
    </div>

    <div id="features">
        <header><h1>Features</h1></header>
        <a class="goTo1"><div class="feature-thumb"><img src="<?php the_field('slide_1_thumb'); ?>" alt="" /></div></a>
        <a class="goTo2"><div class="feature-thumb"><img src="<?php the_field('slide_2_thumb'); ?>" alt="" /></div></a>
        <a class="goTo3"><div class="feature-thumb"><img src="<?php the_field('slide_3_thumb'); ?>" alt="" /></div></a>
    </div>
</div>
 </div>

<?php get_footer(); ?>

Another strange thing is that if you take one of the working ACF images such as

<?php the_field('slide_1'); ?>

it works perfectly and outputs the image, but when you move it down to the 'Features' section of the code to see if it will work in place of one of those small feature thumbnails, it won't work in that portion of the code. It's almost as if that bottom 'Features' portion of the page has some sort of error, but I don't see any errors at all in my code.

In other words, ALL of this code works perfect up until the very last portion of it with the 'feature' thumbnail images. You can see this live on the website here.

Answer 1

Okay, I have NO idea what was going on, but all I had to do to fix this was delete the ACF fields on the backend and then recreate them with the EXACT same names as before. Sure enough that fixed it.

So, while I don't have a conclusive answer as to why this was happening, all I can say is that it must have been some sort of odd glitch.

Answer 2

When making a new loop using get_posts(), you should end it with the wp_reset_postdata() function to reset your loop's data back to what it was before the get_posts(). So try this:

<div id="recent-blog-entries">
    <header><h1>Recent Blog Entries</h1></header>
    <?php $postslist = get_posts('numberposts=2&order=DESC&orderby=date'); 
    foreach ($postslist as $post) : setup_postdata($post); ?> 
        <h2 class="rbe-title"><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h2>
        <p class="rbe-posted-on">Posted on: <?php the_time(get_option('date_format')) ?></p>
        <div class="rbe-excerpt"><?php the_excerpt(); ?></div>
    <?php endforeach; ?>
    <?php wp_reset_postdata(); ?>
</div>

Adding the wp_reset_postdata() after your loop should fix this for you.