plugins - Woocommerce singe product custom gallery output works just on the first slide

admin管理员组

文章数量:1122832

I copied the "product-image.php" to my theme folder in order to change the HTML output a bit, so instead of using wc_get_gallery_image_html I created my function and changed the output there.

Here's the original function

and here's the modified one:

function my_custom_get_gallery_image_html( $attachment_id, $main_image = false ) {
$flexslider        = (bool) apply_filters( 'woocommerce_single_product_flexslider_enabled', get_theme_support( 'wc-product-gallery-slider' ) );
$gallery_thumbnail = wc_get_image_size( 'gallery_thumbnail' );
$thumbnail_size    = apply_filters( 'woocommerce_gallery_thumbnail_size', array( $gallery_thumbnail['width'], $gallery_thumbnail['height'] ) );
$image_size        = apply_filters( 'woocommerce_gallery_image_size', $flexslider || $main_image ? 'woocommerce_single' : $thumbnail_size );
$full_size         = apply_filters( 'woocommerce_gallery_full_size', apply_filters( 'woocommerce_product_thumbnails_large_size', 'full' ) );
$thumbnail_src     = wp_get_attachment_image_src( $attachment_id, $thumbnail_size );
$full_src          = wp_get_attachment_image_src( $attachment_id, $full_size );
$image             = wp_get_attachment_image(
    $attachment_id,
    $image_size,
    false,
    apply_filters(
        'woocommerce_gallery_image_html_attachment_image_params',
            array(
                'title'                   => get_post_field( 'post_title', $attachment_id ),
                'data-caption'            => get_post_field( 'post_excerpt', $attachment_id ),
                'data-src'                => $full_src[0],
                'data-large_image'        => $full_src[0],
                'data-large_image_width'  => $full_src[1],
                'data-large_image_height' => $full_src[2],
                'class'                   => $main_image ? 'wp-post-image' : '',
            ),
        $attachment_id,
        $image_size,
        $main_image
    )
);

return '<div style="background-image:url(' . esc_url( $full_src[0] ) . ');" data-thumb="' . esc_url( $thumbnail_src[0] ) . '" class="woocommerce-product-gallery__image"><a href="' . esc_url( $full_src[0] ) . '"></a></div>';
}

I'm trying to use background images instead of images inside the slider, but it loads style only on the first slide.

btw I added this part style="background-image:url(' . esc_url( $full_src[0] ) . ');"

I copied the "product-image.php" to my theme folder in order to change the HTML output a bit, so instead of using wc_get_gallery_image_html I created my function and changed the output there.

Here's the original function

and here's the modified one:

function my_custom_get_gallery_image_html( $attachment_id, $main_image = false ) {
$flexslider        = (bool) apply_filters( 'woocommerce_single_product_flexslider_enabled', get_theme_support( 'wc-product-gallery-slider' ) );
$gallery_thumbnail = wc_get_image_size( 'gallery_thumbnail' );
$thumbnail_size    = apply_filters( 'woocommerce_gallery_thumbnail_size', array( $gallery_thumbnail['width'], $gallery_thumbnail['height'] ) );
$image_size        = apply_filters( 'woocommerce_gallery_image_size', $flexslider || $main_image ? 'woocommerce_single' : $thumbnail_size );
$full_size         = apply_filters( 'woocommerce_gallery_full_size', apply_filters( 'woocommerce_product_thumbnails_large_size', 'full' ) );
$thumbnail_src     = wp_get_attachment_image_src( $attachment_id, $thumbnail_size );
$full_src          = wp_get_attachment_image_src( $attachment_id, $full_size );
$image             = wp_get_attachment_image(
    $attachment_id,
    $image_size,
    false,
    apply_filters(
        'woocommerce_gallery_image_html_attachment_image_params',
            array(
                'title'                   => get_post_field( 'post_title', $attachment_id ),
                'data-caption'            => get_post_field( 'post_excerpt', $attachment_id ),
                'data-src'                => $full_src[0],
                'data-large_image'        => $full_src[0],
                'data-large_image_width'  => $full_src[1],
                'data-large_image_height' => $full_src[2],
                'class'                   => $main_image ? 'wp-post-image' : '',
            ),
        $attachment_id,
        $image_size,
        $main_image
    )
);

return '<div style="background-image:url(' . esc_url( $full_src[0] ) . ');" data-thumb="' . esc_url( $thumbnail_src[0] ) . '" class="woocommerce-product-gallery__image"><a href="' . esc_url( $full_src[0] ) . '"></a></div>';
}

I'm trying to use background images instead of images inside the slider, but it loads style only on the first slide.

btw I added this part style="background-image:url(' . esc_url( $full_src[0] ) . ');"

• plugins
• functions
• theme-development
• woocommerce-offtopic

Share Improve this question edited Aug 17, 2024 at 9:36 Cow 11111 silver badge55 bronze badges asked Mar 19, 2019 at 19:11 DarkoDarko 14611 silver badge77 bronze badges

Add a comment  | 

1 Answer 1

Sorted by: Reset to default 1

Apparently, in order to make it work there's a second file (product-thumbnails.php) using the same function, so if the default function is changed in one file, the second one must be updated too.

本文标签： pluginsWoocommerce singe product custom gallery output works just on the first slide