Okay
  Public Ticket #2180182
Cut off images on mobile
Closed

Comments

  •  2
    Carola Ploechinger started the conversation

    Hi again,

    I already have two tickets that deal with these issues from different angles. 

    I had the problem that with a slow connection on mobiles images in the lightbox gallery were cut off/cut in half. "Disabling responsive images complete" plugin was suggested by Art and resolved the problem here. (PRIVATE TICKET #2141546)

    In the other ticket trying to solve speed issues, Arlind recommended to not use the plugin because full-size images were loading on mobile. Disabling the disable responsive plugin brought speed, but brought me back to Step 1. (PRIVATE TICKET #2152638). I am now using the plugin again but the gallery load slow in mobile with a mobile connection...

    So, strangely if I understood correct now I'm loading full-size images on mobile but have no cut-off pictures. Is there another way to solve this dilemma?

    Sorry to bring it all up again, but I'm online now and need to find a solution...

    And I tried already to NOT use autoptimize lazy load and the disable the plugin "Disable Responsive Images Complete", but it didn't work, images were still cut off,

    (If I make this ticket public will it be found by search engines? I wouldn't want that, if thats on disallow, you can make it public.)

    Kind regards,

    Carola

  •  498
    Arlind replied

    Hi Carola,

    After activating Disable Responsive Images Complete your site is using only images that are set in theme options, for example

    medium
    (view large image)

    medium
    (view large image)

    The width is set to 655 (because height is automatically determined when using Masonry Portfolio layout type). 

    The lightbox items open in their real size by default, if you want to change that and show a smaller image (the same as shown on 

    add_filter( 'kalium_lightbox_image_size_large', function() {
        return 'portfolio-img-3';
    } );
    
    Is this something that works for you?

    Kind regards,
    Arlind


      Documentation        Follow on Envato         Like on Facebook

  •  2
    Carola Ploechinger replied

    Hi Arlind,

    I'm confused now, I have to say:

    In the other ticket about speed you wrote:

    "So I guess this would be better for you if you let the adaptive images be active on your site because the browser will decide which image to show to the user without causing site speed issues. However if you want to force given image sizes to be applied then you can keep "Disable Responsive Images Complete" plugin active."

    What I would like to achieve:

    - a fast loading page with the masonry gallery with the adaptive images sizes exactly like in the theme (so the 655 is fine for me as well as the full size in the lightbox), but without them being cut off in a weird way (thats where Art recommended "Disable Responsive Images plugin"). But when the plugin is off, I get these cut-off images. But maybe I really have to think off upgrading the provider contract for other PHP times.

    I have the plugin active now, the images don't get cut off, but I'm still very worried about load speed on mobile. But I have to say more about the main page and the revolution slider on mobile than the gallery now. With caching the gallery load speed  is kind of okay. After the transfer I had to change a few things as they didn't work anymore (fe when I use CDN for static files the site is shown like a sitemap) and now it's really hard to test and find the bugs with the site already live... If you have an idea for that, I would appreciate, but I understand if not, because Revslider isn't your subject.

    Kind regards,

    Carola

  •  498
    Arlind replied

    Hi Carola,

    This issue has been reported previously but I am unable to reproduce this bug, whenever I check the theme in my device it displays images properly, can you tell me in which device and screen size your are opening the site so I can see if I can reproduce the issue and  find the proper fix.

    As per Revolution Slider you can ask this question to their forum because I am not familiar with that plugin, my team sets up the sliders for demos but we only use it. If you have any question I can ask them in their forum for you, because we have the purchase badge.

    Kind regards,
    Arlind


      Documentation        Follow on Envato         Like on Facebook

  •  2
    Carola Ploechinger replied

    Hi Arlind,

    yes, I know, I thought it was already solved too, but that was before the transfer and now it happened again, but only when I have a 3G-connection. It happened with iPhone 8plus (12.4.1)  in Safari. So I thought of two things: maybe the images still load full size on mobile? How I can check that? Or could it have to do with the fact that I activated lazy load for images that aren't above the fold in Autoptimize? I also had to change a few settings in Autoptimize as after the transfer I suddenly had different behaviors ("Also aggregate inline JS?" is switched off now, as it caused a fast growing cache, and for some reason the connection to my cloud flare CDN caused the site to not show as well, so I'm not using it at the moment) So probably something went wrong with the transfer, but I cannot find out where and what :(

    For Revolution Slider: it would be perfect if you could ask if there is a possibility to load the slider images asynchronically. In RevSlider there is only the option to not show the slider on mobile completely and js/jquery/jquery.jsis excluded from Autoptimize. There would be an option to "Async Javascript-files", but I'm not sure how to use it.

    Or do you think it would make sense to use a more lightweight slider? I mean, it's rather simple. Any idea?

    Do you need new credentials?

    Thanks a lot.

    Kind regards,
    Carola

    PS.: just spoke with my Provider and they say the cut-off images are very likely a PHP max execution problem, he thinks it has to do with lazysizes or WebP. I will probably try out things tonight...

    Attached files:  IMG_1162.PNG

  •  2
    Carola Ploechinger replied

    Hi Arlind, 

    I think I might have just found the solution for the cut-off images. I fixed a problem with the connection to the Cloudflare CDN for the CSS/JS files and that obviously fixed it. If you could still help me find a solution for the slider, I'm super happy:) GtMetrix scores are between 92 and 95% and Load times are fine for such an image-heavy site...

    Have a great day!

    Carola

  •  498
    Arlind replied

    Hi Carola,

    I am glad that you have managed to solve the first issue!

    Also, I have just submitted your question in their forum:

    https://codecanyon.net/comments/23007359

    We can wait for a reply and you can check in the link above for new replies, I hope they can help you and also us in the future for similar questions.

    Have a great weekend

    Kind regards,
    Arlind


      Documentation        Follow on Envato         Like on Facebook

  •  2
    Carola Ploechinger replied

    Hi Arlind,

    thank you very much for posting this in their forum, I'm curious if there is a solution for this. Although they might not understand the reference with "Async Javascript-files", because this is an Autoptimize feature.

    And the question for a more lightweight slider was originally for you, like: is there another slider instead of Revslider that works with Kalium but has less features?

    But never mind, I know I was super-time-consuming for you this time, thank you again for all of it. But luckily, if I should have another client that needs a portfolio like in Kalium, I will have all my answers ready already for next time:-)

    Have a great weekend too!

    Kind regards,
    Carola

    PS.: I came across a site of a developer yesterday made with Kalium:) He didn't change much and it was easily recognizable. 

  •  498
    Arlind replied

    Hi Carola,

    You can use Layer Slider plugin if you want, I think that it is more lightweight than Slider Revolution.

    I wish you have an amazing weekend!

    Will set this ticket as closed from here.

    Kind regards,
    Arlind


      Documentation        Follow on Envato         Like on Facebook