WordPress.org

1. richardx
   Member
   Posted 1 year 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 1 year 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.