[Resolved] Page hero block and WP Rocket

[Bernhard]

Hello,
on my pages, I substituted the header element with the page hero block element. I defined two elements, one for desktop with a full size dynamic background featured image and one for tablet/mobile with a medium size dynamic background featured image, using wp_is_mobile with these filters. This works so far, as examples you can see the tests,
for mobile, the medium size image is item 28
https://www.webpagetest.org/result/211118_BiDcZB_50cbb76dfc7521b75a78e7be4519434a/1/details/#waterfall_view_step1
for desktop, the full size image is item 30
https://www.webpagetest.org/result/211118_AiDcGH_947df02e2fc5b54639369e3e4c685aee/1/details/#waterfall_view_step1

The problem is, to make it work, I had to disable “Optimize CSS delivery” in WP Rocket and now I have render blocking CSS. Before I introduced the page hero block, the “Optimize CSS delivery” worked fine with “remove unused CSS (beta)”. It worked also with “load CSS asynchronously”,but in this case I had to regenerate the CSS at every major change. The problem depends not from Cloudflare or Ezoic, it happens also, when I connect directly to the server.

Now, with “Optimize CSS delivery”, the header blocks appear random on mobile or desktop. On some desktop pages appear the mobile blocks and viceversa, on some pages it is correct. Furthermore, the navigation with the hamburger menu most of the time does no more work. (I had a similar experience before with the CSS optimization done by Ezoic. In this case it happened with block elements in the content and therefore I activated the optimization in WP Rocket where everything was fine. Furthermore, in Ezoic I had problems with the navigation all the time).

My question is, how to solve this. Maybe there is some critical CSS or some files I shall exclude in Ezoic or in WP Rocket? Or is there another way to avoid render blocking CSS?

[David]

Hi there,

the use of wp_is_mobile() should have come with a disclaimer. There are lots of factors that can cause it to ‘fail’. A primary one is Page Caching – unless the server strictly supports separate page caches for mobile and desktop then there is big risk the incorrect one will be displayed.

Add CDNs and other server side optimizations to the set up and more problems will arise.

I would suggest disabling the two heros for now – so your other optimizations work and then we can relook at the original issue.

[Bernhard]

Hi David,
ok, but wp_is_mobile() worked in my environment without problems with header elements and with custom hook block elements. So it’s strange that it does not work with the page hero block element. Is it possible to find out, why this happens?

Now I made one page header block for all devices. But also now the navigation menu works sometimes yes or no on some pages/posts. When I used the header element, I did not observe these problems. Shall I go back to the header element?

But there is also another reason, to have two different blocks. Because for mobile the best size would be “contain”, for desktop the best is to leave it empty and a setting for tablet I have not found at all.

Here some samples with the unique page header block:
Here I found a browser width (It is the only one), where you see more or less the full image

View post on imgur.com

If the browser is higher, it extends the image and cuts it on the sides and in the bottom. In the sample, you see still the heads of the Swiss Guards

View post on imgur.com

I the browser is wider, there is a very strange cut of the image

View post on imgur.com

The same with different mobile and tablet setups

View post on imgur.com

View post on imgur.com

View post on imgur.com

Is there a way to fix it?

[David]

If you want to control the image from being ‘clipped’ differently on different screen sizes then try the following:

1. Calculate the aspect ratio of your original image ie. Height / Width * 100.
In your example URL that is 585 / 1140 * 100 = 51%

2. Edit the Block Element, select the parent Container Block and set its Minimum Height to 51 vw – note the change from px to vw units

I would also recommend you use the GenerateBLocks responsive controls to adjust the size of the Headline for Mobile views.

[Bernhard]

Thank you for your valuable advice, David 🙂

The good news are, that it seems I was able to make work wp_is_mobile() somehow. I changed the settings in WP Rocket to asynchronous CSS loading and changed a setting in Cloudflare. Hopefully this setup will continue to work.

I tried 51 vw but the image becomes huge and it is completely visible only at full browser width. Otherwise, instead of being resized, the edges are trimmed. Here are two samples on my test site
https://test.tourist-in-rom.com/de/vatikan/
https://test.tourist-in-rom.com/de/kolosseum/

As far as the image problem shall be solved on mobile, when wp_is_mobile() will continue to function, I would only need something to block the scaling up of the dynamic featured background image on desktop. Actually the image has the same width 1140px as the container and it is puzzling to me why this happens.

[Bernhard]

