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

WordPress How to Make a Website with WordPress Custom Post Types and Fields in WordPress Custom Post Type Templates

Stephanie Bercht
Stephanie Bercht
911 Points

Images not showing in custom post type... Any ideas?

I've been following Zac Gordon's tutorial on Custom Post Type Templates, and created new post type "Art". Got a couple images up there, but they aren't showing on the website. Any ideas?

5 Answers

Ron McCranie
Ron McCranie
7,837 Points

The things I check first are:

  1. Image location being referenced is correct (relative to the page or site root)
  2. Permissions: When you're dealing with uploads you have to make sure the file & folder permissions allow the webserver to access and display the images on the page.

Sometimes it takes a little digging.

I'm having the same issue. When I use Chrome's inspect tool on the missing images, it turns out that the 'src' attribute in the image tag isn't being generated by the PHP code in content-art.php . So my custom post type isn't generating any images at all.

When I use the uploaded images in a regular default Wordpress Page or Post, they work fine.

Here's the provided file from the lesson, content-art.php

<?php
/**
 * Template for displaying art custom post type entries
 */
?>  


<article id="post-<?php the_ID(); ?>" <?php post_class(); ?>>
    <header class="entry-header">

        <h1 class="entry-title"><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h1>

        <div class="entry-meta">
            <p>Price: $<?php the_field('price'); ?></p>
        </div><!-- .entry-meta -->

    </header><!-- .entry-header -->

    <div class="entry-content">


    <!--    Here's the culprit: -->
        <p><img src="<?php the_field('image'); ?>" alt="Example image of <?php the_title(); ?>"></p>



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

    </div><!-- .entry-content -->   

</article><!-- #post -->

I added a line of troubleshooting code underneath the <img> tag to echo out whatever the_field('image') returns, and nothing shows up.

Hey party people keep at it. Just systematically try to figure out what is going on. Remember it's just code which does exactly we tell it to do!

Ok so in ACF there is a "field name" assigned.

Custom Fields -> Art

Field Order Field Label Field Name Field Type

1 Art art Image

Original in content-art.php

<p><img src="<?php the_field('image'); ?>" alt="Example image of <?php the_title(); ?>"></p>

New and improved version!

<p><img src="<?php the_field('art'); ?>" alt="Example image of <?php the_title(); ?>"></p>

Stephanie Bercht
Stephanie Bercht
911 Points

Thanks, Ron! I have a suspicion it's not referencing the image correctly since the image url from the website gives the url to the post itself and not the image, but I don't know where to fix this. Any tips?

(Here's the website: http://stephliveshere.com/?page_id=15)

Stephanie Bercht
Stephanie Bercht
911 Points

Problem Solved, if anyone is reading.

I kept fidgeting with things, both CTP and custom fields. In the end, I don't know what I changed but it got fixed when I deleted the posts and recreated them.