Welcome to the Treehouse Community
Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.
Looking to learn something new?
Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.
Start your free trial
Jennifer Smeriglio
13,236 PointsWork 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 →
</a>
</p>
</div>
<?php endwhile; else: ?>
<p> There are no posts or pages here. </p>
<?php endif; ?>
<?php get_footer(); ?>
5 Answers
Damir Pristav
23,048 PointsCode 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:
Zac Gordon
Treehouse Guest TeacherAlso, 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?
Jennifer Smeriglio
13,236 PointsSo 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!
Jennifer Smeriglio
13,236 PointsDamir - 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
23,048 PointsThat means that you don't have images uploaded, try to upload the image, maybe you forgot when you added new work.
Jennifer Smeriglio
13,236 PointsHowever, 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...