Smush CDN breaking homepage

Smush CDN enabled is causing anomalies with how the images are loading, it resizes the image as shown in the screenshot, in homepage:

Also, for the images listed in the section "MY RECENT WORK" in homepage also causes the same issue. Hummingbird Performance Report still points out images require resizing.

Smush CDN is deactivated at the moment, please enable, and advise what could be done to correct it.

  • Kasia Swiderska
    • Support nomad

    Hello Bevan,

    I'm sorry for the inconvenience this issue caused.

    It looks like this is an issue related to "Enable automatic resizing of my images " option and which will be fixed in 3.1 version of Smush, however, I have asked the developer to take a look on your site to make sure it's the same case.
    I will let you know what they will say about this.

    kind regards,
    Kasia

  • Bevan
    • Site Builder, Child of Zeus

    It does actually seem to have been fixed. Maybe this was in the Smush update.

    I do seem to be getting an outline on my png file though. This should be a shadow but instead it drops a white background around the whole image.

  • Rupok
    • Support Ninja

    Hi Bevan,

    So sorry to hear the inconvenience. I inspected your slider and found that there is a 4px white background. So I investigated further and found that flexslider has a CSS property which is creating a 4px border around those images:
    https://monosnap.com/file/Q51KRyOmG8wCKR9Md07ttTgwgqFWEF

    To remove that white border, I've added the following custom CSS code in your Dashboard > Appearance > Customize > Additional CSS section:

    .home .flexslider {
        border: 0px !important;
    }

    And then cleared Hummingbird page caching. That removed the border.

    Can you please check and confirm? Is there anything else we can do for you? Please let us know. We will be very glad to help further.

    Regards,
    Rupok

  • Bevan
    • Site Builder, Child of Zeus

    I believe that the .png file that the CND is having issues with had a partly transparent shadow around it, giving the impression that the slider is sitting away from the page. By removing the 4px border you are essentially removing the design from that element. You can still see the shadow on the lower part of the slider and that still has the white background.

    Does this make sense and can we stop the CND from doing this?

  • Jayman Pandya
    • Recruit

    Hi Bevan,

    There was a white background that was being applied to .flexslider, which is why I have added the following style rule to the addition made by Rupok.

    .home .flexslider {
        background: transparent !important;  /* I added this line */
        border: 0px !important;
    }

    This has solved the issue of white background at my end. I would request you to please check and confirm.

    Please feel free to write back if you need any other assistance in this regards.

    Regards
    Jayman

  • Rupok
    • Support Ninja

    Hi Bevan,

    I'm so sorry to hear the inconvenience. I'm so sorry but I'm not sure if I understood the problem properly. Can you please tell me a little more about the issue so we can help better?

    I'm looking forward to hearing from you and resolving this issue as soon as possible.

    Regards,
    Rupok

  • Bevan
    • Site Builder, Child of Zeus

    I’m not sure what else I can add to this, it’s all detailed above. See the initial post and look at Lady in the bath image on the screenshot. There is black either size of the image as CDN tries to resize the image incorrectly. This should not look like this and it should fill the space rather than being shrank to thumbnail size.

  • Anton Vanyukov
    • Developer

    Hi Bevan ,

    I have looked at your site. There are certain strings that Smush is looking in the file names that help decide further action. For example, if there's a noresize string somewhere in the file name, such an image will not be resized by Smush. The issue you are having is related to images having a size defined in the file name. For example, Stocking-filler-2017-36x28.jpg has 36x28 at the end. If this is a full sized image, this needs to be removed. If you do not want to fix the filename, you can skip such images from being uploaded to CDN with this filter:

    /**
     * Filter to skip a single image from CDN.
     *
     * @param bool       $skip     Should skip? Default: false.
     * @param string     $img_url  Image url.
     * @param array|bool $image    Image tag or false.
     */
    if ( apply_filters( 'smush_skip_image_from_cdn', false, $src, $image ) ) {
    	continue;
    }

    Best regards,
    Anton

Thank NAME, for their help.

Let NAME know exactly why they deserved these points.

Gift a custom amount of points.