Jump to content

  • You cannot start a new topic
  • You cannot reply to this topic

How To Use The Thumbnail Image For Meta Image Tags Rate Topic   - - - - -

 

Posted 23 February 2020 - 12:38 PM #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'}
	<script async="async" type="text/javascript" src="//s7.addthis.com/js/300/addthis_widget.js#pubid=ra-5b0ed93a795feb30"></script>
	
	<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?



 
  • eComLabs
  • CS-Cart Expert
  • Authorized Reseller
  • Join Date: 27-Jan 14
  • 20773 posts

Posted 24 February 2020 - 06:02 AM #2

Replace

 

{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}

 

with

 

{if $product.main_pair}
{$image_data=$product.main_pair|fn_image_to_display:640:480}
<meta property="og:image" content="{$image_data.image_path}">
<meta itemprop="image" content="{$image_data.image_path}">
<meta name="twitter:image" content="{$image_data.image_path}">
{/if}

where 640 and 480 - required image dimensions


GET A FREE QUOTE | CS-Cart Add-ons | CS-Cart Licenses | CS-Cart Development | CS-Cart Design | Server Configuration | UniTheme and YOUPI
CS-Cart                USD 345     Multi-Vendor              USD 1250    Multi-Vendor PLUS           USD 3100 (2775)
CS-Cart Ultimate  USD 775     CS-Cart + YOUPI      USD 545      Multi-Vendor Ultimate       USD 7500 (6000)

 

Posted 02 March 2020 - 05:39 PM #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