Welcome to the Treehouse Community

The Treehouse Community is a meeting place for developers, designers, and programmers of all backgrounds and skill levels to get support. Collaborate here on code errors or bugs that you need feedback on, or asking for an extra set of eyes on your latest project. Join thousands of Treehouse students and alumni in the community today. (Note: Only Treehouse students can comment or ask questions, but non-students are welcome to browse our conversations.)

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and a supportive community. Start your free trial today.

WordPress

Work Images not Showing and Pushing Footer off

Posting this a second time to try and see if anyone will answer!

So far everything has been working out but I cannot get my images to show up. I had originally tried putting the image object in my image field and then I changed it to image url, but no images are showing up still. I have the blocks with the background colors and buttons and all the text - just no image.

Also, the twitter widget in my footer is displaced above the other two and to the right. I believe it is because the left project is a little longer than the right one because of the description length so it is pushing the Twitter widget off.

Here is my code to the work page if that helps:

<?php 

/* 

    Template Name: Work Page

*/

get_header(); ?>

<div class="grid_12 omega clearfix">


<?php 

    $args = array(
        'post_type' => 'work'
    );

    $the_query = new WP_Query( $args );

?>

<?php if ( have_posts() ) : while ( $the_query->have_posts() ) : $the_query->the_post(); ?>

    <div class="grid_6 spotlight project" style="background-color: <?php the_field( 'background_color' ) ; ?>">

        <a href="<?php the_permalink(); ?>">
            <img src="<?php the_field( 'homepage_slider_image' ); ?>">
        </a>

        <h4>
            <a href="<?php the_permalink(); ?>"><?php the_title(); ?></a>
        </h4>

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

        <p>
            <a class="btn blue" href="<?php the_permalink(); ?>" style="background-color: <?php the_field( 'button_color' ) ; ?>">
                View Project &rarr;
            </a>
        </p>

    </div>

<?php endwhile; else: ?>

    <p> There are no posts or pages here. </p>

<?php endif; ?>

<?php get_footer(); ?>

5 Answers

Damir Pristav
Damir Pristav
23,048 Points

Code looks ok, try to var dump the homepage slider image, this way you will see if the image source attribute has errors.

<?php var_dump( the_field('homepage_slider_image') ); ?>
<img src="<?php the_field( 'homepage_slider_image' ); ?>" >

The output should be the link to the image, something like this:

http://localhost/allisongrayce.com/wp-content/uploads/2014/05/smells-like-bakin-homepage-image.pngNULL

Zac Gordon
STAFF
Zac Gordon
Treehouse Guest Teacher

Also, check to make sure that is the same name used in the custom fields plugin when you created the field and that there is a value assigned on the backend.

For the footer, do you have all three widgets setup?

So I do have all the assigned fields set up correctly. I think the problem was that I wasn't selecting the images to be on the homepage slider, because on my site, I wasn't planning on having one. So I changed the field that is selected in the work.php page to match a new one I made. That works and now I get the images to show up, but it is also showing a broken image right to the left of my image that is showing up. I also had to delete the quotes and last ">" around the image source because the code was showing up on the screen.

It looks like as long as there are two projects on the screen the footer will stay where it needs to. But if there is an odd number it goes off kilter. Aren't I able to clear the footer so that nothing interferes with it?

Thank you so much for your help so far!

Damir - Thanks for the suggestion, I tried it and all that happened was "Null" showed up in each of the blocks where the pictures should be. Not sure what that means.

Zac - I did double check it, and everything is the same. Would it have something to do with it being either an Image URL or Image Object? Since they aren't websites I'm linking to I figured I'd need to upload the actual file when I created the work. I chose image object in order to do that, but could that have been the problem?

Damir Pristav
Damir Pristav
23,048 Points

That means that you don't have images uploaded, try to upload the image, maybe you forgot when you added new work.

However, I did upload an image for each one I created. I made two projects and the blocks are showing up with the title and description and button, but it isn't showing the image. And when I go into my media library they are in there as well. So I feel like there is something wrong with the src of the image...