Using feature image as background image

[Nathan]

Hi, can you please show me how to use events calendar’s feature image as background image? I know the php for getting feature image is tribe_event_featured_image(), but this gives the img tag as well as all the different sizes (ex below). Is there a way to extract just the url “//localhost:3000/wp-content/uploads/2016/07/shopping.jpg” so we can use it as background image?

Please advise.

ex.

<img src="//localhost:3000/wp-content/uploads/2016/07/shopping.jpg" class="attachment-full size-full wp-post-image" alt="shopping" srcset="//localhost:3000/wp-content/uploads/2016/07/shopping.jpg 2436w, //localhost:3000/wp-content/uploads/2016/07/shopping-250x200.jpg 250w, //localhost:3000/wp-content/uploads/2016/07/shopping-768x614.jpg 768w, //localhost:3000/wp-content/uploads/2016/07/shopping-700x560.jpg 700w, //localhost:3000/wp-content/uploads/2016/07/shopping-120x96.jpg 120w" sizes="(max-width: 2436px) 100vw, 2436px">

Thanks,

Connie

• This topic was modified 9 years, 8 months ago by Nathan.
• This topic was modified 9 years, 8 months ago by Nathan.

[Nico]

Hi there Connie,

Thanks for getting in touch with us! I’ll help you on this one…

You can use the function wp_get_attachment_image_src to get the URL of the featured image:

<?php if (has_post_thumbnail( $event->ID ) ): ?>
<?php $image = wp_get_attachment_image_src( get_post_thumbnail_id( $event->ID ), 'full' ); ?>
<div style="background-image: url('<?php echo $image[0]; ?>')">

</div>
<?php endif; ?>


Please let me know if the above helps,
Have a great weekend,
Nico

[Nathan]

Hi Nico,

I got the following error using your code:

Notice: Undefined variable: event in /Users/connieyu/Desktop/projects/key-wp/wp-content/themes/key/tribe-events/pro/photo/single-event.php on line 26

Notice: Trying to get property of non-object in /Users/connieyu/Desktop/projects/key-wp/wp-content/themes/key/tribe-events/pro/photo/single-event.php on line 26

Looks like $event is undefined…please help!

Connie

[Nico]

Thanks for following up Connie!

Depending on the context or template the event variable might change it’s name. The fix is super simple just change the variable name to $post, instead of $event. Here’s the fixed code:


<?php if (has_post_thumbnail( $post->ID ) ): ?>

<?php $image = wp_get_attachment_image_src( get_post_thumbnail_id( $post->ID ), 'full' ); ?>
<div style="background-image: url('<?php echo $image[0]; ?>')">

</div>

<?php endif; ?>


Please let me know if it works as expected now,
Best,
Nico

[Nathan]

Awesome Nico, it worked! I had tried post before but must have got my syntax wrong.

Thanks so much for your help.

[Nico]

You are welcome Connie 🙂

I’ll go ahead and close out this thread, but if you need help with anything else please don’t hesitate to create a new one and we will be happy to assist you.

Best,
Nico

[Author]

Posts