在 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