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

PHP

Posted by Konstantin Nikkari
Konstantin Nikkari
5,185 Points

How to make PHP "if" code to display:none if a featured image is not set

This site https://jaanavuola.com/portfolio/ is very dependent of a featured image set on posts and pages. The featured image is set in function.php file with this code

// Add featured image on single post
add_action( 'genesis_before_content', 'jaana_featured_image', 1 );
function jaana_featured_image() {

    $thumb = wp_get_attachment_image_src( get_post_thumbnail_id($post->ID), 'full' );

    ?>

    <div class="featured-image-in-posts" style="background-image: url('<?php echo $thumb['0'];?>')">
    </div>

    <?php

}

Everything is fine as long as the post/page HAS a featured image. But if it doesn't then the page looks like this https://jaanavuola.com/oma-tili/ It takes the big space for the featured image and leaves it as an empty gray space.

I'm asking your help to make a PHP if statement something like this:

if 

/* The div which is showing a featured image */
.featured-images-in-posts

is 

/* CSS generated code when the PHP is not finding a featured image */
background-image: url((unknown));

make the 

.featured-images-in-posts {
  display: none
}

Is this possible?

1 Answer

Joel Bardsley
Joel Bardsley
31,249 Points
Joel Bardsley
Joel Bardsley
31,249 Points

Since your variable $thumb already has the information of whether or not a post has a featured image, instead of adding CSS in PHP, it would be easier to wrap your div in an if statement so the div only renders if $thumb contains a featured image. Something like this:

<?php if ($thumb): ?> // if there's no featured image, the result of this is false, so the code below doesn't run.
  <div class="featured-image-in-posts" style="background-image: url('<?php echo $thumb['0'];?>')">
  </div> 
<?php endif; ?>

Hopefully that helps. If you try this suggestion, let me know if there's any issues.

Konstantin Nikkari
Konstantin Nikkari
5,185 Points

Not sure what I don't understand. If I ad IF before $thumb and ENDIF; in the end like so:

// Add featured image on single post
add_action( 'genesis_before_content', 'jaana_featured_image', 1 );
function jaana_featured_image() {

    if $thumb = wp_get_attachment_image_src( get_post_thumbnail_id($post->ID), 'full' );

    ?>

    <div class="featured-image-in-posts" style="background-image: url('<?php echo $thumb['0'];?>')">
    </div>

    <?php

    endif;

}

I'm getting page error

The jaanavuola.com page isn’t working

jaanavuola.com is currently unable to handle this request.

HTTP ERROR 500

Joel Bardsley
Joel Bardsley
31,249 Points
Joel Bardsley
Joel Bardsley
31,249 Points

Leave your $thumb variable how you had it before, but after creating it, run the if statement to make sure $thumb contains an image. Like this:

<?php
// Add featured image on single post
add_action( 'genesis_before_content', 'jaana_featured_image', 1 );
function jaana_featured_image() {

    $thumb = wp_get_attachment_image_src( get_post_thumbnail_id($post->ID), 'full' );

    if ($thumb): ?>
      <div class="featured-image-in-posts" style="background-image: url('<?php echo $thumb['0'];?>')">
      </div>
    <?php endif;

}
?>

The error you're getting is from not wrapping your if condition in parentheses.

Konstantin Nikkari
Konstantin Nikkari
5,185 Points

I though I tried that variant as well BUT I guess I didn't.

Thank you for your help. This solves the problem.

If I want to add a default featured image as a background I assume I will be able to do it so:

// Add featured image on single post
add_action( 'genesis_before_content', 'jaana_featured_image', 1 );
function jaana_featured_image() {

    $thumb = wp_get_attachment_image_src( get_post_thumbnail_id($post->ID), 'full' );

    if ($thumb): 
      ?>
      <div class="featured-image-in-posts" style="background-image: url('<?php echo $thumb['0'];?>')">
      </div>
      <?php
    else:
      ?>
      <div class="featured-image-in-posts" style="background-image: url('image/bg.jpg')">
      </div>
      <?php
     endif;

}

EDIT: Yup, tried and tested. Works very well.

If you would live in Finland I would offer you a dinner :)