[Resolved] Use the first image in the post as background for post container.

[Vish]

Hi Tom

I know this is not the place to ask but I am trying to get all the help I can from anyone I could. Apologies if this is totally unrelated.

What I am trying to do is to pick the first image in the post and use it as the background for the post container (which is displayed in the archives/blog pages).

Here’s a reference image if it helps: https://ibb.co/R9ZWZgc

Any idea how we can do this?

Thanks!

Note: I have included the site URL

[David]

Hi there,

this catch_that_image() function is really cool:

https://css-tricks.com/snippets/wordpress/get-the-first-image-from-a-post/

Once its registered you could simply call it in an after_content hook for your archives. eg.

<?php
echo '<img class="first-image" src="';
echo catch_that_image();
echo '" alt="" />';
?>

then use some CSS to absolutely position it behind the post content.

[Vish]

Thanks a lot, David. That indeed is a very cool function. 🙂 And as you said, some CSS got the job done. Thanks again!

[David]

Awesome – glad to be of help

[Author]

Posts