指定 WooCommerce 圖片大小

在 WooCommerce 3.3 的時候,針對使用的圖片進行的一個重大的修正。
修改為使用 WooCommerce 專用的圖片尺寸,並且可以在佈景主題的自訂設定當中進行寬度的指定。不過這樣的指定對於很多人來說還是不夠用的。
這邊就提出一個硬派一點的修正方式,直接強制指定各尺寸的大小與縮圖規則。

可以將下列的程式碼加入你的佈景主題的 functions.php 當中

add_action('woocommerce_init', 'self_woocommerce_init');
function self_woocommerce_init() {
	add_action('woocommerce_get_image_size_thumbnail', 'self_wc_image_size_thumbnail');
	add_action('woocommerce_get_image_size_single', 'self_wc_image_size_single');
	add_action('woocommerce_get_image_size_gallery_thumbnail', 'self_wc_image_size_gallery_thumbnail');
}

function self_wc_image_size_thumbnail() {
	return array(
		'width' => 250,
		'height' => 250,
		'crop' => 0
	);
}

function self_wc_image_size_single() {
	return array(
		'width' => 800,
		'height' => 800,
		'crop' => 0
	);
}

function self_wc_image_size_gallery_thumbnail() {
	return array(
		'width' => 250,
		'height' => 250,
		'crop' => 1
	);
}

在上列的程式碼當中,第一個 self_wc_image_size_thumbnail 設定的是商品列表的圖片尺寸
第二個 self_wc_image_size_single 設定的是單一商品頁上的主圖片尺寸
第三個 self_wc_image_size_gallery_thumbnail 設定的是商品圖庫列表中的圖片尺寸

而其中的 width 就是寬度,height 當然就是高度啦!
當上傳的圖片尺寸比指定的尺寸還要大的時候就要縮小,當你寬度或是高度設定為 0 就代表不限制。
而 crop 就是在縮小的時候,圖片是否需要裁切。0 是不裁切,維持圖片的原始比例,1 是要裁切,先將長寬其中之一縮小到指定大小,另外然後多出來的圖片頭尾裁切掉。

以上的說明看不懂嗎?沒關係我給你一個實際的範例
原始的圖片為 5312 * 2992 的情況下,thumbnail 會是 250 * 141 ,single 會是 800 * 451 ,gallery_thumbnail 會是 250 * 250

發表留言

發佈留言必須填寫的電子郵件地址不會公開。 必填欄位標示為

這個網站採用 Akismet 服務減少垃圾留言。進一步了解 Akismet 如何處理網站訪客的留言資料