- This topic has 20 replies, 4 voices, and was last updated 3 years, 4 months ago by David.
-
AuthorPosts
-
October 18, 2020 at 1:52 am #1493957Helen
Hi,
We are using WPSSO for schema and it uses the main product image for open graph. To satisfy the various open graph cropping variations we have to upload a main product image size of 2400×1260.
I would like apply an auto crop to this image on the left and right sides to 1260 x 1260. How can I do this in your theme please? I can’t see where to apply a crop.
Thanks,
HelenOctober 18, 2020 at 3:21 am #1494028DavidStaffCustomer SupportHi there,
do you mean the posts featured image?
If so first you will need to register your cropped image size. This article explains:
https://docs.generatepress.com/article/adding-image-sizes/
Then in Customizer > Layout > Blog –> Featured Images >>> Posts ( and Pages ) you can set the Media Attachment size to your new cropped image.
October 19, 2020 at 6:46 am #1495464HelenHi David,
I mean the Woocommerce Product Images.
You can see the full size image on this page: https://www.watsonwolfe.com/shop/vegan-belts/cork-belt-in-black/
This the main image in the product gallery for all schema and open graph. I need to crop this image to 1260×1260 when it is uploaded to a Product.
I saw there is a setting in Customise > Woocommerce > Product Images – I set the main image width to 1260 but this has not automatically cropped the image.
Thanks,
HelenOctober 19, 2020 at 11:13 am #1495998LeoStaffCustomer SupportThe options under Customizer > WooCommerce Product Images are actually coming from WooCommerce itself:
https://docs.woocommerce.com/document/woocommerce-customizer/The theme shouldn’t interfere with this at all.
Have you checked with their support first?
Let me know 🙂
October 20, 2020 at 1:40 pm #1497626HelenHi David,
Thanks for the suggestion. I have contacted Woocommerce and they replied with a useless response and even more useless page link.
The size of the product images (the ones displayed in your Shop, category or product pages) are determined by each theme and usually, they can’t be changed from the backend.
In order to make sure that your images will be displayed properly in all these different sizes, you must inspect the size of each of these images and choose an image that can fit each of them. If you want to change the dimensions of the images on a specific page (for example on the product details page), you’ll need to use some custom code to change the default template that renders this section.
This is so unhelpful. Is there anything you can suggest to get the main image on the product page to crop square?
Thanks,
Helen
October 21, 2020 at 2:58 am #1498087DavidStaffCustomer SupportTry this – but first i would suggest moving the site to staging site and performing this as this will require regenerating thumbnails to convert the woo images.
1. Add this PHP function to your sites:
add_filter( 'woocommerce_get_image_size_single', 'woo_cropped_single_product_image' ); add_filter( 'woocommerce_get_image_size_shop_single', 'woo_cropped_single_product_image' ); add_filter( 'woocommerce_get_image_size_woocommerce_single', 'woo_cropped_single_product_image' ); function woo_cropped_single_product_image() { $size = array( 'width' => 600, 'height' => 600, 'crop' => 1, ); return $size; }
Adjust the width and height of 600 to match whatever size you have set in Customizer > Woocommerce.
This doc explains adding PHP: https://docs.generatepress.com/article/adding-php/
2. Test to see if works by uploading a new large landscape image to a product. View the product – if its cropped then we’re good to go.
3. If you have lots of images that need fixing then now run the Regenerate Thumbnails plugin:
October 23, 2020 at 5:10 am #1501086HelenHi David,
This is great, thank you. The image is now viewable in a cropped, square area, but the actual image seems to be the same size, so when you hoover and use the zoom function, you ca still pan on all the white space to the left and right sides of the image.
Ideally, the actual image would be cropped equally on both sides too.
You can see what I mean on the same link as before.
Thanks,
HelenOctober 23, 2020 at 5:12 am #1501088Helenhttps://www.watsonwolfe.com/shop/vegan-belts/cork-belt-in-black/
Link above David.
I am trying to think if this even really matters. What is your user experience like for this first image now?
Helen
October 23, 2020 at 5:44 am #1501123DavidStaffCustomer SupportHi Helen,
Woo uses the Full size image for the zoom panel by default.
You could try adding this to crop that two – this time to a larger image size:add_filter( 'woocommerce_gallery_full_size', 'woo_cropped_single_product_zoom_image' ); function woo_cropped_single_product_zoom_image() { $size = array( 'width' => 1200, 'height' => 1200, 'crop' => 1, ); return $size; }
October 23, 2020 at 6:18 am #1501158HelenI have added the new section of php under the first and the zoom function doesn’t seem to be working at all now for some reason….
https://www.watsonwolfe.com/shop/vegan-belts/cork-belt-in-black/
H
October 23, 2020 at 7:20 am #1501204DavidStaffCustomer SupportDid you regenerate the thumbnails ?
October 23, 2020 at 9:20 am #1501527HelenHi David,
Yes I have, but there is an error on there somewhere.
Helen
October 23, 2020 at 1:25 pm #1501730TomLead DeveloperLead DeveloperHi there,
The zoom seems to be working for me – can you check again?
November 11, 2020 at 12:43 pm #1527380HelenHi guys,
I have added this code and the images on single product pages looks great, but this is not working for mobile images. There are showing off to the right hand side.
add_filter( ‘woocommerce_get_image_size_single’, ‘woo_cropped_single_product_image’ );
add_filter( ‘woocommerce_get_image_size_shop_single’, ‘woo_cropped_single_product_image’ );
add_filter( ‘woocommerce_get_image_size_woocommerce_single’, ‘woo_cropped_single_product_image’ );
function woo_cropped_single_product_image()
{
$size = array(
‘width’ => 600,
‘height’ => 600,
‘crop’ => 1,
);
return $size;
}Can you assist with any adjustment in this code to help centre and apply cropping for mobile?
Thanks,
HelenNovember 12, 2020 at 10:14 am #1528755TomLead DeveloperLead DeveloperHi there,
I’m not sure I’m seeing the issue on my end – can you show us a screenshot maybe?
-
AuthorPosts
- You must be logged in to reply to this topic.