Skip to content

Instantly share code, notes, and snippets.

@geoffspink
Last active August 29, 2015 14:08
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save geoffspink/94866dec34b42093d169 to your computer and use it in GitHub Desktop.
Save geoffspink/94866dec34b42093d169 to your computer and use it in GitHub Desktop.
Excerpt from functions.php, provides support for WooCommerce archive-product.php. This script detects the orientation of the product thumbnail from the product archive, and wraps the image in a div to allow a CSS style to be applied so as to display the image in uploaded orientation rather then the default square thumbnail.
<?php
/**
* This snippet removes the action that inserts thumbnails to products in the loop
* and re-adds the function customized with our wrapper in it.
* It applies to all archives with products.
* Original gist here: https://gist.github.com/krogsgard/3015581
*
*/
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);
/**
* WooCommerce Loop Product Thumbs
**/
if ( ! function_exists( 'woocommerce_template_loop_product_thumbnail' ) ) {
function woocommerce_template_loop_product_thumbnail() {
echo woocommerce_get_product_thumbnail();
}
}
/**
* WooCommerce Product Thumbnail, show as
* portrait if original image is portrait,
* landscape if original image is landscape
**/
if ( ! function_exists( 'woocommerce_get_product_thumbnail' ) ) {
/**
* @param string $size
* @param int $placeholder_width
* @param int $placeholder_height
* @return string
*/
function woocommerce_get_product_thumbnail( $size = 'shop_catalog', $placeholder_width = 0, $placeholder_height = 0 ) {
global $post, $woocommerce;
if ( ! $placeholder_width )
$placeholder_width = wc_get_image_size( 'shop_catalog_image_width' );
if ( ! $placeholder_height )
$placeholder_height = wc_get_image_size( 'shop_catalog_image_height' );
/**
* Here is where the magic happens:
* WP checks the soft-cropped thumbnail dimensions
* and wraps in a corresponding DIV
*/
$image_data = wp_get_attachment_image_src( get_post_thumbnail_id( $post->ID ), "thumbnail" );
$image_width = $image_data[1];
$image_height = $image_data[2];
if ( $image_width < $image_height ) {
$output = '<div class="img-wrap-port">';
if ( has_post_thumbnail() ) {
$output .= get_the_post_thumbnail( $post->ID, $size );
} else {
$output .= '<img src="'. wc_placeholder_img_src() .'" alt="Placeholder" width="' . $placeholder_width . '" height="' . $placeholder_height . '" />';
}
$output .= '</div>';
} else {
$output = '<div class="img-wrap-land">';
if ( has_post_thumbnail() ) {
$output .= get_the_post_thumbnail( $post->ID, $size );
} else {
$output .= '<img src="'. wc_placeholder_img_src() .'" alt="Placeholder" width="' . $placeholder_width . '" height="' . $placeholder_height . '" />';
}
$output .= '</div>';
}
return $output;
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment