Automattic\WooCommerce\EmailEditor\Integrations\WooCommerce\Renderer\Blocks

Product_Image::build_image_htmlprivateWC 1.0

Build email-compatible image HTML.

Method of the class: Product_Image{}

No Hooks.

Returns

String.

Usage

// private - for code of main (parent) class only
$result = $this->build_image_html( $image_data, $attributes, $rendering_context ): string;
$image_data(array) (required)
Image data.
$attributes(array) (required)
Block attributes.
$rendering_context(Rendering_Context) (required)
Rendering context.

Product_Image::build_image_html() code WC 10.4.3

private function build_image_html( array $image_data, array $attributes, Rendering_Context $rendering_context ): string {
	$style_parts = array(
		'max-width' => '100%',
		'height'    => 'auto',
		'display'   => 'block',
	);

	if ( ! empty( $attributes['scale'] ) ) {
		$style_parts['object-fit'] = $attributes['scale'];
	}

	if ( ! empty( $attributes['width'] ) ) {
		$style_parts['width'] = $attributes['width'];
	}

	if ( ! empty( $attributes['height'] ) ) {
		$style_parts['height'] = $attributes['height'];
	}

	if ( ! empty( $attributes['aspectRatio'] ) ) {
		$style_parts['aspect-ratio'] = $attributes['aspectRatio'];
	}

	$width        = ! empty( $attributes['width'] ) ? Styles_Helper::parse_value( $attributes['width'] ) : $image_data['width'];
	$layout_width = Styles_Helper::parse_value( $rendering_context->get_layout_width_without_padding() );

	if ( $width > $layout_width ) {
		$width                = $layout_width;
		$aspect_ratio         = $image_data['height'] / $image_data['width'];
		$attributes['height'] = round( $width * $aspect_ratio ) . 'px';
	}

	$height = $image_data['height'];
	if ( ! empty( $attributes['height'] ) ) {
		$height = Styles_Helper::parse_value( $attributes['height'] );
	} elseif ( ! empty( $attributes['width'] ) && $image_data['width'] > 0 ) {
		$aspect_ratio = $image_data['height'] / $image_data['width'];
		$height       = round( $width * $aspect_ratio );
	}

	return sprintf(
		'<img class="email-editor-product-image skip-lazy" data-skip-lazy="1" loading="eager" decoding="auto" src="%s" alt="%s" style="%s" width="%d" height="%d" />',
		esc_url( $image_data['url'] ),
		esc_attr( $image_data['alt'] ),
		esc_attr( \WP_Style_Engine::compile_css( $style_parts, '' ) ),
		$width,
		$height
	);
}