PRO and responsive hero images

[haraldjoergens]

Another question if I may, about a responsive header image in PRO:

I would like to use one special image, with an aspect ratio of 2.5:1, as a full width header, and then use a text overlay with the site name.

1. Because of the nature of the image, it’s important to keep the aspect ratio constant on any screen width. I’m having a bit of a problem doing that, re-sizing the window changes it in ways that look, well, not good. In the DIMENSIONS, I’m using a Content Length of 100, and have been experimenting with calculated and fixed heights, none of them did really work. What would be the right way to keep that aspect ratio constant?

2. Would you use one image for all sizes, or different versions of the same image for the different window sizes?

Thanks again for your help, really appreciate it!

Harald

[rad]

Hi Harald,

Thanks for reaching out.

Let me answer the second question first, I would use same image that maintain aspect ratio if it’s just really the same looking image across devices.

For that, you can implement it as slider, it should automatically resize on its aspect ratio, then you can add layers too for the text, and the text will scale depending and positioned depending on slider’s aspect ratio.

If you’re going to do that on header alone then it may require customization that already existing on the slider and that’s something we can’t cover as it’s not a simple implementation due to text position while locking to aspect ratio. Header structure are only applicable for simple implementation, like simple header background with text element in it, but other features like aspect ratio and responsive positioning, it’s not applicable there.

Thanks!

[haraldjoergens]

Hi Rad,

Thanks for the quick response. Do I understand you correctly that I should use a third party plugin, like Layer Slider, because keeping a constant aspect ratio is not possible in PRO?

Thanks

Harald

[rad]

Hi Harald,

Please use Revolution slider, it’s a bundled plugin. Please check it here https://theme.co/apex/forum/t/extension-revolution-slider/71

And it’s not possible with the header due to flex styling, I’m not referring to the entire Pro. And maintaining aspect ratio would require CSS if done through content and background. But in the header, that CSS is not working due to flex layout.

Thanks!

[haraldjoergens]

Hi Rad,

Thanks! Following the link you sent, I see that I can use Classic Revolution Slider as a page element, and that’s great!

But how can I use Revolution Slider as a hero image within the PRO Header Editor? Is there an interactive way, or would be be via a shortcode?

Thanks

Harald

[jade]

Hi Harald,

You will have to add it using the shortcode. You may add a content area element and place the shortcode in it.

Hope this helps.