Image aspect ratio lost when creating new listing category

When creating a new listing category, the category-image aspect ratio is no longer being kept for new categories. Categories I created a while ago kept the image aspect ratio, however newly created categories crop the uploaded image to a square (1:1 ratio).

All my categories have a wide aspect ratio (2.1:1). These categories were created a while ago with an older version of the hivepress theme. I now came to add a new category and cannot get it to keep the same aspect ratio.
Newly added category is marked with red arrow below as displayed in a 3-column Listing Categories widget:

.

Immediately after I add the image to the listing category, it displays correctly, until I press “Save/Update”:

.

But as soon as I press Save/Update, some kind of cropping seems to be taking place and skewing my image aspect ratio:

Other things I have observed:

  • The image aspect ratio is displayed correctly (no cropping) on the the actual Category page header (featured image), but incorrectly in the “Listing Categories” widget.

  • If I add the same image from an “older category” to a new category, the cropping to 1:1 aspect ratio does not occur.

Please help me with this issue as it is driving me nuts and I urgently need to add a new category and cannot :-/

THANK YOU FOR YOUR HELP

Hi,

Please clarify the exact size (px) of the image you add. Please note that the Images field on the frontend always displays a 100x100 thumbnail (as in your 3rd or 4th screenshot), and after adding and saving this image, it should be cropped and displayed correctly depending on the size listinghive/includes/configs/image-sizes.php at master · hivepress/listinghive · GitHub. Additionally, please disable third-party plugins and customizations (if there are any) and check if this issue persists. If you use a caching plugin, make sure that caching is disabled for logged-in users. Also, try deleting this image, saving the changes, and then adding it again. If this issue exists, please send temporary WP access to support@hivepress.io with details for reproducing this issue, and we’ll check it (please send only the link, without login and password). You can create a temporary access link using this plugin Temporary Login Without Password – WordPress plugin | WordPress.org.

Dear Andrii,

the image size and format for the new listing category is the same as all the other listing categories - but for some reason, newly uploaded images are behaving differently then the images uploaded a while ago. The image size is 750x350px.

I tried all your suggestions but no luck, so I sent an email on support@hivepress.io with the temporary access link.

Thank you for your help!

Hi,

Thank you for the temporary link. We’ll need a little more time to check it out in more detail. We will get back to you as soon as possible.

Hi,

We have checked everything in more detail, and the issue is that the image you uploaded for the last category has an aspect ratio of 750x350 px, and the minimum recommended size is 533x400 px. Therefore, we recommend that you re-upload the image.

​I hope this is helpful to you

Dear Andrii,

Thank you for checking and for the update. We upload the images in a bit higher resolution because it is also the featured image of the Category listing page (header image) and a smaller image would be pixelated in full desktop view.

If you check all my other categories you will see that they are all of the same image resolution, 750x350 and there was no issue uploading them… no cropping took part at that time. Did something change recently?
.

Older created category with image 750x350px:


.

Recently created category also with image 750x350px:


.

If there is no other solution I would need to resize my new category images to 533px width instead of 750px width, but if there is any other option I would rather have a higher resolution image, like I have for all the other categories.

Once again thank you for your support and guidance.

Hi,

Sorry for the confusion. Andrii meant that the portrait image size used for category cards is defined as 400x533px (you can check the default image size configuration here listinghive/includes/configs/image-sizes.php at master · hivepress/listinghive · GitHub) and the image size used for the category header is 1600x800. With these settings, if the image width is smaller than 400px or the height is smaller than 533px, WordPress will leave the image “as is” without any resizing or cropping. So the uploaded 750x350px image has the same unchanged aspect ratio when uploaded. I recommend uploading images of at least 1600px width, otherwise the category page header will be blurry, and with this width the 400x533px portrait version for the category cards will be cropped and resized for sure.

To sum up, the current issue occurs, because the uploaded image height is smaller than 533px. Please try uploading an image of at least 533px height and at least 400px width.

Hope this helps

Dear ihor,

The previously uploaded images for the ‘older’ categories are also of the same (750x350px) size and they display correctly without cropping or changing the aspact ratio. The problem seems to have been introduced more recently.

I have tried your suggestion but unfortunately it does not solve my issue.
I changed the category image with a bigger one (1600x747) but the cropping is still happening for the category cards and the original aspect ratio is lost. If anything, the larger the image uploaded is, the worse the cropping becomes.

Here is a new screenshot of the category cards - the last category is the new image (1600x747) all the other categories have an image size of 750x350 and they are displayed correctly. New images, irrelevant of their size (big or small) are never displayed correctly as a category card.

The only way for the category card to display correctly, is to have an image with a size of 375 x 175px - but then of course the category page header image will be highly pixelated

If you compare the above screenshot with the screenshot on the original post, you will notice that the bigger the image size, the more skewed the aspect ratio becomes. The category card seems to always keep the same width, but the height changes according to the actual height of the image uploaded.

Please help me create a new category and keeping the original aspect ratio for the category cards. To me it seems that there has been some change in the behaviour of the theme, as what I used to do before, is now giving different results.

Let me know if you want me to give you access to the wordpress site again. I really need to add new categories asap and am stuck cos of this issue.

Thank you for your help, much appreciated

Sorry for the confusion, I figured that you describe the small-height category images as an issue, but if you want them to appear this way, then a code snippet is needed. Preserving the aspect ratio is not the expected behaviour because the portrait image size is set to 400x533px, with cropping. Please use this code snippet to adjust these settings Change size of images in the listing category - #2 by aqmiami7 For example, if you set 400px width and 9999px height, and re-upload the image (changes are applied on re-uploading), WordPress will leave the image height “as is” without cropping it to 533px like it does currently.

Thank you for your explanation. I understand that this behaviour (cropping) was probably introduced in the past year, as the older category images did not have this issue when I uploaded them.

Thank you also fro the code snippet. This is exactly what I needed!

1 Like