Woocommerce中缩略图库中的重复图片
我正在建立一个Woocommerce网站。
在车间网格概览中 ，我显示了每个产品的特色图片（ 参见链接 ）。 将裁剪此特色图像以在Shop Grid中保持相同的图像比例。
在单个产品页面中 ，我设法隐藏了精选图像，并使第一个缩略图显示为大（ 请参阅链接 ）。
我使用以下代码执行此操作：
get_gallery_attachment_ids(); ?> <a href="https://stackoverflow.com/questions/31835142/duplicated-pic-in-thumbnail-gallery-in-woocommerce/" class="woocommerce-main-image zoom first" rel="lightbox[product-gallery]"> <img src="https://stackoverflow.com/questions/31835142/duplicated-pic-in-thumbnail-gallery-in-woocommerce/" alt=""> jQuery('.thumbnails.columns-3 a:first-child').hide() 第一部分将找到gallery数组中的第一个图像，并在链接到灯箱时以大尺寸 （类woocommerce-main-image zoom first） 显示它 。
然后我调用缩略图 ，然后使用jQuery隐藏第一个 缩略图以避免重复（第一个大尺寸图像和第一个拇指是相同的）。
现在的问题是， 在Lightbox中，第一个图像将显示重复 ，因为它在数组中存在两次，第一个我调用big，而一个来自thumbs数组。
有关如何在灯箱中两次显示图像的任何提示？
有人提到我应该过滤以下function，但截至目前我不知道该怎么做。
public function get_gallery_attachment_ids() { return apply_filters( 'woocommerce_product_gallery_attachment_ids', array_filter( (array) explode( ',', $this->product_image_gallery ) ), $this ); }
我认为使用Multiple Post Thumbnails是最简单的解决方案。 它完全适用于在不同位置显示不同的特色图像。
选项＃1：多个后缩略图
您将安装该插件，然后将以下内容添加到主题的functions.php中。 它没有经过100％的测试，所以可能会有一个流浪错误或其他东西。 完整的文档在这里 。
// register the new thumbnail function so_31835142_register_extra_thumbnail() { if (class_exists('MultiPostThumbnails')) { new MultiPostThumbnails( array( 'label' => __('Product Loop Image', 'your-theme'), 'id' => 'product-loop-image', 'post_type' => 'product' ) ); } } add_action( 'after_setup_theme', 'so_31835142_register_extra_thumbnail' ); // remove the existing loop thumbnail function so_31835142_swap_loop_product_thumbnail(){ if (class_exists('MultiPostThumbnails')) { remove_action( 'woocommerce_before_shop_loop_item_title', 'woocommerce_template_loop_product_thumbnail', 10 ); add_action( 'woocommerce_before_shop_loop_item_title', 'so_31835142_loop_product_thumbnail', 10 ); } } add_action( 'woocommerce_before_shop_loop_item, 'so_31835142_swap_loop_product_thumbnail' ); // Display the Secondary Thumbnail function so_31835142_loop_product_thumbnail(){ global $product; $thumbnail = MultiPostThumbnails::get_post_thumbnail( 'product', 'product-loop-image', $product->id, 'shop_catalog' ); if ( $thumbnail ) { return $thumbnail; } elseif ( wc_placeholder_img_src() ) { return wc_placeholder_img( $size ); } }
然后使用它，您将设置“产品循环图像”，就像您传统设置“特色图像”一样。 这个新图像将在循环中使用。
选项＃2：模板覆盖
但作为替代方案，如果您坚持，您可以编写自定义的single-product/product-image.php模板并将其放在主题的woocommerce模板文件夹中。
在这个替代方案中，我们只会在单个产品页面上显示图像库中的图像， $product->get_gallery_attachment_ids() ，我们将使用基本的PHP循环和计数器系统来显示不同的图像，具体取决于它们在循环中的位置。 IE浏览器。 第一个图像将显示为用于显示的后缩略图，其余项目将显示为拇指。
我已经测试了这一部分，所以理论上它应该是好的。
get_gallery_attachment_ids(); if ( $attachment_ids ) { $loop = 0; $columns = apply_filters( 'woocommerce_product_thumbnails_columns', 3 ); $attachment_count = count( $attachment_ids ); foreach ( $attachment_ids as $attachment_id ) { // here's your first image if( $loop === 0 ){ $image_title = esc_attr( get_the_title( $attachment_id ) ); $image_caption = get_post( $attachment_id )->post_excerpt; $image_link = wp_get_attachment_url( $attachment_id ); $image = wp_get_attachment_image( $attachment_id, apply_filters( 'single_product_large_thumbnail_size', 'shop_single' ), null, array( 'title' => $image_title, 'alt' => $image_title ) ); if ( $attachment_count > 0 ) { $gallery = '[product-gallery]'; } else { $gallery = ''; } echo apply_filters( 'woocommerce_single_product_image_html', sprintf( 'https://stackoverflow.com/questions/31835142/duplicated-pic-in-thumbnail-gallery-in-woocommerce/%s', $image_link, $image_caption, $image ), $post->ID ); // resume the thumbnails for the rest } else { // open the thumbnails div if( $loop === 1 ) { ?> $image_title, 'alt' => $image_title ) ); $image_class = esc_attr( implode( ' ', $classes ) ); echo apply_filters( 'woocommerce_single_product_image_thumbnail_html', sprintf( 'https://stackoverflow.com/questions/31835142/duplicated-pic-in-thumbnail-gallery-in-woocommerce/%s', $image_link, $image_class, $image_caption, $image ), $attachment_id, $post->ID, $image_class ); // close the thumbnails div if( $loop === $attachment_count ) { ?> ', wc_placeholder_img_src(), __( 'Placeholder', 'woocommerce' ) ), $post->ID ); } ?>