How To Use The Thumbnail Image For Meta Image Tags

Hello everyone,

I'm using Open Graph (og) and twitter tags for my website to make the product sharing look nicer on social media. Here is the code that I use in my_changes add-on hook

{if $runtime.controller == 'products' && $runtime.mode == 'view'}
<meta property="og:title" content="{$product.product}">
<meta property="og:type" content="website">
<meta property="og:url" content="{"products.view?product_id=`$product.product_id`"|fn_url}">
<meta property="og:description" content="{$product.full_description|strip_tags|truncate:160 nofilter}">

<meta itemprop="name" content="{$product.product}">

<meta name="twitter:title" content="{$product.product}">
<meta name="twitter:card" content="summary">
<meta name="twitter:url" content="{"products.view?product_id=`$product.product_id`"|fn_url}">

{if $product.main_pair.detailed}
	<meta property="og:image" content="{$product.main_pair.detailed.https_image_path}">
	<meta itemprop="image" content="{$product.main_pair.detailed.https_image_path}">
	<meta name="twitter:image" content="{$product.main_pair.detailed.https_image_path}">


Everything seems to be working nice. But the only problem that I have here is that in some cases the detailed image of the product is too big to show in share cards. I believe in these cases the image is not shown or either cropped badly.

What I want to do is the use the generated main thumbnail image for the product. I have tried selecting the "icon" object inside "main_pair" but it returns empty.

Any ideas on how to proceed?


{if $product.main_pair.detailed}



{if $product.main_pair}


where 640 and 480 - required image dimensions

It seems like it's working fine now. The size seems very useful. However this might increase the thumbnails created for every product. But I believe it's a small price to pay.

Thanks for the advice