Images won't show up

• PumpinIron

• June 20, 2015 at 2:07 am

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

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'); ?>

show up 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.

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(); ?>

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

• Jonathan

• June 21, 2015 at 3:31 am

Hi @pumpiniron

This is a bit off the point but why are you not using the repeater field for this? That way your field setup would be much easier, your template code would be shorter and you’re not limiting yourself to 3 slides.

http://www.advancedcustomfields.com/resources/repeater/

When I check your site it seems to be working now? Did you resolve this?

• PumpinIron

• June 21, 2015 at 4:57 am

Sorry, I forgot to update this. I resolved the issue!

I probably should have used repeater fields though, you’re right!

• Jonathan

• June 21, 2015 at 8:06 pm

No worries, glad you got it working!

It’s a fairly easy transition to repeater field so it shouldn’t be too hard for you to change it if you want 🙂 Your structure can still be used.