Automattic\WooCommerce\Blocks\BlockTypes

FeaturedItem::render_image │ private │ WC 1.0

Renders the featured image

Method of the class: FeaturedItem{}

No Hooks.

Returns

string.

Usage

// private - for code of main (parent) class only
$result = $this->render_image( $attributes, $item );
$attributes(array) (required)
Block attributes.
Default: empty array
$item(WC_Product|\WP_Term) (required)
Item object.

FeaturedItem::render_image() code WC 11.1.2

private function render_image( $attributes, $item ) {
	$style   = sprintf( 'object-fit: %s;', $attributes['imageFit'] );
	$img_alt = $attributes['alt'] ?: $this->get_item_title( $item );

	if ( $this->hasFocalPoint( $attributes ) ) {
		$style .= sprintf(
			'object-position: %s%% %s%%;',
			$attributes['focalPoint']['x'] * 100,
			$attributes['focalPoint']['y'] * 100
		);
	}

	$image_size = $this->get_image_size( $attributes );

	// When imageFit is not "cover", the image uses object-fit: none, so it is
	// not scaled to the block — it renders at its natural pixel size. Before
	// this block used responsive images, a single large URL was always loaded,
	// which was typically bigger than the block and got clipped by overflow:
	// hidden, making the block look filled. wp_get_attachment_image() picks a
	// smaller srcset candidate on narrow viewports by default, leaving empty
	// space around the image. Override sizes so the browser still selects the
	// full image width and the previous appearance is preserved.
	if ( 'cover' === $attributes['imageFit'] ) {
		$image_id = empty( $attributes['mediaId'] ) ?
			$this->get_item_image_id( $item ) :
			absint( $attributes['mediaId'] );

		if ( $image_id ) {
			$attr = array(
				'alt'   => $img_alt,
				'class' => "wc-block-{$this->block_name}__background-image",
				'style' => $style,
			);

			return wp_get_attachment_image( $image_id, $image_size, false, $attr );
		}
	}

	$image_url = $this->get_image_url( $attributes, $item );

	if ( ! empty( $image_url ) ) {
		return sprintf(
			'<img alt="%1$s" class="wc-block-%2$s__background-image" src="%3$s" style="%4$s" />',
			esc_attr( $img_alt ),
			$this->block_name,
			esc_url( $image_url ),
			esc_attr( $style )
		);
	}

	return '';
}