[Resolved] Page hero block and WP Rocket

Home Forums Support [Resolved] Page hero block and WP Rocket

Home Forums Support Page hero block and WP Rocket

Viewing 15 posts - 1 through 15 (of 17 total)
  • Author
    Posts
  • #2008928
    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?

    #2009014
    David
    Staff
    Customer Support

    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.

    #2009671
    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?

    #2010782
    David
    Staff
    Customer Support

    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.

    #2011189
    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.

    #2013764
    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?

    #2013913
    Elvin
    Staff
    Customer Support

    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. πŸ™‚

    A wise man once said:
    "Have you cleared your cache?"

    #2015247
    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?

    #2016490
    Elvin
    Staff
    Customer Support

    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.

    A wise man once said:
    "Have you cleared your cache?"

    #2018448
    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 πŸ™‚

    #2018751
    Elvin
    Staff
    Customer Support

    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. πŸ™‚

    A wise man once said:
    "Have you cleared your cache?"

    #2019227
    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?

    #2020611
    Elvin
    Staff
    Customer Support

    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

    A wise man once said:
    "Have you cleared your cache?"

    #2024405
    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.

    #2028370
    Elvin
    Staff
    Customer Support

    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/

    A wise man once said:
    "Have you cleared your cache?"

Viewing 15 posts - 1 through 15 (of 17 total)
  • You must be logged in to reply to this topic.