Add support for custom attributes to wc_placeholder_img().

When displaying a list of images you often want a specific class to be
attached to each image, therefore you pass through a custom class using
the attr parameter. Unfortunately this doesn't get passed through to a
placeholder image should one be needed. This means that, for example, if
you're custom class center an image or something, it won't be honoured
for placeholders, which can lead to some wonky image listings.

You can work around this currently by leverging the
`woocommerce_product_get_image` filter, but it's a bit gnarly as you
need to do some regexing or string splitting or something and checking
class names and what not. This provides a much easier way, by
supporting custom attrs on placeholder images as is the case for non
placehodler images.
This commit is contained in:
Ian Jenkins 2019-10-30 15:08:19 +00:00
parent cb21ea7a3d
commit 2340f269cf
4 changed files with 27 additions and 8 deletions

View File

@ -1859,7 +1859,7 @@ class WC_Product extends WC_Abstract_Legacy_Product {
}
if ( ! $image && $placeholder ) {
$image = wc_placeholder_img( $size );
$image = wc_placeholder_img( $size, $attr );
}
return apply_filters( 'woocommerce_product_get_image', $image, $this, $size, $attr, $placeholder, $image );

View File

@ -288,26 +288,37 @@ function wc_placeholder_img_src( $size = 'woocommerce_thumbnail' ) {
*
* Uses wp_get_attachment_image if using an attachment ID @since 3.6.0 to handle responsiveness.
*
* @param string $size Image size.
* @param string $size Image size.
* @param string|array $attr Optional. Attributes for the image markup. Default empty.
* @return string
*/
function wc_placeholder_img( $size = 'woocommerce_thumbnail' ) {
function wc_placeholder_img( $size = 'woocommerce_thumbnail', $attr = '' ) {
$dimensions = wc_get_image_size( $size );
$placeholder_image = get_option( 'woocommerce_placeholder_image', 0 );
$default_attr = array(
'class' => 'woocommerce-placeholder wp-post-image',
'alt' => __( 'Placeholder', 'woocommerce' ),
);
$attr = wp_parse_args( $attr, $default_attr );
if ( wp_attachment_is_image( $placeholder_image ) ) {
$image_html = wp_get_attachment_image(
$placeholder_image,
$size,
false,
array(
'alt' => __( 'Placeholder', 'woocommerce' ),
'class' => 'woocommerce-placeholder wp-post-image',
)
$attr
);
} else {
$image = wc_placeholder_img_src( $size );
$image_html = '<img src="' . esc_attr( $image ) . '" alt="' . esc_attr__( 'Placeholder', 'woocommerce' ) . '" width="' . esc_attr( $dimensions['width'] ) . '" class="woocommerce-placeholder wp-post-image" height="' . esc_attr( $dimensions['height'] ) . '" />';
$hwstring = image_hwstring( $dimensions['width'], $dimensions['height'] );
$attr = array_map( 'esc_attr', $attr );
$image_html = rtrim( '<img src="' . esc_attr( $image ) . '" ' . $hwstring );
foreach ( $attr as $name => $value ) {
$image_html .= " $name=" . '"' . $value . '"';
}
$image_html .= ' />';
}
return apply_filters( 'woocommerce_placeholder_img', $image_html, $size, $dimensions );

View File

@ -324,6 +324,10 @@ class WC_Tests_Product_Data extends WC_Unit_Test_Case {
$product = new WC_Product();
$this->assertContains( wc_placeholder_img_src(), $product->get_image() );
// Test custom class attribute is honoured.
$image = $product->get_image( 'woocommerce_thumbnail', array( 'class' => 'custom-class' ) );
$this->assertContains( 'class="custom-class"', $image );
}
/**

View File

@ -885,6 +885,10 @@ class WC_Tests_Product_Functions extends WC_Unit_Test_Case {
*/
public function test_wc_placeholder_img() {
$this->assertTrue( (bool) strstr( wc_placeholder_img(), wc_placeholder_img_src() ) );
// Test custom class attribute is honoured.
$attr = array( 'class' => 'custom-class' );
$this->assertContains( 'class="custom-class"', wc_placeholder_img( 'woocommerce_thumbnail', $attr ) );
}
/**