Woocommerce 缩略图库中的重复图片

Question

我正在建立一个 Woocommerce 网站。

在商店网格概览中，我展示了每种产品的特色图片 (see link)。将裁剪此精选图片以在商店网格中保持相同的图片比例。

在单一产品页面中，我设法隐藏了特色图片，并使第一个缩略图显示为大（see link）。

我使用以下代码这样做：

<div class="images">

    <?php

            $imgid = $product->get_gallery_attachment_ids();

    ?>

    <a href="<?php echo wp_get_attachment_url( $imgid[0] ); ?>"
       class="woocommerce-main-image zoom first" 
       rel="lightbox[product-gallery]">
            <img src="<?php echo wp_get_attachment_url( $imgid[0] ); ?>" alt="">
    </a>

    <?php do_action( 'woocommerce_product_thumbnails' ); ?>

</div>

<script>
    jQuery('.thumbnails.columns-3 a:first-child').hide()
</script>

第一部分将在链接到灯箱时在图库数组中找到第一张图片并以大尺寸显示它（首先使用 woocommerce-main-image 缩放类）。

然后我调用缩略图，并使用 jQuery 隐藏第一个以避免重复（第一个大尺寸图像和第一个拇指相同）。 p>

现在的问题是，在 Lightbox 中，第一张图片会出现重复，因为它在数组中存在两次，第一个我调用 big，另一个来自 thumbs 数组.

关于如何在灯箱中不显示两次图像的任何提示？

有人提到我应该过滤以下功能，但目前我不知道该怎么做。

public function get_gallery_attachment_ids() {
    return apply_filters( 'woocommerce_product_gallery_attachment_ids', array_filter( (array) explode( ',', $this->product_image_gallery ) ), $this );
}

Answer 1

我认为使用Multiple Post Thumbnails 是最简单的解决方案。 正好用于在不同的位置显示不同的特色图像。

选项 #1：多个帖子缩略图

您将安装插件，然后将以下内容添加到您的主题的functions.php。它没有经过 100% 的测试，因此可能存在错误的错字或其他问题。完整的documentation is here。

// 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。第一张图片将显示为用于显示的帖子缩略图，其余项目将显示为缩略图。

这部分我已经测试过了，所以（理论上）应该不错。

<?php
/**
 * Single Product Image
 *
 * @author      WooThemes
 * @package     WooCommerce/Templates
 * @version     2.0.14
 */

if ( ! defined( 'ABSPATH' ) ) {
    exit; // Exit if accessed directly
}

global $post, $woocommerce, $product;

?>
<div class="images">

<?php
$attachment_ids = $product->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( '<a href="%s" itemprop="image" class="woocommerce-main-image zoom" title="%s" data-rel="prettyPhoto' . $gallery . '">%s</a>', $image_link, $image_caption, $image ), $post->ID );

        // resume the thumbnails for the rest
        } else {

            // open the thumbnails div
            if( $loop === 1 ) { ?> 
                <div class="thumbnails <?php echo 'columns-' . $columns; ?>">
            <?php }

                $classes = array( 'zoom' );

                if ( $loop == 0 || $loop % $columns == 0 )
                    $classes[] = 'first';

                if ( ( $loop + 1 ) % $columns == 0 )
                    $classes[] = 'last';

                $image_link = wp_get_attachment_url( $attachment_id );

                if ( ! $image_link )
                    continue;

                $image_title    = esc_attr( get_the_title( $attachment_id ) );
                $image_caption  = esc_attr( get_post_field( 'post_excerpt', $attachment_id ) );

                $image       = wp_get_attachment_image( $attachment_id, apply_filters( 'single_product_small_thumbnail_size', 'shop_thumbnail' ), 0, $attr = array(
                    'title' => $image_title,
                    'alt'   => $image_title
                    ) );

                $image_class = esc_attr( implode( ' ', $classes ) );

                echo apply_filters( 'woocommerce_single_product_image_thumbnail_html', sprintf( '<a href="%s" class="%s" title="%s" data-rel="prettyPhoto[product-gallery]"  data-id="'. $attachment_id. '">%s</a>', $image_link, $image_class, $image_caption, $image ), $attachment_id, $post->ID, $image_class );

            // close the thumbnails div
            if( $loop === $attachment_count ) { ?> 
                </div>
            <?php }

        }

        $loop++;
    }

    ?>
    <?php
} else {

    echo apply_filters( 'woocommerce_single_product_image_html', sprintf( '<img src="%s" alt="%s" />', wc_placeholder_img_src(), __( 'Placeholder', 'woocommerce' ) ), $post->ID );

}
?>

</div>