php - 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 隐藏第一个缩略图以避免重复(第一个大尺寸图像和第一个缩略图是相同的)。

现在的问题是在灯箱中，第一张图像将出现重复，因为它在数组中存在两次，第一个是我在 big 中调用的，另一个是来自拇指数组的.

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

有人提到我应该过滤以下函数，但到目前为止我不知道该怎么做。

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 templates 文件夹中。

在此替代方案中，我们将仅在单个产品页面上显示图片库中的图像，$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>