Я создаю сайт Woocommerce.
В обзоре сетки магазинов я показываю Featured Image каждого продукта ( см. Ссылку ). Это изображение будет обрезано, чтобы поддерживать одинаковое соотношение изображений в сетке магазинов.
На странице « Единственный продукт» мне удалось скрыть «Лучшее изображение» и сделать первый из миниатюр большим ( см. Ссылку ).
Я сделал это со следующим кодом:
<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 – основной снимок) при соединении с лайтбокс.
Затем я вызываю миниатюры , и я прячу первый, используя jQuery, чтобы избежать дублирования (первое изображение большого размера и первый большой палец одинаковы).
Проблема в том, что в Лайтбоксе первое изображение будет дублироваться , поскольку оно существует два раза в массиве, первое, что я вызываю в большом, и первое из массива больших пальцев.
Любые советы о том, как не показывать изображение дважды в лайтбокс?
Кто-то сказал, что я должен отфильтровать следующую функцию, но на данный момент я не знаю, как это сделать.
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 ); } }
Затем, чтобы использовать его, вы должны установить «Product Loop Image» так же, как вы традиционно устанавливаете «отображаемое изображение». И это новое изображение будет использоваться в цикле.
Вариант №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>