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
Dan-Thomas Tveita
107 PointsConditional header-image (featured image)
My wordpress header-image is called as background-image like this:
<header id="my_id" class="my_class" style='background-image: url(<?php header_image(); ?>) ' >
I would like to make an if statement that makes is_single grab the "featured-image" instead, as a header-image, and header_image() as fallback if there is no featured image set. Makes sense?
But im having problems making it work.
9 Answers
Derek Crosson
991 PointsOkay, from reading the wp_get_attachment_image_src documentation (http://codex.wordpress.org/Function_Reference/wp_get_attachment_image_src) I'm gonna guess and say it should look like this:
background-image: url(echo wp_get_attachment_image_src ( get_the_post_thumbnail_id( $post->ID ), 'my-large')[0]);
background-size: echo wp_get_attachment_image_src ( get_the_post_thumbnail_id( $post->ID ), 'my-large')[1]) wp_get_attachment_image_src ( get_the_post_thumbnail_id( $post->ID ), 'my-large')[2]);
Derek Crosson
991 PointsI'm not sure if this will work but it's worth a try...
<header id="my_id" class="my_class" style='background-image: url(<?php if(is_single() && has_post_thumbnail($post_id){the_post_thumbnail();} else {header_image();} ?>)'>
Dan-Thomas Tveita
107 PointsThat looked like something, but im getting a syntax error.
Dan-Thomas Tveita
107 Pointsit says syntax error, unexpected '{'
Dan-Thomas Tveita
107 PointsNevermind. Was missing a parenthesis. But its not working. The code outputted by the php is like this, and not correct:
<header id="my_id" class="my_class" style="background-image: url(<img width="2000"; height="1250"; src="http://my_image_url"; class="attachment-post-thumbnail wp-post-image" />) ">
Any other way to make this work?
maybe using wp_get_attachment_url ?
Dan-Thomas Tveita
107 PointsAlright, i got it working by adding:
echo wp_get_attachment_thumb_url( get_post_thumbnail_id( $post->ID ) );
Thanks alot Derek, you really saved me :) Its working just as I wanted it to.
Derek Crosson
991 PointsSorry Dan, just saw your replies now. Glad I could help you figure it out :)
Dan-Thomas Tveita
107 PointsNow i have another problem, which is probably just me making a silly mistake.
Im calling the thumbnail-ID and size like this:
echo wp_get_attachment_thumb_url( get_post_thumbnail_id($post->ID), 'large' );
where large is defined in my functions.php like this:
add_image_size('large', 1200, 500, true);
But im getting the wrong output. Im getting an image with 150x150 w&h, instead of my "large" thumbnail. Any ideas?
Derek Crosson
991 PointsChange
add_image_size('large', 1200, 500, true);
to
add_image_size('large', 1200, 500);
Does it make a difference?
Dan-Thomas Tveita
107 PointsNo, its still outputting:
style="background-image: url(http://my_image_url/imgname-150x150.jpg)"
...when it should have outputted my imgname-1200x500.jpg file instead.
Derek Crosson
991 PointsWait, no.
I think "large" is a reserved word
try this
add_image_size('your-theme-name-large', 1200, 500, true);
echo wp_get_attachment_thumb_url( get_post_thumbnail_id($post->ID), 'your-theme-name-large' );
Dan-Thomas Tveita
107 Pointsagain, its still outputting the small image (150x150, which btw is not defined by me in functions.php) :
style="background-image: url(http://my_image_url/imgname-150x150.jpg)"
The "imgname-1200x500.jpg" is created and exists in my uploadsfolder. So functions.php is doing the job of resizing and cropping. But the header-code is not grabbing it...
Derek Crosson
991 PointsIt looks like the wp_get_attachment_thumb_url function only accepts an id parameter.
https://codex.wordpress.org/Function_Reference/wp_get_attachment_thumb_url
Try using wp_get_attachment_image_src like this
echo wp_get_attachment_image_src ( get_post_thumbnail_id( $post->ID ), 'your-theme-name-large')
I'm not sure if that'll work... Just guessing.
Dan-Thomas Tveita
107 PointsDidn't work, html output only gives
background-image: url(Array)
Derek Crosson
991 PointsYou shouldn't have to because the background is already set to the correct size (cropped in functions.php). I just put the size in case you needed it, it's not necessary :)
Dan-Thomas Tveita
107 PointsGreat! Thank you so much. You really saved me so much time.
Derek Crosson
991 PointsSure, happy coding :)
Dan-Thomas Tveita
107 PointsDan-Thomas Tveita
107 PointsDude that worked!
I tried without calling the
background-size:, and its returning the correct image. Is there a reason why i should implement thebackground-size:as well? If not, im happy with this!