Could you inform me why cropped images are not being cropped by Cloudflare?
For example this page https://hrcommunity.nl/kennis/ should use the cropped version 300×170. Instead they all have random sizes (300 x auto, it seems?) and it’s missing fit=crop
That’s actually a really good question and the first time I see this. Unfortunately, I don’t know why Cloudflare is doing this, even though the correct width and height attributes are set in w=300,h=170. I would try re-offloading the image. And if that doesn’t help, contact Cloudflare support. Sorry, there’s not much I can do on the plugin side to fix this.
Offloading/Uploading did not do anything. Support of Cloudflare consists of an AI chat. What seems to be the problem is that srcset is not taking the fit attribute, the src is good. Are you sure the srcset is not generated by the plugin? Is there something missing?
Oh, I see what you mean now. Sorry, I misunderstood you. The plugin will add fit=crop if the registered attachment size is set to be cropped in WordPress. If it’s not set to be cropped in WordPress, I should be able to add an integration to fix this for you. Could you please provide some info on how you are getting that attachment size? Is it set via the page builder? Ideally some steps I can use to replicate the setup on my end.
No worries, I also just discovered this now. With our theme we can make additional image sizes. And a cropped version is set in this case _us_300_170_crop. You can actually see it based on the classes of the image.
However, I assume that when cloudflare adds fit=crop to the initial src, you could give an additional condition to add it to the srcset, despite which theme or plugin is used? Just thinking out loud 🙂
Demian
This reply was modified 1 year, 7 months ago by Demian.
This is even weirder, the srcset is missing here. And despite it states fit=crop it renders as 304 x 173 instead of 300 x 170. There are also plenty who have the srcset loaded.
I checked the images, and all images from 5 november are missing the srcset and I started to offload the images on the 4th of November.
The 173 px is coming from CSS. If you remove height: auto; from img, it will revert the height back to 170px.
With Nov 5 posts I can see the issue. I’m open to suggestions on how to adjust this for you. Personally, I would not use image crop to achieve this effect. You can remove the following styles from img elements (just make sure to test that this doesn’t break other parts of the layout):
height: 100%; max-width: 100%;
and use the object-fit property:
object-fit: cover;
then on the .grid-images-wrapper set the required aspect ratio, something like:
aspect-ratio: 300/170;
That would give you exactly what you are looking for, without the worry of generating additional cropped image sizes.
But again, please test the above styles so they don’t break something else.
The srcset is based on the ability of the plugin to find the original image. WordPress adds an image class that contains the image ID. Many themes remove that class, for reasons not known to me 🙁 So it becomes difficult to find the original. Looking at the images you have, this is purely a guess, images that do not have a srcset have a class that looks something like this: attachment-us_300_170_crop size-us_300_170_crop entered lazyloaded, while images with srcset have attachment-thumbnail size-thumbnail. I think one of the images is more of a standard WordPress size, while the other is cropped with the page builder?
The image is not taking full length, while it is set as full, it shows a rendered 300 width image.
This seems to be a wide issue. Every picture that has been added with wpbakery is being rendered as 300 px. I can modify it with CSS, but this is not a user friendly soltion. This site is a community with a lot of authors, and I cannot teach them all how to change the aspect ratio when they just simply add a picture and they select full size and it is not working. Something is off here. Here is another example in the sidebar: https://hrcommunity.nl/hr/academie/
They all render as 300.
This reply was modified 1 year, 6 months ago by Demian.
As you can see it renders 300 size, while it is 1200. It’s globally over the site. I can fix this by forcing a width: 100%;, but that is fixing an issue which doesn’t make sense. When the image is set as 1200 it should load 1200.
