Archived topic
Featured Image Background
3 replies · Started by Antar on October 9, 2017
Hello, All -
I wonder if you help me crack something which could be useful for lots of people. On single post pages (under certain conditions) I would like to use the featured image as a background - for the featured image!
I know that sounds crazy but bear with me...
I have a couple of clients who aren't very good at prepping images for their posts. The result is that lots of times their featured images are the wrong shape/dimensions to appear at the top of the page. Below is a screen shot of a typical example:
The featured image is too small to fill the top of the page so ends up looking like it's floating in a sea of white space! I want to fix this by covering the background div with a copy of the featured image. Photoshop mock-up below:
It's the same trick they use will cell phones when filming a movie in portrait mode. It won't look great every time - but it will make the featured image look more like a proper header and get rid of that awful white space!
I've made some progress with code required to create the background effect...
<?php if ( $background = wp_get_attachment_image_src( get_post_thumbnail_id( $page->ID ), 'full' ) ) : ?>
<div style="background: url('<?php echo $background[0]; ?>') 50% 50% no-repeat; background-size:cover; box-shadow: inset 0 0 0 1000px rgba(0,0,0,.5);"></div>
<?php endif ?>I just don't know how to apply it to the actual GP header div:
<div class="featured-image page-header-image-single grid-container grid-parent">
Could anyone help please?!
Thanks,
Antar
Hi Antar,
Try adding this into the wp_head hook in GP Hooks:
<?php
$image = get_the_post_thumbnail_url( get_the_ID(), 'full' );
if ( $image ) {
?>
<style>
.page-header-image-single {
background-image: url('<?php echo $image; ?>');
}
</style>
<?php
}
?>Tom -
Brilliant.
Thank you.
:0)
Antar
You're welcome :)
