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

[Kir29 LLC]

Hi,

I’m using Page Hero that uses the Featured Image in all my posts but, in some cases I’m replacing my Featured Image with a SmartSlider3 by having the following shortcode to my Header Element:

[smartslider3 alias=”slider-name”]

Inside my Page Hero settings, I have my setting ‘Disable Featured Image’ active.

The behavior is as follows:
– When the slider ‘slider-name’ exists, all works perfectly and my blog post loads perfectly with the slider (and hiding my Featured Image).
– When the slider ‘slider-name’ doesn’t exists (due to an error), my blog post is loaded without the slider and without the featured image.

Is there anyway to have the Featured Image conditionally disable so I could still see my Featured Imaged even though when the Slider fails to load?

I’m just after a way to have either the Slider or the Featured Image (when the first one fails to load).

Thanks for the help.

Enrique G.

[David]

Hi there,

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

<!-- page hero -->

[Kir29 LLC]

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

[David]

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

[Kir29 LLC]

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

[David]

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;
    }
}

[Kir29 LLC]

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

[David]

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.

[Kir29 LLC]

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

[David]

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.

[Kir29 LLC]

Thank you.

[Author]

Posts