[Resolved] Auto Crop Setting of Main Image

Home Forums Support Auto Crop Setting of Main Image

Viewing 15 posts - 1 through 15 (of 21 total)
  • Author
    Posts
  • #1493957
    Helen

    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,
    Helen

    #1494028
    David
    Staff
    Customer Support

    Hi 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.

    #1495464
    Helen

    Hi 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,
    Helen

    #1495998
    Leo
    Staff
    Customer Support

    The 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 🙂

    #1497626
    Helen

    Hi 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

    #1498087
    David
    Staff
    Customer Support

    Try 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:

    https://en-gb.wordpress.org/plugins/regenerate-thumbnails/

    #1501086
    Helen

    Hi 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,
    Helen

    #1501088
    Helen

    https://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

    #1501123
    David
    Staff
    Customer Support

    Hi 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;
    }
    #1501158
    Helen

    I 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

    #1501204
    David
    Staff
    Customer Support

    Did you regenerate the thumbnails ?

    #1501527
    Helen

    Hi David,

    Yes I have, but there is an error on there somewhere.

    Helen

    #1501730
    Tom
    Lead Developer
    Lead Developer

    Hi there,

    The zoom seems to be working for me – can you check again?

    #1527380
    Helen

    Hi 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,
    Helen

    #1528755
    Tom
    Lead Developer
    Lead Developer

    Hi there,

    I’m not sure I’m seeing the issue on my end – can you show us a screenshot maybe?

Viewing 15 posts - 1 through 15 (of 21 total)
  • You must be logged in to reply to this topic.