Cyber Week Sale! Get $20 off GP Premium, $40 off our new Lifetime license, and 45% off license renewals/extensions! Learn more

[Resolved] Hooks to alter image size

Home Forums Support Hooks to alter image size

  • This topic has 2 replies, 2 voices, and was last updated 5 years ago by Tom.
Viewing 3 posts - 1 through 3 (of 3 total)
  • Author
    Posts
  • #155182
    David

    I have recently migrated from an old opencart webpage (boat.net.nz), to a woocommerce site (demo.boat.net.nz).

    Unfortunately, all of the images on the old opencart site were different dimensions, and display poorly because of this.

    What I am trying to do is create a hook which sizes the product catalogue image to fit inside a 200 x 200 px box, and then add in white space to make it fill the 200 x 200 box.

    For example, a 500 x 250 image would scale down to 200 x 100, with 200 x 50 padding on each side.

    Any ideas would be appreciated – I have been stuck on this all week and really don’t want to change 2000 + product images individually.

    #155186
    David

    Even though this is a reply to my own question – I have FINALLY figured this out after a huge search.

    Maybe it will be useful to someone else:
    Firstly I used Pluginception to create a plugin and filled it with the php:

    remove_action( 'woocommerce_before_shop_loop_item_title', 'woocommerce_template_loop_product_thumbnail', 10);
    add_action( 'woocommerce_before_shop_loop_item_title', 'woocommerce_template_loop_product_thumbnail', 10);
    
    if ( ! function_exists( 'woocommerce_template_loop_product_thumbnail' ) ) {
        function woocommerce_template_loop_product_thumbnail() {
            echo woocommerce_get_product_thumbnail();
        } 
    }
    if ( ! function_exists( 'woocommerce_get_product_thumbnail' ) ) {   
        function woocommerce_get_product_thumbnail( $size = 'shop_catalog', $placeholder_width = 0, $placeholder_height = 0  ) {
            global $post, $woocommerce;
            $output = '<div class="imagewrapper">';
    
            if ( has_post_thumbnail() ) {               
                $output .= get_the_post_thumbnail( $post->ID, $size );              
            }                       
            $output .= '</div>';
            return $output;
        }
    }

    After this, I added to the CSS:

    .woocommerce div.imagewrapper {
    	height: 100px;
    	width: 100PX;
    	padding: 2px;
    	background-color: #ffffff;
    	display: flex;
    /* add */
    	justify-content: center;
    /* add to align horizontal */
    	align-items: center;
    /* add to align vertical */
    }

    This has done a suprisingly good job – considering the overwhelming response to this sort of question elsewhere on the web is “Upload images of the same size.”

    Credit to Adrian Cojocariu for the code.

    #155228
    Tom
    Lead Developer
    Lead Developer

    Great work and thanks for posting the code (and thanks to Adrian!) 🙂

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