we have 100 + information pages - for which we have created a information component which will have thumbnail image , title and a brief description including like views and share button where user can share this information content on WhatsApp, fb & email. If user share's this information on WhatsApp then in WhatsApp chat we need to show title description and image like below screenshot
(for example I have shared bit bucket URL which)
so currently if I share any information page on WhatsApp these above three properties are coming from page properties section so I have customized and added new thumbnail property(PFB screenshot) where we can author an image I'm reading image property along with title & description in metadata.html which all above 3 are displaying after sharing information page on WhatsApp like exactly same as bit bucket sample Image.
metadata.html sample code
so instead of authoring one image in component and authoring another image in page properties section , I want to use only one Image which is authored on page in the information component and i want to use that in metadata.html (here calling sling model of info component in metadata.html and calling image is not working)as a result it will be visible when we share information page on WhatsApp .
suggest if you have any better approach like use all these three from HTML and write logic in JS where share button functionality & WhatsApp API call code is written