[Resolved] Page Hero Load

[Dan]

Hello. Is there a way to load the Page Hero before the rest of the content on a page? I have a large image gallery and the Page Hero will not load until all of the thumbnails from my NextGen Gallery load. One thing I should mention is that my Page Hero is a slider from Smart Slider 3. I can change that to a static Page Hero image if that helps, but the slider helps with responsiveness better.

GP Premium 1.7.2

[Leo]

Hi there,

There isn’t a way to specify the loading sequence of each element unfortunately.

Slider is usually quite large too so it will likely take longer than a static image.

I think the best thing you can do is to make sure all your images are optimized.

Let me know if you need more info 🙂

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Dan]

Sounds good. Thanks.

Is there an easy way to have just an image at original height and full width and scale full image for the hero page header? Right now, when I set a custom image with no text, and then give it padding to display the entire height of the image (250px Top, 250px bottom, for a 500px image), the image disappears outside the left and right of the window when the screen gets smaller. This is why I have it set up as a slider, because the slider sizes the image down without cutting any of it off.

[Tom]

If the slider resources load in the footer, it makes sense that it would load last.

Any chance you can set up the background image and then link us to your site? There should be a solution 🙂

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/
Ongoing Development: https://generatepress.com/ongoing-development

[Dan]

Sure thing. I think I understand you correctly and am going to do one better for you… I think. Below are links to 2 different gallery pages. One with the Hero Header as a slider and one with the Hero Header as an image. I would love to stick with just the image as it seems to load first, but it doesn’t have any responsiveness to it. I like the way the slider works because it sizes the hero image to the size of the screen. Let me know what you think is the best move.

Link to the page with slider as Hero here.

Link to the page with image as Hero here.

Thanks for your help!

[Dan]

Okay, so hold the phone a minute. I think I got the Page Hero to work as just an image instead of using a slider. I used % instead of px when adding padding and now it sizes with the window. That should do the trick, right? Or let me know if it still doesn’t load first. I tried it in an incognito window and it seemed to show up after the thumbnails again.

Also, thought it was a little weird having to use 26% for bottom padding to get the page hero image to fit correctly. Does that sound right to you?

[Tom]

Using percentages is a great way to keep the area responsive as you size down.

The actual percentages you use depend on the size and aspect ratio of the background image.

Looks great! 🙂

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/
Ongoing Development: https://generatepress.com/ongoing-development

[Dan]

Thanks! Only thing I’m worried about is the load time of the gallery on slower internet speeds. Like on my phone, even on wifi, it takes forever to get to the page itself. Tried adding the Lazy Loader plugin, but I’m not sure if it is even doing anything to the gallery images. Did it load okay for you?

[Tom]

It loaded pretty fast for me.

The best thing you can do is make sure those images are optimized and small (the thumbnails).

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/
Ongoing Development: https://generatepress.com/ongoing-development

[Dan]

Yeah, figured that. Only problem is that NextGen Gallery has control of the thumbnail file sizes. I suppose I could always go onto the server, download the thumbnails and re-save them at a smaller size. Not sure I would want to do that though every time I add more images to the galleries.

Thanks for all your help.

[Tom]

No problem 🙂

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/
Ongoing Development: https://generatepress.com/ongoing-development

[Author]

Posts