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 From Bootstrap to WordPress Add Bootstrap Components to WordPress Theme Finishing Up Our Bootstrap Slideshow Carousel

Posted by Mohamed Mokhtar
Mohamed Mokhtar
9,651 Points

A post without thumbnail

well i have a question about this part , if you have a post that don't have a featured image or a thumbnail .. like the case we have here two posts have images and one without image ... the problem is with the post without image when you click on it you get a thumbnail of a broaken image although the post has no images set to it .... i think this is because of the code we have on the single.php template that get the thumbnail url and post the image there ... so i would really like to know a fix for that ... i am thinking of IF statement but i am not sure if this is the proper way and how to do it if it is ... i would really really love a reply to this post please

4 Answers

eck
eck
43,038 Points

See how this works out for you. But be sure to change the variable values in the else statement :P

<div class="page-header">

    <?php

        if ( has_post_thumbnail() ) {
            $thumbnail_id = get_post_thumbnail_id(); 
            $thumbnail_url = wp_get_attachment_image_src( $thumbnail_id, 'thumbnail-size', true );
            $thumbnail_meta = get_post_meta($thumbnail_id, '_wp_attachment_image_alt', true);
        }
        else {
            $thumbnail_url = array( "yoursite.com/images/thumbnail-default.jpg" );
            $thumbnail_meta = "This is your default image.";
        }

    ?>

    <p class="featured-image"><img src="<?php echo $thumbnail_url[0]; ?>" alt="<?php echo $thumbnail_meta; ?>"></p>
    <h1><?php the_title(); ?></h1>

    <em>
        <p>
          By <?php the_author(); ?> 
          on <?php echo the_time('l, F jS, Y'); ?>
          in <?php the_category(', '); ?>
          <a href="<?php comments_link(); ?>"><?php comments_number(); ?></a>
        </p>
    </em>

</div>

    <?php the_content(); ?>

    <hr>

    <?php comments_template(); ?>

    <?php endwhile; else; ?>
Mohamed Mokhtar
Mohamed Mokhtar
9,651 Points

You are the MAN ! :) , i tried to modify it abit , did not make a brilliant thing in here i have just ended the else statement i thought this way i will get an empty space , but dumb me ! :) i ended up with the P tag displaying as a block in there i am sure it is the P tag because i've gave it a bg red color and it poped out red on there :) ... so i was thinking is there a WP function to add an html element in this else statement so i can style it to display none maybe ? do you think this is a best practice or there is better ways to do it ? .... sorry again for asking so much questions but you gave me the chance to ask so much by helping me the way you are :)

eck
eck
43,038 Points

If you rather not have a default image, you could try something like this instead:

<div class="page-header">    

  <?php   if ( has_post_thumbnail() ): ?>

        <?php

            $thumbnail_id = get_post_thumbnail_id(); 
            $thumbnail_url = wp_get_attachment_image_src( $thumbnail_id, 'thumbnail-size', true );
            $thumbnail_meta = get_post_meta($thumbnail_id, '_wp_attachment_image_alt', true);

        ?>

        <p class="featured-image"><img src="<?php echo $thumbnail_url[0]; ?>" alt="<?php echo $thumbnail_meta; ?>"></p>

    <?php endif; ?>

    <h1><?php the_title(); ?></h1>

    <em>
        <p>
          By <?php the_author(); ?> 
          on <?php echo the_time('l, F jS, Y'); ?>
          in <?php the_category(', '); ?>
          <a href="<?php comments_link(); ?>"><?php comments_number(); ?></a>
        </p>
    </em>

</div>

    <?php the_content(); ?>

    <hr>

    <?php comments_template(); ?>

    <?php endwhile; else; ?>

You could also use and elseif here to create another html element to replace the image.

Mohamed Mokhtar
Mohamed Mokhtar
9,651 Points

Thank you alot man ! you have been a great help ... you actually made me understand php better now ! thank you i really appreciate it !

eck
eck
43,038 Points

Your welcome, glad I could help :D

eck
eck
43,038 Points
eck
eck
43,038 Points

I have not done the tutorial you are working on, but if I understand the problem correctly I will agree that you do need to set up a conditional statement when creating those images. You will either want a placeholder image, if none are featured, or and empty space, depending on your design.

Here is a sample of what a placeholder/default image fallback might look like ( taken from the WP codex http://codex.wordpress.org/Function_Reference/has_post_thumbnail ):

<?php
// Must be inside a loop.

if ( has_post_thumbnail() ) {
    the_post_thumbnail();
}
else {
    echo '<img src="' . get_bloginfo( 'stylesheet_directory' ) . '/images/thumbnail-default.jpg" />';
}
?>
Mohamed Mokhtar
Mohamed Mokhtar
9,651 Points
Mohamed Mokhtar
Mohamed Mokhtar
9,651 Points

Zac Gordon , can you help me with this issue please , this is the 3rd post for me on few topics on wordpress and well ... i did not get any help and questions are piling in my head :)

Zac Gordon
Zac Gordon
Treehouse Guest Teacher
Zac Gordon
Zac Gordon
Treehouse Guest Teacher

Hi,

Looks like you've everyone here is giving spot on advice for you :)

Mohamed Mokhtar
Mohamed Mokhtar
9,651 Points

yea Erik was great :) ... to be honest i was kinda frustrated because i had few posts on wordpress and i did not get any reply , this is why i tagged you in the first place .. but at least i had help in this post so one better than nothing at all :) , thanks any way and great courses on wordpress i will start the full track i think but i am abit confused should i dive at php first or not ... i think it will be better to because in this Bootstrap to WP course sometimes i had a hard time following with some php code fast enough

eck
eck
43,038 Points

I would definitely recommend doing the PHP courses before developing in WordPress, as it caters most to new PHP developers :)

Mohamed Mokhtar
Mohamed Mokhtar
9,651 Points

already started php development track ;) , thanks again Erik ! :)

Mohamed Mokhtar
Mohamed Mokhtar
9,651 Points
Mohamed Mokhtar
Mohamed Mokhtar
9,651 Points

Thanks A lot for replying ! .. and you do understand the problem just right , first of all you confirmed to me that i was thinking straight so thank you :) .. 2nd i am new to wordpress and php in general so my second question will be , this is the code i've right now

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

            <div class="page-header">

              <?php
                  $thumbnail_id = get_post_thumbnail_id(); 
                  $thumbnail_url = wp_get_attachment_image_src( $thumbnail_id, 'thumbnail-size', true );
                  $thumbnail_meta = get_post_meta($thumbnail_id, '_wp_attachment_image_alt', true);
              ?>

              <p class="featured-image"><img src="<?php echo $thumbnail_url[0]; ?>" alt="<?php echo $thumbnail_meta; ?>"></p>
              <h1><?php the_title(); ?></h1>

               <em>
                <p>
                  By <?php the_author(); ?> 
                  on <?php echo the_time('l, F jS, Y'); ?>
                  in <?php the_category(', '); ?>
                  <a href="<?php comments_link(); ?>"><?php comments_number(); ?></a>
                </p>
              </em>

            </div>

            <?php the_content(); ?>

            <hr>

           <?php comments_template(); ?>

          <?php endwhile; else; ?>

i am sure you understand what this whole code chunk does :) , i am concerned with the image part , how to wrap it in conditional statement while i already have a loop running ? is it possible to wrap a loop inside a loop ?