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

Watch Video

Posted November 25, 2015 5:09pm by

Images don't show up for Portfolio template.

Unless.... I set it as a featured image.

Now I know in the project you're supposed to set featured images but I've set up 3 images now for the page template. One time I forgot to do this and I noticed that the image took up the space in the "Portfolio" page. But otherwise it didn't show with the other 2 images.

Any idea why this is? Why won't it show up as the image included in the WYSIWYG custom field?

Hope this all makes sense :)

November 25, 2015 5:16pm

Could you provide your code so we can try and help?

November 25, 2015 5:20pm

Of course,

I just wondered if it was something to do with an admin setting so I didn't think to post code initially.

page-portfolio.php

<?php  
/*
    Template Name: Portfolio Page
*/
?>
<?php get_header(); ?>

 <section class="row">
      <div class="small-12 columns text-center">
        <div class="leader">

        <?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>
            <h1><?php the_title(); ?></h1>
            <p>Test</p>
            <p><?php the_content(); ?></p>   

        <?php endwhile; endif;  ?>  

        </div>
      </div>
    </section>

    <?php  

    $args = array(

      'post_type' => 'portfolio'
    );
    //start qp_query.   
    $query = new WP_Query($args);

    ?>
<section class="row no-max pad">

    <?php if($query->have_posts() ): while($query->have_posts()) : $query->the_post(); ?>
      <div class="small-6 medium-4 large-3 columns grid-item">
        <a href="<?php the_permalink(); ?>"><?php the_post_thumbnail('large'); ?></a>
      </div>

      <?php endwhile; endif; wp_reset_postdata();  ?>
<?php get_footer(); ?>

November 25, 2015 5:33pm

So you are putting images inside the content of the post in the dashboard? and it isn't showing up? Is that what you mean? Just making sure I understand you correctly.

November 25, 2015 5:37pm

That's right, what I'm doing is adding a New instance of the Portfolio custom post type.

title, description, media, which then appears as a WYSIWYG editor where the image goes.

I insert the image. If I then publish, the Portfolio page acts as if it is there, it takes up the space but doesn't display an image and it is not clickable. If I add a featured image to the page it works fine.

It might well be the way it's supposed to work, but I wondered why we would have to do this and not use the image in the image custom field.

November 25, 2015 5:43pm

When you right click and inspect the element (when the image is taking up space, but not displaying), do you see the image in the markup with the correct source?

November 25, 2015 7:55pm

Hi,

Sorry I missed this message before.

To be honest I've not inspected it yet, it's my next move once I get back to the computer. But I do know that it is just an empty blank space, but no placeholder. It's blank :)

November 26, 2015 9:47am

Right, I've finally had a chance to look at the portfolio page.

The code exists inside the following html element

<section class="row no-max pad">

The code with the missing image is as follows

<div class="small-6 medium-4 large-3 columns grid-item">
        <a href="http://localhost/localwp.com/portfolio/blue-circle/"></a>
      </div>

The other 2 appear with the class attachment-large wp-post-image

But all will appear if I simply set it as a featured image.

I'm working on localhost so i can't make the live code available but i hope this helps :)

6 Answers

November 25, 2015 7:11pm

I may be able to help you with this. I think I ran into the same problem a while back. If this isn't solved by the time I get home. I'd be happy to help.

November 25, 2015 7:56pm

I appreciate this. I can't wait to get to the bottom of this one :)

November 26, 2015 9:54pm

Another commenter named Chiedo Labs left this comment on another thread under this video. It worked for me:

"For any future watchers make sure: You go to CPT UI => edit post type => select 'portfolio' => scroll all the way to the bottom => check supports: Featured Images."

November 26, 2015 10:28pm

Thanks for your reply Juliette.

Would this help show the image in the Image custom field, not just the featured image. I'm still confused as to which one is supposed to be the one that shows.

However I'm up to date with the course apart from that one thing. :)

November 27, 2015 12:04am

