Merge pull request #20644 from woocommerce/update/dynamic-placeholders

Make placeholders resize based on aspect ratio settings

assets/css/twenty-seventeen.scss

@@ -229,6 +229,10 @@ ul.products {
 			margin-bottom: .75em;
 		}
 
+		.woocommerce-placeholder {
+			border: 1px solid #F2F2F2;
+		}
+
 		.button {
 			@include link();
 
@@ -405,6 +409,10 @@ table.variations {
 		opacity: 0;
 	}
 
+	.woocommerce-product-gallery__image--placeholder {
+		border: 1px solid #F2F2F2;
+	}
+
 	.woocommerce-product-gallery__image:nth-child(n+2) {
 		width: 25%;
 		display: inline-block;

assets/css/woocommerce.scss

@@ -189,6 +189,10 @@ p.demo_store,
 				opacity: 0;
 			}
 
+			.woocommerce-product-gallery__image--placeholder {
+				border: 1px solid #F2F2F2;
+			}
+
 			.woocommerce-product-gallery__image:nth-child(n+2) {
 				width: 25%;
 				display: inline-block;
@@ -571,6 +575,10 @@ p.demo_store,
 			display: block;
 		}
 
+		.woocommerce-placeholder {
+			border: 1px solid #F2F2F2;
+		}
+
 		.star-rating {
 			font-size: 0.857em;
 		}
@@ -1713,7 +1721,7 @@ p.demo_store,
 /**
  * Right to left styles
  */
- .rtl.woocommerce .price_label, 
+ .rtl.woocommerce .price_label,
  .rtl.woocommerce .price_label span {
 	/* rtl:ignore */
 	direction: ltr;

includes/admin/settings/class-wc-settings-products.php

@@ -2,10 +2,8 @@
 /**
  * WooCommerce Product Settings
  *
- * @author   WooThemes
+ * @package WooCommerce/Admin
- * @category Admin
+ * @version 2.4.0
- * @package  WooCommerce/Admin
- * @version  2.4.0
  */
 
 if ( ! defined( 'ABSPATH' ) ) {
@@ -75,9 +73,9 @@ class WC_Settings_Products extends WC_Settings_Page {
 
 			<p>
 				<?php
-				/* translators: %s: URL to customizer. */
 				echo wp_kses(
 					sprintf(
+						/* translators: %s: URL to customizer. */
 						__( 'Looking for the product display options? They can now be found in the Customizer. <a href="%s">Go see them in action here.</a>', 'woocommerce' ), esc_url(
 							add_query_arg(
 								array(
@@ -325,6 +323,7 @@ class WC_Settings_Products extends WC_Settings_Page {
 						),
 						array(
 							'title'    => __( 'Shop page', 'woocommerce' ),
+							/* translators: %s: URL to settings. */
 							'desc'     => '<br/>' . sprintf( __( 'The base page can also be used in your <a href="%s">product permalinks</a>.', 'woocommerce' ), admin_url( 'options-permalink.php' ) ),
 							'id'       => 'woocommerce_shop_page_id',
 							'type'     => 'single_select_page',
@@ -348,6 +347,16 @@ class WC_Settings_Products extends WC_Settings_Page {
 							'type'          => 'checkbox',
 							'checkboxgroup' => 'end',
 						),
+						array(
+							'title'       => __( 'Placeholder image', 'woocommerce' ),
+							'id'          => 'woocommerce_placeholder_image',
+							'type'        => 'text',
+							'default'     => '',
+							'class'       => '',
+							'css'         => '',
+							'placeholder' => __( 'Enter attachment ID or URL to an image', 'woocommerce' ),
+							'desc_tip'    => __( 'This is the attachment ID, or image URL, used for placeholder images in the product catalog. Products with no image will use this.', 'woocommerce' ),
+						),
 						array(
 							'type' => 'sectionend',
 							'id'   => 'catalog_options',

includes/class-wc-install.php

@@ -1087,6 +1087,58 @@ CREATE TABLE {$wpdb->prefix}woocommerce_termmeta (
 				}
 			}
 		}
+
+		// Create attachment for placeholders.
+		self::create_placeholder_image();
+	}
+
+	/**
+	 * Create a placeholder image in the media library.
+	 *
+	 * @since 3.5.0
+	 */
+	private static function create_placeholder_image() {
+		$placeholder_image = get_option( 'woocommerce_placeholder_image', 0 );
+
+		if ( ! is_numeric( $placeholder_image ) ) {
+			return;
+		}
+
+		if ( ! empty( $placeholder_image ) && is_numeric( $placeholder_image ) && wp_attachment_is_image( $placeholder_image ) ) {
+			return;
+		}
+
+		$upload_dir = wp_upload_dir();
+		$source     = WC()->plugin_path() . '/assets/images/placeholder.png';
+		$filename   = $upload_dir['basedir'] . '/woocommerce-placeholder.png';
+
+		if ( ! file_exists( $filename ) ) {
+			copy( $source, $filename ); // @codingStandardsIgnoreLine.
+		}
+
+		if ( ! file_exists( $filename ) ) {
+			update_option( 'woocommerce_placeholder_image', 0 );
+			return;
+		}
+
+		$filetype   = wp_check_filetype( basename( $filename ), null );
+		$attachment = array(
+			'guid'           => $upload_dir['url'] . '/' . basename( $filename ),
+			'post_mime_type' => $filetype['type'],
+			'post_title'     => preg_replace( '/\.[^.]+$/', '', basename( $filename ) ),
+			'post_content'   => '',
+			'post_status'    => 'inherit',
+		);
+		$attach_id  = wp_insert_attachment( $attachment, $filename );
+
+		update_option( 'woocommerce_placeholder_image', $attach_id );
+
+		// Make sure that this file is included, as wp_generate_attachment_metadata() depends on it.
+		require_once ABSPATH . 'wp-admin/includes/image.php';
+
+		// Generate the metadata for the attachment, and update the database record.
+		$attach_data = wp_generate_attachment_metadata( $attach_id, $filename );
+		wp_update_attachment_metadata( $attach_id, $attach_data );
 	}
 
 	/**

includes/wc-product-functions.php

@@ -275,26 +275,39 @@ add_filter( 'post_type_link', 'wc_product_post_type_link', 10, 2 );
 /**
  * Get the placeholder image URL for products etc.
  *
- * @access public
+ * @param string $size Image size.
  * @return string
  */
-function wc_placeholder_img_src() {
+function wc_placeholder_img_src( $size = 'woocommerce_thumbnail' ) {
-	return apply_filters( 'woocommerce_placeholder_img_src', WC()->plugin_url() . '/assets/images/placeholder.png' );
+	$src               = WC()->plugin_url() . '/assets/images/placeholder.png';
+	$placeholder_image = get_option( 'woocommerce_placeholder_image', 0 );
+
+	if ( ! empty( $placeholder_image ) ) {
+		if ( is_numeric( $placeholder_image ) ) {
+			$dimensions = wc_get_image_size( $size );
+			$image      = wp_get_attachment_image_src( $placeholder_image, array( $dimensions['width'], $dimensions['height'] ) );
+
+			if ( ! empty( $image[0] ) ) {
+				$src = $image[0];
+			}
+		} else {
+			$src = $placeholder_image;
+		}
+	}
+
+	return apply_filters( 'woocommerce_placeholder_img_src', $src );
 }
 
 /**
  * Get the placeholder image.
  *
- * @access public
- *
  * @param string $size Image size.
- *
  * @return string
  */
 function wc_placeholder_img( $size = 'woocommerce_thumbnail' ) {
 	$dimensions = wc_get_image_size( $size );
 
-	return apply_filters( 'woocommerce_placeholder_img', '<img src="' . wc_placeholder_img_src() . '" alt="' . esc_attr__( 'Placeholder', 'woocommerce' ) . '" width="' . esc_attr( $dimensions['width'] ) . '" class="woocommerce-placeholder wp-post-image" height="' . esc_attr( $dimensions['height'] ) . '" />', $size, $dimensions );
+	return apply_filters( 'woocommerce_placeholder_img', '<img src="' . wc_placeholder_img_src( $size ) . '" alt="' . esc_attr__( 'Placeholder', 'woocommerce' ) . '" width="' . esc_attr( $dimensions['width'] ) . '" class="woocommerce-placeholder wp-post-image" height="' . esc_attr( $dimensions['height'] ) . '" />', $size, $dimensions );
 }
 
 /**