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

Product_Image::create_overlay_structure │ private │ WC 1.0

Create overlay structure for email compatibility. Uses Faux Absolute Position with badge-below fallback for better cross-client support.

Method of the class: Product_Image{}

No Hooks.

Returns

String.

Usage

// private - for code of main (parent) class only
$result = $this->create_overlay_structure( $image_html, $badges_html, $other_content, $badge_alignment, ?\WC_Product $product, $show_product_link ): string;

$image_html(string) (required)

Image HTML.

$badges_html(string) (required)

Badges HTML.

$other_content(string) (required)

Other inner content.

$badge_alignment(string) (required)

Badge alignment.

?\WC_Product $product

.
Default: null

$show_product_link(true|false)

Whether to show product link.
Default: false

Product_Image::create_overlay_structure() Product Image::create overlay structure code ^{WC 10.7.0}

private function create_overlay_structure(
	string $image_html,
	string $badges_html,
	string $other_content,
	string $badge_alignment,
	?\WC_Product $product = null,
	bool $show_product_link = false
): string {
	if ( empty( $badges_html ) ) {
		$linked_image_html = $image_html;
		if ( $show_product_link && $product ) {
			$linked_image_html = $this->wrap_with_link( $image_html, $product );
		}
		return $linked_image_html . $other_content;
	}

	$image_width  = $this->extract_image_width( $image_html );
	$image_height = $this->extract_image_height( $image_html );

	$linked_image_html = $image_html;
	if ( $show_product_link && $product ) {
		$linked_image_html = $this->wrap_with_link( $image_html, $product );
	}

	$vml_side     = ( 'left' === $badge_alignment ) ? 'left' : 'right';
	$overlay_html = sprintf(
		'<table cellpadding="0" cellspacing="0" border="0" style="width: %dpx; height: %dpx; table-layout: fixed;">
			<tr>
				<td style="font-size: 0; line-height: 0; padding: 0; height: %dpx; width: %dpx;">
				<div style="max-height:0; position:relative; opacity:0.999;">
					<!--[if mso]>
					<v:rect xmlns:v="urn:schemas-microsoft-com:vml" stroked="false" filled="false" style="mso-width-percent: 1000; position:absolute; top:16px; ' . esc_attr( $vml_side ) . ':16px;">
					<v:textbox inset="0,0,0,0">
					<![endif]-->
					<div style="padding: 12px; box-sizing: border-box; display: inline-block; width: 100%%; text-align: %s;">
						%s
					</div>
					<!--[if mso]>
					</v:textbox>
					</v:rect>
					<![endif]-->
				</div>
					%s
				</td>
			</tr>
		</table>%s',
		$image_width,
		$image_height,
		$image_height,
		$image_width,
		$badge_alignment,
		$badges_html,
		$linked_image_html,
		$other_content
	);

	return $overlay_html;
}