wc_get_gallery_image_html() │ WC 3.3.2

Get HTML for a gallery image.

Hooks: woocommerce_gallery_thumbnail_size, woocommerce_gallery_image_size and woocommerce_gallery_full_size accept name based image sizes, or an array of width/height values.

Returns

String.

Usage

wc_get_gallery_image_html( $attachment_id, $main_image, $image_index );

$attachment_id(int) (required)

Attachment ID.

$main_image(true|false)

Is this the main image or a thumbnail?.
Default: false

$image_index(int)

The image index in the gallery.
Default: -1

Changelog

wc_get_gallery_image_html() wc get gallery image html code ^{WC 10.6.2}

function wc_get_gallery_image_html( $attachment_id, $main_image = false, $image_index = -1 ) {
	global $product;

	$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 );
	$thumbnail_srcset  = wp_get_attachment_image_srcset( $attachment_id, $thumbnail_size );
	$thumbnail_sizes   = wp_get_attachment_image_sizes( $attachment_id, $thumbnail_size );
	$full_src          = wp_get_attachment_image_src( $attachment_id, $full_size );
	$alt_text          = trim( wp_strip_all_tags( get_post_meta( $attachment_id, '_wp_attachment_image_alt', true ) ) );
	$alt_text          = ( empty( $alt_text ) && ( $product instanceof WC_Product ) ) ? woocommerce_get_alt_from_product_title_and_position( $product->get_title(), $main_image, $image_index ) : $alt_text;

	/**
	 * Filters the attributes for the image markup.
	 *
	 * @since 3.3.2
	 *
	 * @param array $image_attributes Attributes for the image markup.
	*/
	$image_params = apply_filters(
		'woocommerce_gallery_image_html_attachment_image_params',
		array(
			'title'                   => _wp_specialchars( get_post_field( 'post_title', $attachment_id ), ENT_QUOTES, 'UTF-8', true ),
			'data-caption'            => _wp_specialchars( get_post_field( 'post_excerpt', $attachment_id ), ENT_QUOTES, 'UTF-8', true ),
			'data-src'                => isset( $full_src[0] ) ? esc_url( $full_src[0] ) : '',
			'data-large_image'        => isset( $full_src[0] ) ? esc_url( $full_src[0] ) : '',
			'data-large_image_width'  => isset( $full_src[1] ) ? esc_attr( $full_src[1] ) : '',
			'data-large_image_height' => isset( $full_src[2] ) ? esc_attr( $full_src[2] ) : '',
			'class'                   => esc_attr( $main_image ? 'wp-post-image' : '' ),
			'alt'                     => esc_attr( $alt_text ),
		),
		$attachment_id,
		$image_size,
		$main_image
	);

	if ( isset( $image_params['title'] ) ) {
		unset( $image_params['title'] );
	}

	$image = wp_get_attachment_image(
		$attachment_id,
		$image_size,
		false,
		$image_params
	);

	return '<div data-thumb="' . esc_url( isset( $thumbnail_src[0] ) ? $thumbnail_src[0] : '' ) . '" data-thumb-alt="' . esc_attr( $alt_text ) . '" data-thumb-srcset="' . esc_attr( isset( $thumbnail_srcset ) ? $thumbnail_srcset : '' ) . '"  data-thumb-sizes="' . esc_attr( isset( $thumbnail_sizes ) ? $thumbnail_sizes : '' ) . '" class="woocommerce-product-gallery__image"><a href="' . esc_url( isset( $full_src[0] ) ? $full_src[0] : '' ) . '">' . $image . '</a></div>';
}