WordPress.org

Ready to get started?Download WordPress

Forums

Set the header image as a background (rather than an image) (2 posts)

  1. richardx
    Member
    Posted 3 years ago #

    Hi-de-ho, here's one for you all...

    I'm trying to set the 'Featured Images' as a background (rather than simple an inline image) so I can overlay content using .css positioning.

    I've so far managed to tweak the default header.php so the default image displays as a background image, but I've not been able to do the same for the 'Featured Image' as the php embeds it as html i.e. <img src="images/foo.jpg">

    Unfortunately my basic php skills are not quite up to the job.

    Here's the dev site (with the image displaying as a background img via css):

    http://ampersand.ctrlx.co.uk/

    And here's a page with a 'Featured Image' (which is displaying the img via the standard html img tag - with content than forced into position with the css):

    http://ampersand.ctrlx.co.uk/interior-design/

    While this works I know it's a hack and want to do it properly.

    Here's the code from header.php

    <?php
    // The header image
    // Check if this is a post or page, if it has a thumbnail, and if it's a big one
    if ( is_singular() &&
    has_post_thumbnail( $post->ID ) &&
    ( /* $src, $width, $height */ $image = wp_get_attachment_image_src( get_post_thumbnail_id( $post->ID ), array( HEADER_IMAGE_WIDTH, HEADER_IMAGE_WIDTH ) ) ) &&
    $image[1] >= HEADER_IMAGE_WIDTH ) :
    // Houston, we have a new header image!
    echo get_the_post_thumbnail( $post->ID, 'post-thumbnail' );
    else : ?>
    <div id="backgroundImage" style="background:url(<?php header_image(); ?>);"></div>
    <?php endif; // end check for featured image or standard header ?>
    <?php endif; // end check for removed header image ?>

    It's working properly after the 'else', it's the bit before (get_the_post_thumbnail) that I think is the problem, I just need it to return the featured image URL, but in a similar div.

    Any pointers appreciated :-)

  2. richardx
    Member
    Posted 3 years ago #

    Worked it out!

    Follow up on this in case any one is wondering...

    header.php

    <?php
    // The header image
    // Check if this is a post or page, if it has a thumbnail, and if it's a big one
    if ( is_singular() &&
    has_post_thumbnail( $post->ID ) &&
    ( /* $src, $width, $height */ $image = wp_get_attachment_image_src( get_post_thumbnail_id( $post->ID ), array( HEADER_IMAGE_WIDTH, HEADER_IMAGE_WIDTH ) ) ) &&
    $image[1] >= HEADER_IMAGE_WIDTH ) :
    // Houston, we have a new header image!
    echo '<div id="backgroundImage" style="background-image:url(',simplified_get_the_post_thumbnail_url($post->ID, 'large'),');"></div>';
    else : ?>
    <div id="backgroundImage" style="background-image:url(<?php header_image(); ?>);"></div>
    <?php endif; // end check for featured image or standard header ?>
    <?php endif; // end check for removed header image ?>

    Then add this to functions.php

    // Get only the image url link
    	function simplified_get_the_post_thumbnail_url( $post_id = NULL ) {
        global $id;
        $post_id = ( NULL === $post_id ) ? $id : $post_id;
        $src = wp_get_attachment_image_src(get_post_thumbnail_id($post_id), 'full');
        $src = $src[0];
        return $src;
    	}

    This second part was from code posted by http://blogcastor.com

Topic Closed

This topic has been closed to new replies.

About this Topic