[Resolved] Inline page hero CSS

Home Forums Support Inline page hero CSS

Viewing 15 posts - 1 through 15 (of 15 total)
  • Author
  • #1375521

    When adding a page hero via the ‘Elements’ option in WordPress’ dashboard, changes to the options such as selecting a custom background generates additional CSS selectors in ‘generate-style-inline-css’ e.g.

    .page-hero{background-color:#161616;background-image:url(https://domain.com/wp-content/uploads/2020/07/background.jpg);background-size:cover;background-position:center bottom;background-repeat:no-repeat;color:#ffffff;padding-top:10%;padding-right:40px;padding-bottom:10%;padding-left:40px;text-align:center;box-sizing:border-box;}

    In a previous post https://generatepress.com/forums/topic/want-to-add-a-data-src-tag-to-hero-div, there is the option to use the generate_page_hero_output filter to introduce custom changes to div tags for example.

    Is there the option to inline the CSS selectors such that it is part of the div element or image element such as below rather than output it to ‘generate-style-inline-css’?

    <div data-src="background.jpg" style="{background-color:#161616;background-image:url(https://domain.com/wp-content/images/placeholder.gif);background-size:cover;background-position:center bottom;background-repeat:no-repeat;color:#ffffff;padding-top:10%;padding-right:40px;padding-bottom:10%;padding-left:40px;text-align:center;box-sizing:border-box;"> Content </div>

    Note the inclusion of data-src as the primary source of the image.

    Lead Developer
    Lead Developer

    Hi there,

    As of right now this kind of thing isn’t possible, unfortunately.

    Is there a particular reason you’re wanting to inline it?


    The background to inline the style is so that the background image can be lazy loaded with a fallback or low quality image.

    Is there an alternative to calling the page hero/header e.g. add_theme_support(‘custom-header’)?

    Otherwise, is there an option to display the image via the image element rather than CSS?

    Lead Developer
    Lead Developer

    You could add the image inside the Element itself with this template tag: {{custom_field.thumbnail_id}}

    If you wrap it in a div you could give it some CSS to fill the area in the background of the content.

    Let me know if you need more info 🙂


    Thanks Tom.

    Based on an earlier post, it appears that there is the option to use ‘get_the_post_thumbnail( get_queried_object_id(), ‘little’ )’ which outputs the image URL for the featured image for a given page.

    If a featured image is removed (as there is no requirement for it), the function ‘get_the_post_thumbnail( get_queried_object_id(), ‘little’ )’ doesn’t return the image URL (which is the desired output).

    Is there an option to use ‘get_the_post_thumbnail( get_queried_object_id(), ‘little’ )’, when a featured image is removed (so there is a reference to it) and display it as the background?

    Lead Developer
    Lead Developer

    I’m not sure if I understand the last part of your question there – can you explain a bit more possibly?



    The function ‘get_the_post_thumbnail( get_queried_object_id(), ‘little’ ) only returns a value if a featured image is selected for a page for example. If the featured image is subsequently removed, the function returns no value.

    Rather than display a featured image, is there an option to use only reference the image for a given page so that the function ‘get_the_post_thumbnail( get_queried_object_id(), ‘little’ ) returns a value?

    Alternatively, is there another method?

    Lead Developer
    Lead Developer

    So are you wanting a way to check whether an image exists without actually displaying the image itself?


    Yes and no. So stepping back;

    1. No changes to the page hero element i.e as-is out of the box
    2. A featured image is uploaded to the home page.
    3. By default, the featured image is displayed before/above the page content.

    Instead, it would be as follows;

    1. No change
    2. No change
    3. The featured image is not displayed before/above the page content.
    4. The featured image appears as the background for the page hero.

    Customer Support

    Hi there,

    i am having trouble understanding what the desired result is ?
    Is there more then one scenario here? ie. with featured image and without.

    If you could provide a mockup of them it would be real useful


    Hi David, Tom,

    Using an example such as the “Peak” site library, the first wireframe includes a “Page Hero” element (which if required can be either a color, image or both).

    The second wireframe includes a “Featured image” for a given page e.g. “Home”

    Outcome/desired result
    1) There is no change to the “Page Hero” element. It would feature a colored background as it does with the “Peak” site library and a text overlay.

    2) A featured image is uploaded for the home page. It is however “hidden” from view i.e. it does not appear as it does in the second wirefame and instead displays as the background in the “Page Hero” element.

    Does that help?

    Customer Support

    That pretty much is the default behaviour of the Header Element.

    1. Set Background Image to Featured Image.
    2. Uncheck the Display Featured Image option – this will remove it from the Content.
    3. Set the background color to whatever color you need in the absence of an image


    Great David. Circling back to the question at the start of the post, is there an option to inline it to the div tag?

    Customer Support

    Tom says it isn’t possible and he’s the man 🙂


    Thanks David. Sorry for not replying sooner.

    It appears that there is a solution. It supports lazy loading background images which is an upside.

    Now the catch and downside.

    Depending on the method in which images are lazy loaded, Google lists it as an opportunity and interestingly enough it affects the performance metric (although Google suggests it doesn’t).

    If an image is lazy loaded with style="background-image: url(""), the performance seems to take a minor hit. Now if performance is something you live for, the alternative is to lazy load with a data attribute e.g. data-bg or data-bgset.

    The end product looks like;

    $output = '<div class="'. trim( $options['container_classes'] ) .' lazyload" data-bgset="'. $img_srcset . '" data-sizes="auto"><div class="'. trim( $options['inner_container_classes'] ) .'">' . $options['content'] . '</div></div>';

    Hopefully this goes some way for anyone who’s on the lookout for something similar.

Viewing 15 posts - 1 through 15 (of 15 total)
  • You must be logged in to reply to this topic.