Image Flipper Woocommerce 图像分辨率低

Question

我一直在寻找一种方法，当您悬停鼠标时在 woocommerce 产品循环中制作“翻转图像”，我知道有插件可以执行此功能，但我认为这是一件非常简单的事情，需要使用插件，我一直在寻找，最终找到了解决方案。

代码如下：

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');
    
}

Image Flipper Woocommerce 图像分辨率低

Image Flipper Woocommerce image resolution to low

php

storefront

woocommerce