Comments (8)
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.
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.
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 have "?fit=1500%2C1500&ssl=1" added, not sure from which plugin
- You have hundreds of CSP load errors: https://i.imgur.com/fKwZ8xM.png
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.
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.
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.
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.
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.
Glad you solved it, will be closing this.
from cloudflare-image-resizing.
Related Issues (20)
- Broke my site's images HOT 5
- All images are gone after installing the code. HOT 5
- Bug with iOS 16? HOT 2
- Feature Request: Resize only images with a certain class HOT 2
- I've installed but not working HOT 2
- Wordpress Theme Images Not being Optimized HOT 3
- Saves http instead of https HOT 2
- Plugin wont activate/install HOT 3
- Image with a special crop set in page builder are defaulting to original aspect ratio HOT 2
- urlencode for /cdn-cgi/image/.....$image_path HOT 2
- Images are not resized on smaller viewports HOT 2
- Missing Images HOT 2
- A simple question, I can't find answer of on google. HOT 7
- The URL with the folder causes the plugin to be configured incorrectly HOT 2
- Question re "Strip image sizes" HOT 2
- High Load with Plugin HOT 2
- Images not processed HOT 2
- Special Rules for not resize images like Google Merch Feed HOT 2
- Plugin rewriting Yoast schema image references HOT 2
- The <region> specified is invalid. HOT 3
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
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.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from cloudflare-image-resizing.