How to use one component dialog fields in page component html files

[sams16001423]

Hi All,

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 .

or

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

Thanks in advance

Thanks,

Sam

[VeenaVikraman]

So is it possible to use the page properties image as thumbnail image in your information component ? 

[raj_mandalapu · Accepted solution]

@sams16001423  I suggest you check this requirement with the business, authoring one image in the component and authoring another image in the page properties section because sometimes the business wants to author a separate image for the SEO purpose I mean here for social sharing. If that is the requirement then you need to give high priority to the image which is authored in the component. if the image is not authored in the component then get the image from the page properties.

I feel og:tags are sufficient to meet this requirement but, if you want to have greater control then you need to go with the js approach. on click of the share button, you need to get the image path, title, description, etc and pass it as a query parameter to the social share links.

If you want to author only one image then you can use OOTB thumbnail image functionality,