How To Use The Thumbnail Image For Meta Image Tags

Store Builder Questions
1

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 meta.post.tpl.

{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}">
{/if}



{/if}

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?

2

Replace

{if $product.main_pair.detailed}



{/if}

with

{if $product.main_pair}
{$image_data=$product.main_pair|fn_image_to_display:640:480}



{/if}

where 640 and 480 - required image dimensions

3

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