Giter Site home page Giter Site logo

Comments (8)

Mecanik avatar Mecanik commented on May 24, 2024

Hello,

I`m aware of this issue and working on a way to fix it. The issue comes because I do not query the database at all to get the sizes needed, most likely the regex fails (Try extract from img url (eg: /wp-content/uploads/2020/07/project-9-1200x848.jpg)) and then it gets the sizes from the disk (getimagesize).

Can you show me some images to get an idea?

BTW: You can install the plugin from here now: https://wordpress.org/plugins/cf-image-resizing/

Thanks

from cloudflare-image-resizing.

ShaleSubaru avatar ShaleSubaru commented on May 24, 2024

If it helps, here's an example from the website in question - but anything that's not a thumbnail displays this issue.

I've just reinstalled from the link you supplied too.

Thanks for looking into this.

from cloudflare-image-resizing.

Mecanik avatar Mecanik commented on May 24, 2024

If it helps, here's an example from the website in question - but anything that's not a thumbnail displays this issue.

I've just reinstalled from the link you supplied too.

Thanks for looking into this.

Thank you. I see the following issues right now:

Images are loaded correctly, even the woo commerce size is correct:

Notice the URL of the original image is https://www.treebrushapothecary.nz/wp-content/uploads/2021/07/thuck-kawakawa-balm-all-sizes.jpg (1500x1500) and the CDN URL is: https://www.treebrushapothecary.nz/cdn-cgi/image/quality=80,format=auto,onerror=redirect,metadata=none/wp-content/uploads/2021/07/thuck-kawakawa-balm-all-sizes.jpg (1500x1500).

Woocomerce seems to need a large image so the zoom feature works and the image is being delivered from the CDN instead of your server, which is fine.

As a result, I do not see a problem with this plugin. However, I went onto other pages to check the "2000px" issue which you mentioned, for example on: https://www.treebrushapothecary.nz/.

<img data-testid="product-image" alt="Good Vibes fragranced soy wax melts" src="https://www.treebrushapothecary.nz/cdn-cgi/image/width=2000,height=2000,fit=crop,quality=80,format=auto,onerror=redirect,metadata=none/wp-content/uploads/2021/12/goodvibes-soy-wax-melts.jpg" srcset="" sizes="(max-width: 2000px) 100vw, 2000px">

Once again, the plugin works correctly. Notice the sizes="(max-width: 2000px) 100vw, 2000px" and the srcset="" is empty. I believe this is coming from the theme itself, but to confirm 100% please turn off the CF plugin so we can see the result without it.

In other words your image container is forced to show an image inside 400px but the image is loaded as 2000px from the theme itself rather than a 400px image. Again, please turn off the CF plugin so we can confirm this.

Thanks

from cloudflare-image-resizing.

ShaleSubaru avatar ShaleSubaru commented on May 24, 2024

You are super thorough, thank you so much.

I've disabled the plugin for the moment to check the srcset and sizes attributes, and correct - looks like they're still coming through without the plugin.

Images have "?fit=1500%2C1500&ssl=1" added, not sure from which plugin

Looks like this is the case at first glance?

I'll tackle the srcset and sizes attributes from the theme's end, I imagine I'm not the only one that'll be having CF issues.

from cloudflare-image-resizing.

Mecanik avatar Mecanik commented on May 24, 2024

You are super thorough, thank you so much.

I've disabled the plugin for the moment to check the srcset and sizes attributes, and correct - looks like they're still coming through without the plugin.

Images have "?fit=1500%2C1500&ssl=1" added, not sure from which plugin

Looks like this is the case at first glance?

I'll tackle the srcset and sizes attributes from the theme's end, I imagine I'm not the only one that'll be having CF issues.

No problem, I`m in this to the end so. Your main issue seems to be the theme or another plugin breaking image sizes. Normally the theme/plugin should insert all the correct srcset="" images and then everything would be OK.

You are not the only one with such issues, however, it's not really an "issue". Sometimes you are limited by the theme, it does what it can. And using my plugin you just deliver the images from CF instead of your server, which is no loss or performance overhead.

So at the end of the day if you cannot do anything to the theme/plugins to amend those size, you can just use the plugin as is because it functions correctly.

from cloudflare-image-resizing.

atsbob avatar atsbob commented on May 24, 2024

You are super thorough, thank you so much.

I've disabled the plugin for the moment to check the srcset and sizes attributes, and correct - looks like they're still coming through without the plugin.

Images have "?fit=1500%2C1500&ssl=1" added, not sure from which plugin

Looks like this is the case at first glance?

I'll tackle the srcset and sizes attributes from the theme's end, I imagine I'm not the only one that'll be having CF issues.

do you have Wordpress Photon enabled by chance?

from cloudflare-image-resizing.

ShaleSubaru avatar ShaleSubaru commented on May 24, 2024

do you have Wordpress Photon enabled by chance?

I do have Jetpack, though site accelerator (formerly proton?) is disabled.

Looking around, I think I can isolate the broken srcset to the implementation of WooCommerce on the home page. Will rectify and should be able to confirm that the plugin is working exactly as intended soon.

Edit: So that was a fun rabbit hole. I've narrowed down the broken srcset and obnoxious sizes attributes down to Gutenberg. Apparently this is also a known thing people have been complaining about for years. So I'm off to find a replacement product gallery for the homepage, and this "issue" is indeed not an issue!

from cloudflare-image-resizing.

Mecanik avatar Mecanik commented on May 24, 2024

Glad you solved it, will be closing this.

from cloudflare-image-resizing.

Related Issues (20)

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.