Cropped Images

Hi @demian85,

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.

Best regards,
Anton

Hi @vanyukov

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?

With thanks,
Demian

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.

Best regards,
Anton

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 week, 2 days ago by Demian.

Yeah, checking the class could work. But it’s not universal, so it would need to be a filter that you can add only for your site.

I’m also looking at your site once again, and see that now both the src and srcset have the fit=crop added. Is that an adjustment that you made?

I don’t see it, do you have a screenshot of devtools which one?

Here’s a screenshot of dev tools

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.

Best regards,
Anton

Hi @vanyukov

Yes I can set an aspect ratio 300/170 that would fix it as a workaround. But is the missing srcset not strange? Or is this normal?

Demian

I see on the homepage also a rendered size of 300 x auto. See this image (HR Webinar Week):

Should be full size – page builder is wpbakery and it is set as full size. I don’t now what is going on here.

• This reply was modified 1 week, 1 day ago by Demian.

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?

I’m not seeing the homepage issue. Sorry

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 week ago by Demian.

Unfortunately, I am not seeing the issue. For me the home page and the link above render without any issues.

I will give you a screenshot, wat is wrong:

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.