How to display Featured Image in the background when Using a Header Element

Hi there,

what happens if you add a HTML Comment before the shortcode in the Page Hero e.g

<!-- page hero -->

Hi David,

I actually had the following content already included in my Header Element_

<!-- Featured Slider for Posts -->
<!-- See Internal Notes for INSTRUCTIONS -->
[slider-post_slug]

So to your question the behavior I described was already having a comment in my Page Hero.

Any other ideas?

Thanks

Can you share a link to the page that has an empty slider where the background is not displaying

Hi Tom.

This is the test page I've created for you:

http://discooveler.com/the-authentic-madrid-tapas-tour-gp

The slider 'slider-the-authentic-madrid-tapas-tour-gp' doesn't exist so you'll see that, not only there is no slider, but also the Featured Imaged doesn't show.

Any ideas?

Thanks

OK, so as there is no padding ( understandably ) and no content the hero is collapsing to zero pixels. So try this, adjust the heights according:

.page-hero {
    min-height: 500px;
}
@media (max-width: 768px) {
    .page-hero {
        min-height: 300px;
    }
}

Hi David,

I added your code to my Header Element:

.page-hero {
min-height: 500px;
}
@media (max-width: 768px) {
.page-hero {
min-height: 300px;
}
}

It seems to work and I can see my Featured Image when the slider fails to load.

The problems I found now though, is when the slider is loaded but is loaded after the Featured Imaged which creates bad visual effect between the menu bar and the slide (check the test URL again and you'll see what I mean).

Can you think of a way to have the Featured Imaged conditionally loaded only when there slider fails to load?

Thanks again

That code is CSS and needs to be added to the Customizer > Additional CSS or into your childtheme style sheet not in the Header Element.

However we may need a different approach. So remove the CSS and in you Header Element add a new DIV so your code looks like this:

<!–- Featured Slider for Posts -–>
<!–- See Internal Notes for INSTRUCTIONS -–>
[slider-post_slug]
<div class="dynamic-spacer"></div>

Then add this CSS:

:not(.n2-section-smartslider) + .dynamic-spacer {
    min-height: 500px;
}
@media (max-width: 768px) {
    :not(.n2-section-smartslider) + .dynamic-spacer {
        min-height: 500px;
    }
}

Haven't tested but in theory it should only apply height to the space if the smartslider container isn't there.

Hi David,

There is another slider at the end of the screen (for reviews). I just looked at the page source code trying to understand your n2-section-smartslider code and thought about the second slider

Do you still think the code using n2-section-smartslider would work?

Thanks

If it works then the slider below it won't effect it, the code should only apply if there is NOT a slider above it.

Thank you.