Row background image from a custom query

Beaver Builder
1

I’m inserting the latest blog post at the top of the home page of a website, and so far I’m using the posts module. However, I’m wanting the featured image of the latest post to be the background image, and the only thing I can figure out how to do is make the featured image of the page I’m on the background image. Any tips for making the featured image of the latest published blog the background of a row?

I have Beaver Builder, the BB theme, and Themer all installed on this site.

2

Super simple, just select photo as the background type, then select URL then add:
[wpbb post:featured_image size=full display=url] as the url

3

Looks like that does the current page’s featured image, not the latest published blog article. Is there a way to specify I want the latest blog’s featured image instead?

4

No, you are going to have to write your own shortcode for that. You should be able to access the posts array in the wp_query global, then use the 1st posts ID to get the thumbnail url.

5

Ah, bummer, was hoping that already existed. Okay, I’ll put something together and drop it into functions.php. Thanks!

6

For anyone looking, here’s the code I ended up adding to functions.php, then I was able to put the shortcode [latestFeaturedImage] in for the URL of the image:

// Shortcode to get latest post's featured image
add_shortcode('latestFeaturedImage', 'latest_featured_image');

function latest_featured_image($atts) {
    global $post;
    // Get the post object that's the latest post
    $latest_post = get_posts("post_type=post&numberposts=1");
    // Get the ID of that post
    $latest_post_id = $latest_post[0]->ID;
    // Get the featured image URL of that post, large size
    $latest_post_featured_url = get_the_post_thumbnail_url($latest_post_id, 'large');
    return $latest_post_featured_url;
}
1 Like
7

@tandsgo Thank you for sharing your solution!

8

I had a Metabox advanced_image field that was storing the image’s attachment ID. Here is the code I used to get the image’s URL (I also entered the shortcode into the URL field in the row BG):

// Shortcode to get a an image's URL by the image's ID
add_shortcode('get-image-url-by-id', 'cust_get_image_url_by_id');
function cust_get_image_url_by_id($atts)
{
    // set default settings
    $args = shortcode_atts( array(
        'size' => 'full',
        'post_meta_key' => ''
    ), $atts );
    $post_id = get_the_ID();

    $image_id = get_post_meta( $post_id, $args['post_meta_key'], true );
    $image_url = wp_get_attachment_image_src( $image_id, $args['size'] );
    
    return $image_url[0];
}

Here is the usage of the shortcode:

[get-image-url-by-id post_meta_key="_your_meta_key" size="full"]

1 Like