图像Flipper Wooccommerce图像分辨率过低

Question

我一直在寻找一种方法来制作；翻转图像"；在wooccommerce产品循环中，当你悬停鼠标时，我知道有插件可以实现这个功能，但我认为需要使用插件是一件非常简单的事情，我一直在搜索，最终找到了解决方案。

这是代码：

add_action( 'woocommerce_before_shop_loop_item_title', 'custom_loop_product_thumbnail', 10 );
function custom_loop_product_thumbnail() {
global $product;

$attachment_ids = $product->get_gallery_image_ids();
$secondary_image_id = $attachment_ids['0'];
echo wp_get_attachment_image($secondary_image_id);

}

和css：

ul.products li.product a.woocommerce-LoopProduct-link img:nth-child(1){
position: absolute;
top: 0;
left: 0;
z-index: 1;
}
ul.products li.product a.woocommerce-LoopProduct-link img:nth-child(1):hover {
opacity: 0;
transition: opacity 0.5s;
}

我的代码完成了任务，但图像的分辨率很低

有没有办法让它不以如此低的分辨率出现？

我正在使用店面儿童主题

Answer 1

别介意，我发现我的代码中缺少一些信息，这是我找到的解决方案：

您需要设置图像大小：wp_get_attachment_image();

//set image size full size
wp_get_attachment_image($secondary_image_id, 'full');
//set image size medium size
wp_get_attachment_image($secondary_image_id, 'medium');
//set image size thumbanil size (default)
wp_get_attachment_image($secondary_image_id, 'thumbnail');

add_action( 'woocommerce_before_shop_loop_item_title', 'custom_loop_product_thumbnail', 10 );
function custom_loop_product_thumbnail() {
global $product;

$attachment_ids = $product->get_gallery_image_ids();
$secondary_image_id = $attachment_ids['0'];
echo wp_get_attachment_image($secondary_image_id, 'full');

}