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

I have a wordpress image not loading question

Hello, I am creating my first wordpress website www.monikaandersondesign.com/wordpressblog I watched two tutorials by Zac and am having trouble with my art page that lists my artwork. The artwork will not load. I am wondering if maybe the reason is because my template says Art and the php files say art. Thanks so much Monika

What is the code you are using for your image out?

<img src="" alt="Example image of Carnations Picture">

It looks like your images aren't loading their sources at all.

they are in php files called art.php single-art.php and content-art.php but the code says "art" and I named my file "Art" would the fact that I have mine in upper case cause the issue. I tried to rename the file to art but I do not know how. It is a custom post I created and called "Art"

Could you post a sample of the code? The title casing shouldn't matter at least not from what I gather. The posts seem to be loading so I think it is a simple syntax issue.

here is single-art.php file <?php

get_header(); ?>

<div id="primary" class="content-area">
    <div id="content" class="site-content" role="main">

        <?php get_template_part( 'content', 'art' ); ?>

    </div><!-- #content -->
</div><!-- #primary -->

<?php get_sidebar(); ?> <?php get_footer(); ?>

Here is 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">

    <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 -->

Here is art.php <?php /**

  • Template Name: Art Page */

get_header(); ?>

<div id="primary" class="content-area">
    <div id="content" class="site-content" role="main">

        <?php /* The loop */ ?>
        <?php while ( have_posts() ) : the_post(); ?>

            <article id="post-<?php the_ID(); ?>" <?php post_class(); ?>>
                <header class="entry-header">
                    <?php if ( has_post_thumbnail() && ! post_password_required() ) : ?>
                    <div class="entry-thumbnail">
                        <?php the_post_thumbnail(); ?>
                    </div>
                    <?php endif; ?>

                    <h1 class="entry-title"><?php the_title(); ?></h1>
                </header><!-- .entry-header -->

                <div class="entry-content">
                    <?php the_content(); ?>                     
                    <?php wp_link_pages( array( 'before' => '<div class="page-links"><span class="page-links-title">' . __( 'Pages:', 'twentythirteen' ) . '</span>', 'after' => '</div>', 'link_before' => '<span>', 'link_after' => '</span>' ) ); ?>
                </div><!-- .entry-content -->

                <footer class="entry-meta">
                    <?php edit_post_link( __( 'Edit', 'twentythirteen' ), '<span class="edit-link">', '</span>' ); ?>
                </footer><!-- .entry-meta -->
            </article><!-- #post -->

            <?php //comments_template(); ?>
        <?php endwhile; ?>

        <?php 
            $args = array(
                'post_type' => 'art',
                'orderby' => 'title',
                'order' => 'ASC'
            );
            $the_query = new WP_Query( $args );         
        ?>
        <?php if ( have_posts() ) : while ( $the_query->have_posts() ) : $the_query->the_post(); ?> 

        <?php get_template_part( 'content', 'art' ); ?>

        <?php endwhile; endif; ?>

    </div><!-- #content -->
</div><!-- #primary -->

<?php get_sidebar(); ?> <?php get_footer(); ?>

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

You're pulling the image from ACF correct? How are you storing the image as a custom field? Are you storing it as an object or a url?

<?php 

$image = get_field('image');

if( !empty($image) ): ?>

    <img src="<?php echo $image['url']; ?>" alt="<?php echo $image['alt']; ?>" />

<?php endif; ?>

By default the above would be how you'd want to pull that info (assuming it was Object and not URL).

Sorry I just started learning wordpress on 2-10-16 so a lot of the terminology is new. What is ACF and where do I put this code - which page. Yes it is not a url I just uploaded the image and it is showing in the media library after I upload it.

I created a custom post called art using CPT UI and custom fields widget so yes the image is placed in a custom field

I did rename the custom field "art" instead of "Art" so it matches all the code in the php files but they still will not load...

ACF is a plugin "Advanced Custom Fields", so I'm guessing you probably aren't using ACF now (but check it out because it is awesome!). When you are adding images to those posts, how are you adding them? Are they the featured image, a field within the post, or in the editor portion of the post?

thanks they are a field in a custom post I created. I created a custom post and part of the custom post ask for you to upload an image. I followed this tutorial and followed it exactly like he instructed but my images will not load and I am not sure why.... Here is the tutorial thanks https://teamtreehouse.com/library/how-to-make-a-website-with-wordpress/custom-post-types-and-fields-in-wordpress/setting-up-custom-post-types-and-fields

Yes i did use advanced custom post fields

Okay so you are in fact using Advanced Custom Fields. When he goes to the Custom Fields link in that video and then creates the new custom field for the image, at 2:16 you can see him select the Image URL for the return value. Is that what yours is set to?

Yes I did not do that! A simple little error like that wow. How did I miss that. So how do I correct this and check this box I am trying to edit it and it is not allowing me to?

You should be able to go back to the Custom Field, click on edit and then change the return value by clicking the radio button.

thanks it is working!!!!!!!!!!!!!!!!!!!!!!!!!!!!!! I just have to reupload the pics thanks!!!!

I want to give you the best answer but it won't let me I will try again in a little while thanks for your help

Glad you got it working!

You can mark the answer I just added, that way people won't have to read the long reply chain here if they don't want to.

1 Answer

So for anyone else with a similar issue, make sure that your advanced custom field images are outputting in the correct format you are using. Use url unless you have a reason for needing the image object.