Woocommerce中缩略图库中的重复图片 [英] Duplicated pic in thumbnail gallery in Woocommerce
问题描述
我正在建立一个Woocommerce网站.
在商店网格概述中，我显示了每种产品的特色图片(请参阅链接).该精选图片将被裁剪以在Shop Grid中保持相同的图片比例.
在单个产品页面中，我设法隐藏了精选图片，并使第一个缩略图以大尺寸显示( 第一部分将找到图库数组中的第一张图像，并以大尺寸显示它(首先将woocommerce-main-image缩放为类)，同时链接到灯箱. 然后我将其称为缩略图，然后我使用jQuery隐藏第一个缩略图，以避免重复(第一个大尺寸图像和第一个拇指相同).
现在的问题是，在灯箱中，第一张图像将显示为重复，因为它在阵列中存在两次，我第一次调用大图像，而第二次是从thumbs阵列 关于如何不在灯箱中两次显示图像的任何提示吗? 有人提到我应该过滤以下函数，但是到目前为止我还不知道该怎么做.
我认为使用多个发布缩略图是最简单的解决方案. 准确用于在不同位置显示不同的特色图像. 选项1:多个帖子缩略图 您将安装插件，然后将以下内容添加到主题的functions.php中.它没有经过100％的测试，因此可能有错字或其他错误.完整的文档在此处. 然后使用它，您将以与传统上设置功能图像"相同的方式设置产品循环图像".并且此新图像将在循环中使用. 选项2:模板覆盖 但是，如果您坚持要求，也可以编写一个自定义的 在这种替代方式中，我们将仅在单个产品页面 本节已经测试过，所以从理论上讲应该不错. I'm building a Woocommerce site. In the Shop grid overview, I'm showing the Featured Image of each product (see link). This Featured image will be cropped to maintain the same image ratio in the Shop Grid. In the Single Product page, I managed to hide the Featured Image, and make the first of the thumbnails appear in big (see link). I did so with the following code: The first part will find the first image in the gallery array and show it in big size (class woocommerce-main-image zoom first) while linking to the lightbox. Then I call the thumbnails, and I hide the first one using jQuery to avoid a duplicate (first big size image and first thumb are the same). The problem now is that in the Lightbox, the first image will appear duplicated, as it exists two times in the array, the first one I call in big, and the one from the thumbs array. Any tips on how to not show the image twice in the lightbox? Someone mentioned that I should filter the following function, but as of now I don't know how to do that.
I think that using Multiple Post Thumbnails is the easiest solution. It is exactly for displaying different featured images in different locations. Option #1: Multiple Post Thumbnails You would install the plugin and then add the following to your theme's functions.php. It isn't 100% tested so there may be a stray typo or something. Full documentation is here. Then to use it, you'd set "Product Loop Image" the same way you traditionally set the "featured image". And this new image would be used in the loop. Option #2: Template Overrides But as an alternative, if you insist, you can write a custom In this alternative we will only show images from the image gallery on the single product page, This section I have tested, so it should (in theory) be good to go.
这篇关于Woocommerce中缩略图库中的重复图片的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！public function get_gallery_attachment_ids() {
return apply_filters( 'woocommerce_product_gallery_attachment_ids', array_filter( (array) explode( ',', $this->product_image_gallery ) ), $this );
}
// 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 );
}
}
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>
<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>
public function get_gallery_attachment_ids() {
return apply_filters( 'woocommerce_product_gallery_attachment_ids', array_filter( (array) explode( ',', $this->product_image_gallery ) ), $this );
}
// 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 );
}
}
single-product/product-image.php template and put it in your theme's woocommerce templates folder. $product->get_gallery_attachment_ids(), and we will use a basic PHP loop and counter system to display the images differently depending on where they are in the loop. IE. the first image will display as the post thumbnail used to display and the remaining items will display as thumbs.<?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>