I think on reflection what you're thinking about is the setting on the actual CPT setting. But this is already set and is checked. What I mean is the option to set an image that you add to the image custom field or the portfolio CPT.

Just to clarify I have the images all set up the same as the video so I can happily move on.

What I'm unsure about is what happens with the image we insert into the image WYSIWYG custom field. :)

November 27, 2015 5:28pm

I have to admit that I am just as confused at this point Jonathan.

I'm going to have to go over the tutorials again:-)

November 27, 2015 5:30pm

It is a headscratcher. :-)

I think once I'm done with this course I'll do the same just to see if there's something I missed.

November 29, 2015 9:57pm

Anybody have anything for this yet?

I only ask before I got an email asking me to select a best answer :)

November 29, 2015 11:35pm

I looked over my code and this may be the bit you're missing:

 <?php
    $thumbnail_id = get_post_thumbnail_id();
    $thumbnail_url = wp_get_attachment_image_src( $thumbnail_id, 'thumbnail-size', true );
    ?>
    <a href="<?php the_permalink(); ?>"><img src="<?php echo $thumbnail_url[0]; ?>" alt="<?php the_title();?>"></a>

EDIT: This goes after your query

November 29, 2015 11:37pm

My full code was:

  <?php
  $args = array(
  'post_type' => 'portfolio'
  );
  $the_query = new WP_Query( $args );
  ?>
  <?php if ( have_posts() ) : while ( $the_query->have_posts() ) : $the_query->the_post(); ?>
  <div class="col-md-2 portfolio-piece">
    <?php
    $thumbnail_id = get_post_thumbnail_id();
    $thumbnail_url = wp_get_attachment_image_src( $thumbnail_id, 'thumbnail-size', true );
    ?>
    <a href="<?php the_permalink(); ?>"><img src="<?php echo $thumbnail_url[0]; ?>" alt="<?php the_title();?> graphic"></a>
    <h4><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h4>
  </div>
  <?php $portfolio_count = $the_query->current_post + 1; ?>
 <!--  <?php if ( $portfolio_count % 5 == 0): ?>
    <?php endif; ?> -->
    <?php endwhile; endif; ?>

November 30, 2015 9:43am

Hi David, Thanks for your reply.

Which video is this following Is it this one? https://teamtreehouse.com/library/wordpress-theme-development/custom-post-type-templates-in-wordpress/the-portfolio-homepage Because your code is very different right down to the classes used.

I still don't see images appear if I remove featured images but thanks again for trying. :)

November 30, 2015 9:58am

Guys, I'm really sorry, I think I got this all wrong.

It won't work until we add the code to add featured images in the first place. I think this is why Zac doesn't check that the image is there before adding the code to let us set featured images. This is why they don't show up. I'm still not 100% on this but it's the only thing that makes sense. So long as I know the images show up the way I want them to then I don't think it matters all that much.

I'm sorry if I've led you all up the garden path, but it's a learning experience, right? :)

Posting to the forum is only allowed for members with active accounts.
Please sign in or sign up to post.

Welcome to the Treehouse Community

Looking to learn something new?

Jonathan Grieve

Jonathan Grieve

Images don't show up for Portfolio template.

Jake Lundberg

Jake Lundberg

Jonathan Grieve

Jonathan Grieve

Jake Lundberg

Jake Lundberg

Jonathan Grieve

Jonathan Grieve

Jake Lundberg

Jake Lundberg

Jonathan Grieve

Jonathan Grieve

Jonathan Grieve

Jonathan Grieve

6 Answers

David Tonge

David Tonge

Jonathan Grieve

Jonathan Grieve

Juliette Tworsey

Juliette Tworsey

Jonathan Grieve

Jonathan Grieve

Jonathan Grieve

Jonathan Grieve

Juliette Tworsey

Juliette Tworsey

Jonathan Grieve

Jonathan Grieve

Jonathan Grieve

Jonathan Grieve

David Tonge

David Tonge

David Tonge

David Tonge

Jonathan Grieve

Jonathan Grieve

Jonathan Grieve

Jonathan Grieve