Hello,
I’m still struggling with the background images. The images have the same width as the container 1140px and the aspect ratio is the same on the whole site because of WPSP.
I’d like the bottom of the images to be shown in the first view and the total height of the clipping 350px max.

This is the original image

View post on imgur.com

and this is the current status on the site.

View post on imgur.com

So far I have managed to make the Swiss Guards more visible, but they still have no legs. It would be necessary to show the bottom of the image. Is there a chance to solve this?

[Elvin]

Hi Bernhard,

It will be quite tricky to keep the image fully displayed if it’s being displayed as a background since the container itself isn’t bound by the image size.

David’s suggestion may work on specific viewports but it’s difficult to know which setting is best for all viewports because the hero section’s aspect ratio will change because of fixed padding and variable viewport width.

You may want to consider a different approach to placing this.

If I may suggest, if the priority was to keep the image fully displayed, you may want to consider using the Dynamic Image block instead of displaying it as a background.

You then position: absolute; the text to make it overlay on the image. 🙂

[Bernhard]

Hi Elvin,
the suggestion of David was very helpful for me to understand better the problem and it shows the full width of the images including the bottom with usual desktop browser width.

But my problem is a bit different. And I need now a solution only for desktop as I use another block element for mobile: I don’t want to display the full image but only the bottom. I use WPSP and the cards images must have all the same aspect ratio. Therefore the post featured images have 572×345 and the page featured images have 1140×585 (if I would make them 1140×345, they would look strange in WPSP), but on the pages I want basically show 345px bottom up and then some more pixels scrolling down. The idea is to have a kind of parallax and scrolling down the upper part of the image appears while the container window moves up. With all the settings I have tried, the bottom part of the image is cut off or the full height is displayed.

I was also thinking about a shape with a negative margin, but I don’t see how to select a rectangle.

I think, with the dynamic image I have no parallax and probably no way to cut the upper part of the image?

[Elvin]

I don’t want to display the full image but only the bottom.

If this is the case then you can set the background-image’s size to cover, set the position to center bottom and then set the attachment to local or scroll. This should display the image from its bottom side.

[Bernhard]

Hi Elvin,
now the bottom is displayed. Is it possible to set a parallax effect?
https://test.tourist-in-rom.com/en/vatican/
Thank you 🙂

[Elvin]

now the bottom is displayed. Is it possible to set a parallax effect?

I don’t think you can’t have both if you want the image’s bottom side be displayed on page load because there’s no more image to scroll on as the image’s bottom is already shown.

If the image has to be parallax, you’ll have to settle with it’s attachment being set to fixed and not having it display true center bottom for the image to have lee-way to parallax down/up. 🙂

[Bernhard]

Hi Elvin,
this is correct for a real parallax where the foreground is moving faster than the background. If this would be possible it would be my preferred solution and in this case it’s clear that the parallax can’t start at the bottom.

But actually this option is not available in the GB blocks and with the fixed image it’s a kind of simulated parallax where only the foreground is moving and in this case (if it is not possible to define a real parallax), how can I display the bottom?

[Elvin]

The issue was having it start w/ the bottom of the image with “fixed”. That’s simply the nature of this CSS properly.

But it’s possible to make the bg parallax-ed.

As for the parallax script, Tom shared one here – https://community.generateblocks.com/t/adding-a-parallax-effect/224

[Bernhard]

Hello Elvin,
basically it was about displaying the lower part of the images and that is solved with these settings. The parallax would be a nice to have, but with the code indicated above the content disappears behind the image while the image and title scroll at the same speed. I tried different settings:
https://test.tourist-in-rom.com/de/vatikan/
https://test.tourist-in-rom.com/de/kolosseum/
Did I make something wrong? I searched in the GB community but did not find another solution. I think, as parallax effect the background image shall move up faster than the title (starting from top or center) and the content shall not disappear behind the image.

[Elvin]

Try this setup:
https://share.getcloudapp.com/9ZuR6pXK

You then add this CSS instead:

.parallax-wrapper {
	position: relative;
	overflow-y: hidden;
}

.parallax {
    position: absolute;
    z-index: -1;
    bottom: 0;
    left: 0;
    margin: 0 !important;
    width: 100%;
}

.parallax img {
    width: 100%;
    height: auto;
}

You can adjust the speed of the parallax by changing this value on the script – https://share.getcloudapp.com/jkuEjkDE

Check this demo site to see it in action – https://dev-generate-press.pantheonsite.io/

[Author]

Posts