[Resolved] Featured image as background

[Author]

Posts

[Lykke Scavenius]

How would the code from this post https://toolset.com/forums/topic/how-to-add-a-custom-posts-featured-image-as-a-background-for-a-div-in-views/ look if I want a larger image to use as background for a div? (not the thumbnail as in this code)

I am looking to use this for showing blog posts in sidebars, and also want to use it to output text on top of the blog post images in post archives.

By the way I am using Visual Composer, and I tried using their grid builder, but I was not able to output the custom field data on top of the images, and so I decided to get more freedom by building a custom view.

Thanks, regards
Lykke

[Shane]

Hi Lykke,

Thank you for contacting our support forum.

What when you are using the code below.

// Add Shortcode
function get_featured_url($atts) {
// Attributes
  $vals=shortcode_atts(
    array(
      'post_id' => '',
    ), $atts );
  
$feat_image = wp_get_attachment_url( get_post_thumbnail_id($vals["post_id"]) );
return "style = 'background-image: url(". esc_url($feat_image).");height: 120px; width: 120px;'";
}
  
add_shortcode( 'get_featured_url', 'get_featured_url' );

You can remove the height: 120px; width: 120px; configuration from the shortcode and it should display the image in its entirety.

Thanks,
Shane

[Lykke Scavenius]

Hi Shane,

Thanks for your reply. I have added the code to my functions file, but having trouble with the output. Since I'm trying to output featured image from blog posts and not an "album" post type, I wrote "post" instead. But it's not working.

<div class="cover-container" [get_featured_url post_id="[wpv-post-id id='$post']"]>

[Shane]

Hi Lykke,

Its not rendering the code correctly it seems.

Would you mind allowing me to have admin access to the page so that I can have a look at this for you ?

Thanks,
Shane