[Resolved] use element's image instead of background's image

[Sebastien]

Hi,
Instead of using a background’s image, I would like to use an element’s image.
The point is: I want to delete all my background images to be able to SEO index them better.
At the moment, I use my H1 Title in an element’s Header.
I param the section’s image option to display ‘Featured Images’ (that is very very practical).

But, that results my h1 doesn’t have any valuable (indexable) picture (with seo datas)…
By relacing background’s image by element’s image that would solve this issue.
But I don’t know how to adjust CSS style to manage full screen/extended images (to get the same visual aspect than background image) could you help?

I would like it to fit in

the same way as using a background image.

thanks

[Tom]

Hi there,

It should be possible with some CSS. Any chance you can create an Element with the image inside of it and link me to the page?

Let me know 🙂

[Sebastien]

Hey,
thanks for reply.

you can find the link in my main post (first message).
You can see an image in background and the other image in element.
I would like the element displays like the background image is displayed.

2cnd point: in my header element the code is like that:
<img src="https://mypath/image.jpg" alt="" />
But I would like use the Featured image of the active page instead of the one described.

last point: how can I make a condition to display either the featured image for desktop view or a static image for mobile view? some page builders (elementor) has this feature: hide or display a section/widget depending of the type of screen used.
How to do the same in element header into the theme ?I would like add rules for ‘mobile view’ in ‘Displays Rules’ but I don’t find any way. Maybe PHP is it the best way to optimize the weight of the image in mobile ? using php in header element add request delay for loading page? is it acceptable as best practice?

thanks =)

[Tom]

You can include the featured image in your Header Element by using this template tag:

{{custom_field._thumbnail_id}}

Then you need to tell it to use the full image, which you can do with this PHP:

add_filter( 'generate_hero_thumbnail_id_size', function() {
    return 'full';
} );

Adding PHP: https://docs.generatepress.com/article/adding-php/

Then to make it cover the entire area, you can use this CSS:

.inside-page-hero > img {
    position: absolute;
    object-fit: cover;
    width: 100%;
    height: 100%;
    left: 0;
}

Not too sure what you mean about mobile/desktop. Are you wanting to conditionally display a Header Element based on mobile/desktop?

[Sebastien]

thanks Tom,

1) It works perfectly in desktop view, but it merges with the next section’s image in mobile view.
2)About optimization, is there any way to integer in the same header element, a piece of code to avoid FOUC on this image? Something to load the image as soon as possible.
3) Yes that’s what I want : conditionally display a header element based on mobile/desktop

[Tom]

1. I can’t see this, but this should prevent that:

.inside-page-hero {
    overflow: hidden;
}

2. I’m not sure how you would do this, unfortunately. Optimizing the image the best you can is the best advice I can give. If the image has an overlay, you should be able to decrease the quality quite a bit without noticing.

3. You could do something like this:

function tu_is_mobile() {
    return preg_match("/(android|avantgo|blackberry|bolt|boost|cricket|docomo|fone|hiptop|mini|mobi|palm|phone|pie|tablet|up\.browser|up\.link|webos|wos)/i", $_SERVER["HTTP_USER_AGENT"]);
}

add_filter( 'generate_header_element_display', function( $display, $element_id ) {
    if ( 123 === $element_id ) {
        if ( tu_is_mobile() ) {
            $display = false;
        }
    }

    return $display;
}, 10, 2 );

You just need to change 123 to the ID of the element you’re targeting.

[Sebastien]

Thanks for help,

1)it works ! thanks

2) is there anyway to avoid LAZYLOAD for images in Header element? (I use WPRocket)

3) Can you tell me how to find the ID of the Header Element?

[Leo]

2) You’d have to check with WPRocket’s support to see if there is a way to exclude certain images/elements

3) It’s in the URL of the Element:
https://www.screencast.com/t/JylyT7VAMYVm

Let me know 🙂

[Sebastien]

Hi,

I still have an error with my header:

<h1>My title h1</h1>
My texte......
<div><a class="button">My button 1</a></div>
<div><a class="button">My button 2</a></div>

	{{custom_field._thumbnail_id}}

css:

.inside-page-hero > img {
    position: absolute;
    object-fit: cover;
    width: 100%;
    height: 100%;
    left: 0;
}

URL: this is the url in my 1rst post of this topic.

1) I would like my image under the H1 / paragraphers / button: but I would like keep the html schema: div of the image after the div of h1 / paragraphers / button (for SEO optimization) if possible…

2) I would like the texte position in the middle/centered of the image like in the library the site “Artisan” for example.

3) I would like the header auto size depending of the size of the screen, to cover the full screen of the user (this option was possible in Elementor, but I tend to use it less as possible).

Can you help me please?
All was working with Elementor pro, but I tend to disable my dependences to this builder to easly switch to Gunteberg…one day !

thanks a lot for your help.

[Tom]

Hi there,

Your CSS doesn’t seem to match what we’ve suggested above. Instead, you’ve done this:

.inside-page-hero>img {
    object-fit: cover;
    width: 100%;
    height: 100%;
    left: 0;
    overflow: hidden;
    z-index: 0;
}

1. Using the CSS we suggested should do this.

2. This should happen by default as well as long as your top and bottom padding are the same in the Page Hero element.

3. There’s a “full screen” option in the Page Hero settings, however it only works if you’ve set your Header Element to merge with the site header.

[Sebastien]

thanks you for your help.

this is my actual CSS (I’ve just corrected as suggested).

.inside-page-hero > img {
    position: absolute;
    object-fit: cover;
    width: 100%;
    height: 100%;
    left: 0;
}
.inside-page-hero {
    overflow: hidden;
}

May I wrong…or I don’t understand something but I still get some issues..

* case 1: element:

{{custom_field._thumbnail_id}}
<h1></h1>

then, the h1 doesn’t appear at the screen. It seems to be under the image. also, the next content (h2 from the body) are over the image.

* case 2: this is the case I tend, because the image is positionned after the h1:

<h1></h1>
{{custom_field._thumbnail_id}}

then, the h1 is still positionned before the image. The h2 is still over the image.
If you go into my website you will see the case 2.

I’ve merged & use full screen option (thanks for the tips and this feature !)

If I don’t undestand something, I’m very sorry..

[Tom]

No worries at all! CSS can take lots of tweaking 🙂

What if you do this?:

.inside-page-hero > img {
    position: absolute;
    object-fit: cover;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    z-index: -1;
}

.inside-page-hero {
    overflow: hidden;
}

[Sebastien]

It works very well Tom, thanks you so much.

Because I’ve merged header as suggested, I need to define this param: Offset Site Header Height.
Could you explain to me how to find this data? Is there any tool or method to scale the size of items displayed on the screen? (that would be usefull for many tasks so far!)
thanks

[David]

Hi there,

you can measure the height of the elements using the browser inspector – Tom demonstrates how in the overview video at around 5mins 20seconds:

https://docs.generatepress.com/article/header-element-overview/

[Sebastien]

Hey,
I’ve just noticed that the Sticky header seems to not be displayed anymore.
It seems to be hidden by the image that cover the background.

if you can help?
thanks so much

[Author]

Posts