Viewing 11 posts - 1 through 11 (of 11 total)
  • Author
    Posts
  • July 5, 2018 at 5:43 pm #981676
    richmanneumann

    Hi there,

    I am using enfold, and my requirements for the intro block/banner at the top of my home page are:
    – either an image or a video (I would accept either) that I can layer a title and two buttons on top of
    – responsive behavior that scales the image or video to display in full on both a desktop and mobile screen.

    Things I have tried:
    1) Color section with a background youtube video. I can put titles and buttons on top, but it is not responsive down to mobile size. The video will chop on the right side below a certain width.

    2) Color section with a background image. Also clips on the right side in mobile.

    3) Advanced layer slider with a background image and text and buttons as layers. This actually works and is fully responsive most of the time, but sometimes the background image does not load, leaving me with a big blob of white. Here are links to screen captures of those two states:
    http://www.modumate.com/wp-content/uploads/2018/07/homepage-with-image-loaded.png
    http://www.modumate.com/wp-content/uploads/2018/07/homepage-no-image-loaded.png
    I would love for this to be my permanent solution, but I can’t leave it live when I get feedback daily that the image intermittently doesn’t load. I see it randomly myself, but can’t identify what conditions cause the non-loading image problem.

    I don’t know of any other content object that will allow me to place text and buttons on top of an image? Are there others I can try?

    I would be happy with a solution to any of the three approaches above:
    – a way to make a color section video or image background responsive all the way down to mobile.
    – a way to assure that advanced layer slider loads its background image
    – any other suggestion that accomplishes my goal of a responsive header with text and buttons on top.

    Any advice appreciated. Thank you.

    July 7, 2018 at 11:42 am #982409
    Victoria

    Hey richmanneumann,

    Can you give us temporary admin access to your website in the private content box below, so that we can have a closer look?

    Can you make the test page with the Layer Slider so that we can check the issue?

    Best regards,
    Victoria

    July 7, 2018 at 8:35 pm #982568
    Guenni007

    why don’t you try the other sliders ( they have buttons options and headings options – and they are on default responsive)
    fullwidth-slider and fullscreenslider – i think the first fits for you
    see here: https://webers-testseite.de/video-tut/

    • This reply was modified 6 years, 5 months ago by Guenni007.
    July 8, 2018 at 5:51 pm #982745
    richmanneumann

    Supplied below.

    July 10, 2018 at 10:00 am #983553
    Guenni007

    ok – you can see here on my webdesign page https://webers-webdesign.de
    that even a video ( this is a selfhosted video) works well on adv. layerslider – even on small screens (by the way on modern mobile advices too). So there must be some inconsistancies on your setting. Did you try a different image? Is it a reproduceable effect? Did you recognize that it is on a specific screen width range (f.e. between 768 and 990px )

    Edit: on slider settings / misc – there is an option : “Use srcset attribut” – which on default is enabled i guess.
    sometimes not all images are present in the set. (some cleaning plugins looking for not used images maybe have erased those resolutions) – maybe that causes the fault on your page. Try to disable it – empty all caches and caching tools ( even the browser cache) – if that was the error – you can regenereate the all thumbnails for this image to have a complete srcset – and reactivate this option again

    Edit2: for what is the colorsection before the slider with that 1px hr in it?

    July 10, 2018 at 8:26 pm #983806
    Basilis

    Hi,

    Let us know if @Guenni007 kindy reply is enough or need more help and assistance.

    Best regards,
    Basilis

    July 10, 2018 at 9:10 pm #983827
    richmanneumann

    Hi Guenni007.

    Main comment: I am very happy with layerslider and the way it behaves, my only problem is that it intermittently does not load the background image. I don’t know why, and I can’t reliably reproduce it. I have checked with my hosting provider, and there are no known issues with serving the site, loading or other issues. It is a mystery, but it has been happening on and off for 2 months and is not going away. I believe it is working 90% of the time or more, but not 100%. In terms of the form factor where I see the page with no image displayed, it is always full desktop with full width header. I don’t know if the problem is unique to that configuration, simply because I rarely check in mobile, only as a final test.

    your Edit1: I followed these steps and changed the setting you recommended. Since the problem is intermittent, I am not sure how to measure the effect, except over time. Thank you for the suggestion.

    your Edit2: I added the color section to preserve the space for the menus. When I remove it, the image goes behind the menu, which is not what I wanted. Maybe there is a better way to achieve the same thing?

    Basilis, I am holding off on a press announcement until I have a reliably working home page on desktop and mobile, so any help is appreciated. I am not sure how to declare an intermittent problem solved, at least well enough to put into production?

    July 11, 2018 at 8:51 am #984076
    Guenni007

    by the way another question : why do you nearly always use png files – even if there was no transparency in use (except analytics – but it has here a white background – so a jpg could do the job too) ?
    f.e. your water-cabana.png has a size of 1.6MB – the same jpg file with no quality loss : 143kb ( for transfer volumen – both have the same 2.56MB when they are opend)

    same with the other images. The five images on your landing page got on total with png : 4,5MB. with jpg : 500kb
    don’t know if this is the reason for that behavior – I don’t believe it – but for performance reasons you should always prefer jpg – if you don’t need the transparent option.

    July 11, 2018 at 4:59 pm #984291
    richmanneumann

    Excellent question and suggestion! I didn’t realize the difference in size was so significant.

    I will go through all my pages and make any PNGs into JPGs, and also create resized versions rather than have the browser do any resizing. Excellent suggestion, thank you. Hopefully it is at the root of my failure to load problem. I will keep a keen eye out for that to be (hopefully) gone.

    July 11, 2018 at 5:39 pm #984309
    richmanneumann

    I replaced all the images on my home and product pages (two highest volume pages), and I can see that the page loads noticeably faster. I will assume the image load problem is resolved until such time as I see it again.

    I will also go through the rest of the site at a lower priority and replace any other PNGs-that-dont-need-to-be PNGs.

    Thank you!

    July 12, 2018 at 6:00 am #984498
    Ismael

    Hi,

    Awesome! Glad it is fixed. This short article might help you optimize your site even more.

    // https://kriesi.at/archives/scoring-100-100-in-google-pagespeed-insights-gtmetrix-pagespeed-and-yslow

    Please feel free to open a new thread if you need anything else. :)

    Best regards,
    Ismael

  • Author
    Posts
Viewing 11 posts - 1 through 11 (of 11 total)
  • The topic ‘Unable to get responsive images or videos working with layers’ is closed to new replies.