• Skip to main content
  • Skip to forum navigation

StudioPress

  • Shop for Themes
  • My StudioPress

Forum navigation

  • Home
  • General Genesis Discussions
  • StudioPress Themes
  • Genesis Blocks
    • Genesis Blocks
    • Genesis Custom Blocks
  • Retired Themes
  • FAQs
  • Forum Rules
  • Internationalization and Translations
  • Forum Bugs and Suggestions
  • Forum Log In

Are You Using The WordPress Block Editor?

Genesis now offers plugins that help you build better sites faster with the WordPress block editor (Gutenberg). Try the feature-rich free versions of each plugin for yourself!

Genesis Blocks Genesis Custom Blocks

How to set post featured image thumbnail as background image correctly

Welcome!

These forums are for general discussion on WordPress and Genesis. Official support for StudioPress themes is offered exclusively at My StudioPress. Responses in this forum are not guaranteed. Please note that this forum will require a new username, separate from the one used for My.StudioPress.

Log In
Register Lost Password

Community Forums › Forums › Archived Forums › General Discussion › How to set post featured image thumbnail as background image correctly

This topic is: not resolved

Tagged: background image, featured image, wp_get_attachment_image_src

  • This topic has 7 replies, 3 voices, and was last updated 4 years, 5 months ago by hariteja922.
Viewing 8 posts - 1 through 8 (of 8 total)
  • Author
    Posts
  • August 20, 2018 at 7:47 am #222637
    Moose2.0
    Member

    So i have a bit of code that draws in the featured image from a post and makes it the background image for that individual post, but the issue is its just repeating same image across all posts instead of each post being its own image:

    add_action( 'wp_head', 'set_featured_background', 99);
    function set_featured_background() {
    if ( has_post_thumbnail() ) {
    $featured_img_url = get_the_post_thumbnail_url(get_the_ID(),'full');
    ?>
    <style>
    .has-post-thumbnail {
    background-image: url('<?php echo $featured_img_url ?>');
    background-size: 100% 100%;
    }
    </style>
    <?php
    }
    }

    And ive tried a few different variations but it always jsut finds the most recent posts image and uses that across all posts. Do i need to be trying to put in a check to make sure it does the same thing every unique post. For example: If this post has a unique ID find its thumbnail image and apply as a style. Or is it because im trying to add it to the css class has-post-thumbnail which is applied to all posts? [that have a thumbnail]

    As a note i am using Genesis grid by Bill Erickson, but it doesnt make a difference if its on or off.

    http://www.visualiseitinprogress.co.uk/WhifflerCarCentre/wordpress/extras/blog/
    August 20, 2018 at 8:15 am #222639
    Brad Dalton
    Participant

    This tutorial may help https://journalxtra.com/wordpress/quicksnips/use-wordpress-featured-image-post-page-background-picture/

    Also note, you could use the wp_add_inline_style function built into WordPress for the CSS.


    Get Help – Book Consultation.

    August 20, 2018 at 8:45 am #222640
    Moose2.0
    Member

    Cheers for the response, that was the link i used to start off unfortunately!

    August 20, 2018 at 9:34 am #222642
    Brad Dalton
    Participant

    Based on my testing, the code you posted works, however, you can add a conditional like this :

    if ( ! has_post_thumbnail() OR ! is_singular( 'post' ) ) 
     return;
    

    And remove one of the closing curly brackets.

    Or code it like this :

    if ( has_post_thumbnail() && is_singular( 'post' ) ) {
     return;
    

    Note : For every opening bracket, you need a closing one.

    This assumes you only want to use the featured image on single posts.

    Then you'll need to code the output for wp_add_inline_style. Step 2 on this tutorial will get you started.


    Get Help – Book Consultation.

    August 20, 2018 at 8:39 pm #222645
    Brad Dalton
    Participant

    Sorry, the 2nd line is wrong, i forgot to remove return;

    Should be:

    if ( has_post_thumbnail() && is_singular( 'post' ) ) {
    

    Get Help – Book Consultation.

    August 21, 2018 at 2:41 am #222652
    Moose2.0
    Member

    Once again, very much appreciate the response. i will have to look into inline styling. Is there then no way of doing this without doing that then? [inline styling]

    August 21, 2018 at 4:28 am #222653
    Brad Dalton
    Participant

    Your code will work, however there's generally more than one way to write the code.


    Get Help – Book Consultation.

    August 25, 2018 at 3:33 am #222716
    hariteja922
    Member

    Under Setting -> Media Settings, you can specify the dimensions of the thumbnail that you want to use in your theme. Also, you can check or uncheck the crop option.
    In your case, you would have to uncheck the crop option, so that WP doesn’t crop the thumbnail-images anymore.

  • Author
    Posts
Viewing 8 posts - 1 through 8 (of 8 total)
  • The forum ‘General Discussion’ is closed to new topics and replies.

CTA

Ready to get started? Create a site or shop for themes.

Create a site with WP EngineShop for Themes

Footer

StudioPress

© 2023 WPEngine, Inc.

Products
  • Create a Site with WP Engine
  • Shop for Themes
  • Theme Features
  • Get Started
  • Showcase
Company
  • Brand Assets
  • Terms of Service
  • Accptable Usse Policy
  • Privacy Policy
  • Refund Policy
  • Contact Us
Community
  • Find Developers
  • Forums
  • Facebook Group
  • #GenesisWP
  • Showcase
Resources
  • StudioPress Blog
  • Help & Documentation
  • FAQs
  • Code Snippets
  • Affiliates
Connect
  • StudioPress Live
  • StudioPress FM
  • Facebook
  • Twitter
  • Dribbble