Image Sizing

Hi Chris

Thanks for getting in touch.

I’m, unfortunately, unsure what might have changed. Is the widget behavior perhaps different if you temporarily deactivate Site Accelerator from Jetpack > Settings?

Alternatively, is it possible your full-size images were previously in the same ratio? If your images are of different ratios then it might be worth choosing a specific image size option instead of using the Full size.

Hi Andrew,

Thank you very much for the suggestions. I tried disabling Site Accelerator but unfortunately it didn’t affect the display on those images.

The full size images have always been in different ratios and, up until now, they always loaded as a square. I tried selecting 1024×1024, etc, instead of full size, but that didn’t seem to work either. Very confused.

Let me know if you have any other ideas,
Chris

Hi Chris

Thanks for the update.

At the moment, Harpy Peppers is width=”1536″ height=”2048″. Do you perhaps want to try changing that to an image size with the same width and height? I can then take another look.

Hi Andrew,

I’ve just set the display to 1536×1536 inside the SiteOrigin Image settings. Thanks again for looking at this,

Chris

Thanks, Chris. The Harpy image is still width=”1152″ height=”1536″ when I view the source code. Perhaps try clearing your caching plugin.

Hi Andrew,

We’ve temporarily deactivated Litespeed Cache and changed the “Image Size” settings in SiteOrigin to 1024×1024 before updating the page again.

Still looks like it’s displaying as a full-size image on our end, but curious to know if you’re seeing anything different now that the caching plugin is deactivated.

Thanks,
Chris

Hi Chris

I guess that’s a soft-crop image size. I can see the change now. The image is loaded at width=”768″ height=”1024″. Perhaps try selecting the last image option, Custom. Manually enter your dimensions. How does that look?

Hi Andrew,

We’ve changed the sizing to “Custom” and set it at 1024 x 1024. It still looks like a tall vertical image for us. What are you seeing on your end?

Chris

Hi Chris

Thanks for trying the custom size option. I can see we’re also soft cropping with the custom image size.

Do you have a photo editing program on your computer? You have two options to square an image like this. You can either crop some of the image or you can widen the canvas. If you crop, you can crop from the center, top, right, left, or bottom. If you widen the canvas, you can choose any background color. Here are the two options roughly mocked up:https://imgur.com/a/RAK5Ubo.

If you install the Custom Image Sizes plugin from DraftPress you’ll get a clearer picture of which image sizes are soft cropping and which are hard cropping. Here is how the image sizes look in my local install: https://imgur.com/a/fYcHxqy. You can see that Large (1024 x 1024) is a soft crop image size. Thumbnail (150 x 150) is a hard crop image size meaning the image will be exactly 150 x 150. Using Custom Image Sizes you can create a new image size that’s 1024 x 1024 hard crop if you’d like to.

I hope this helps to explain what’s happening and what your options are for moving forward.

Hi Andrew,

The chart showing different sizes with their “hard-crop” binary status is helpful, and I’m happy to download the third-party plugin to try fixing this, but still a bit confused why it started happening suddenly.

It seems that now every time I update a SiteOrigin image (even if I just alter the title, caption, etc) it’s changing the image-cropping setting and no longer displaying them as square, as it did previously. Seems to be slowly happening for every item on my Product Categories and Vendors pages. Is this all due to a major update from WordPress, Woocommerce, or SiteOrigin itself?

Thanks again for helping to walk me through this,
Chris

Andrew,

I just tested the DraftPress plugin with a new custom image size and it seems to work for images that are in portrait orientation (Harpy Peppers), but doesn’t work for images that are in landscape (Gutay Design).

I tried setting the “Crop” settings to “Yes” and that didn’t work, so I also tried “Center Center” inside the plugin, but that still didn’t fix the landscape photo cropping.

Chris

Hi Chris

Please let me know which image to check and what dimensions you’ve set up in the Custom Image Sizes plugin for that image.

Andrew,

I’m looking at:

IMG20220909170018.jpg
and
Photo-Aug-26-1-46-33-PM-e1610439755554.jpg
on shopcarolina.org/vendors

They are set to 1024×1024 with the DraftPress plugin. As you can see on mobile, they are not displaying correctly at all.

All the other image widgets from years past show up in the exact same square container with a perfect crop and equal padding / margins.

But every time I update or edit one of these image widgets, the cropping and padding become totally out-of-whack. The plugin is not able to fix this issue. It appears to be an issue with SiteOrigin itself.

Chris

Hi Chris

Thanks for the update.

I’m not following how this is related to SiteOrigin. I’m happy to advise where we can. If you’d like to test independently of SiteOrigin, you can install and activate the Classic Editor plugin, create a test page, click the Add Media button and and test display options on desktop on mobile in order to create a benchmark.

Do you have a right-click content protection plugin activated? It’s easiest to deactivate that while troubleshooting. It means extra steps via the developer console to view sizes.

Andrew,

To me it seems like it has to be related to SiteOrigin. I’m using SiteOrigin image widgets for all of my categories and I have never had any problems before. But now when I update any of the widgets, the formatting goes crazy. Every single widget has been using the exact same settings for years. Each image has been copied from its neighbor and I have not changed anything in the image settings until I started testing your suggestions.

It’s not the image display size that is the problem. The problem is the formatting coming from the siteorigin widgets. Every image widget has the same boxes checked in the settings (bound to container, full size, etc). But if I click on one (without changing any settings at all) and then update the wordpress page, it will lose the previous formatting that it has had for years. To me that clearly indicates that this is related to SiteOrigin.

And no I do not believe that I have a right-click content protection plugin. If there’s something I can change in the WooCommerce or Storefront settings to make it easier for you to help with troubleshooting, I’m more than happy to help. But I’m not sure how to turn that feature off, as I don’t know exactly what it is or how it’s affecting the developer tool.

Thanks for your patience,
Chris