0

I have a full width/height header div that I want to use the featured image in, but I'm having trouble getting the div to load a default image if no featured image is set in a blog post.

I figured I could do something like this, but it seems like its still using the first image to load into the div (and not the default img im setting)

<?php
    global $post;
    $src = wp_get_attachment_image_src( get_post_thumbnail_id( $post->ID ), array( 5600, 1000 ), false, '' );
?>

    <style type="text/css">
        .parallax {
            background-image: url(<?php echo $src[0]; ?>);
        }
    </style>

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

    <style type="text/css">
        .parallax {
            background-image: url("/wp-content/themes/propertunity/assets/images/backgrounds/highway.jpg") !important;
        }
    </style>

<?php else : ?>

<?php endif; ?>

what am I doing wrong?

4

Try something like this:

<?php
global $post;

$src = wp_get_attachment_image_src( get_post_thumbnail_id($post->ID), array( 5600,1000 ), false, '' );
$default = get_template_directory_uri()."/assets/images/backgrounds/highway.jpg";
$bgimg = (isset($src[1])) ? $src[0] : $default;
?>

<style type="text/css">
.parallax { background-image: url(<?= $bgimg ?>); }
</style>

wp_get_attachment_image_src() says it returns false when not found, but for some reason I've had bad time with that, so I just check if the width of a found image is returned ($src[1]) instead. Always works.

get_template_directory_uri() is a better approach than a relative path - you'll find that as this starts showing on other pages than the homepage. Depending on your site, this might of actually been what your issue was.


Here's a slightly better way to write it, with one less query, for efficiency

<?php
global $post;

$img = get_template_directory_uri()."/assets/images/backgrounds/highway.jpg";

$postThumb = get_post_thumbnail_id($post->ID);
if (!empty($postThumb)) {
    $src = wp_get_attachment_image_src( $postThumb, array( 5600,1000 ), false, '' );
    if (isset($src[1]))
        $img = $src[0];
}

?>

<style type="text/css">
.parallax { background-image: url(<?= $img; ?>); }
</style>

PS here's how to format code on this site.

UPDATE:

$post won't always be the current PAGE your on, if your on an ARCHIVE, your main feed, and so on, as you've found when listing posts its the first post. So you may need to conditionals what the current page actually is:

<?php
global $post;

$thisPage = false;

if (is_singular())
    $thisPage = $post;
elseif (is_home())
    $thisPage = get_post(get_option('page_for_posts'));
// other conditionals for other non-singular things here


if ($thisPage) {
    $postThumb = get_post_thumbnail_id($thisPage->ID);  
    // etc
  • no sorry neither of those worked. It's still showing the first post's image instead of the default image... – user3547342 Jan 10 '18 at 5:06
  • we'll we're missing a piece of the puzzle then: at what point in your theme/plugin do you fire this code? and how? what page are you showing this on that it doesnt work? home? archive? single_post? Are you sure $post is the correct post object for your current screen? – David Sword Jan 10 '18 at 17:14
  • I put it in the header.php where I'm displaying said header div. So it works for any new posts I create, but it doesn't work on the default blog page that shows the list of articles, or on the individual author pages. What its doing is showing the most recent blog post's featured image instead. – user3547342 Jan 11 '18 at 18:52
  • its because you're using $post - if you the current page you are isn't a single post or single blog post, it returns/shows a bunch posts, than $post will be the first post in that list. What you want to do is run a conditional. I've updated my post to reflect this. – David Sword Jan 11 '18 at 20:44

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.